Industry-coined trend

Neumorphism

Controls molded into a matte surface through two very soft shadows.

Also called: Soft UI, neomorphism, soft neumorphic UI

Controls molded into one continuous matte surface.

Understand

Definition and scope

Neumorphism makes controls appear raised from or pressed into one continuous surface. Background and elements share the same color while a light and dark shadow pair creates relief.

Scope: This entry covers the Soft UI trend that appeared around 2019. Thicker, independently colored floating objects belong closer to claymorphism.

Recognize

The four defining signals should remain visible without relying on the style name.

Surface

One continuous surface

The background and controls share exactly the same matte color.

Depth

Dual soft shadows

One light and one dark shadow describe a consistent diagonal light.

Depth

Pressed inset state

Active states invert the shadows into the surface.

Geometry

Low-contrast edges

The shape appears through shadow transitions without a clear outline.

Choose

Good context

A few decorative controls in a simple interface with a constant background.
A specimen or visual identity where softness matters more than density.

Misuse

Making every control nearly invisible to preserve a uniform surface.
Changing the light direction between components.

Compare

Decisive difference with the closest neighbor

Neumorphism vs SkeuomorphismNeumorphism molds all controls into one abstract surface. Skeuomorphism imitates real materials and objects that can be named.

Understand → Recognize → Choose → Compare

Pack for your agent

Pre-written instruction by SkillCodex — your request is neither sent nor used to adapt this text; no content is generated, and copying executes nothing.

implementation

Implement in your agent

# Implement Neumorphism in your agent

## Objective
Create a neumorphic surface limited to a few secondary controls. Use one shared matte color, a coherent opposing shadow pair, and inset states. Always add contrast and focus independent from shadows.

## Prerequisites
- Inspect existing components, tokens, and brand constraints.
- Confirm that this style fits the surface and content.
- Preserve existing structure, semantics, and interactions.

## Behavior and surfaces
- One continuous surface — The background and controls share exactly the same matte color.
- Dual soft shadows — One light and one dark shadow describe a consistent diagonal light.
- Pressed inset state — Active states invert the shadows into the surface.
- Low-contrast edges — The shape appears through shadow transitions without a clear outline.

## States
- Cover existing default, hover, focus, active, disabled, loading, and error states.
- Provide a static state when reduced motion is requested.

## Accessibility
- Add boundaries and states that remain perceptible without low-contrast shadows.
- Keep a high-contrast focus outline around every control.
- Avoid this treatment for critical forms and long action lists.

## Non-goals
- Making every control nearly invisible to preserve a uniform surface.
- Changing the light direction between components.

## Acceptance criteria
- A few decorative controls in a simple interface with a constant background.
- A specimen or visual identity where softness matters more than density.

sha256:3813c46bbc9e1a0d200492fa8d977eb75cc18937875bd076f1f2f340d75128fe

debugging

Debug in your agent

# Debug Neumorphism in your agent

## Observed symptom
[DÉCRIS ICI LE SYMPTÔME]

## Observable checks
- Compare the surface with the documented visual signals.
- Verify contrast, focus, reduced motion, and fallback behavior.
- Isolate the visual layer without changing functional structure.

## Possible causes
- The style hides hierarchy or reduces contrast.
- The effect is applied to too many surfaces or depends on an unavailable API.
- An interactive state is no longer perceivable.

## Bounded corrections
Repair neumorphism by increasing label contrast and adding a border or color change to states. Keep shadows as visual depth, never the only way to understand an action.

## Final verification
- Add boundaries and states that remain perceptible without low-contrast shadows.
- Keep a high-contrast focus outline around every control.
- Avoid this treatment for critical forms and long action lists.

sha256:a47eae2d54b73a713d9b1b19f4557c9f77403d72731944a9a716ea4f3c097f7d

Pack digest: sha256:69aa2aa2c89c4d4bfbe2a9f84ae3cb890a91a2c2df5f9e392e82139a4556199d

Accessibility and verification

1Add boundaries and states that remain perceptible without low-contrast shadows.
2Keep a high-contrast focus outline around every control.
3Avoid this treatment for critical forms and long action lists.

Sources

Editorial revision: 1.2.2
Sources consulted on: 2026-07-20
Source catalog digest: sha256:6e047c91ac34b3558576dea986805be6086c1a5a18ed2ed27fa1e56214cef304; sha256-utf8-canonical-json-lf/v1

Open the versioned source catalog

# Implement Neumorphism in your agent ## Objective Create a neumorphic surface limited to a few secondary controls. Use one shared matte color, a coherent opposing shadow pair, and inset states. Always add contrast and focus independent from shadows. ## Prerequisites - Inspect existing components, tokens, and brand constraints. - Confirm that this style fits the surface and content. - Preserve existing structure, semantics, and interactions. ## Behavior and surfaces - One continuous surface — The background and controls share exactly the same matte color. - Dual soft shadows — One light and one dark shadow describe a consistent diagonal light. - Pressed inset state — Active states invert the shadows into the surface. - Low-contrast edges — The shape appears through shadow transitions without a clear outline. ## States - Cover existing default, hover, focus, active, disabled, loading, and error states. - Provide a static state when reduced motion is requested. ## Accessibility - Add boundaries and states that remain perceptible without low-contrast shadows. - Keep a high-contrast focus outline around every control. - Avoid this treatment for critical forms and long action lists. ## Non-goals - Making every control nearly invisible to preserve a uniform surface. - Changing the light direction between components. ## Acceptance criteria - A few decorative controls in a simple interface with a constant background. - A specimen or visual identity where softness matters more than density.

# Debug Neumorphism in your agent ## Observed symptom [DÉCRIS ICI LE SYMPTÔME] ## Observable checks - Compare the surface with the documented visual signals. - Verify contrast, focus, reduced motion, and fallback behavior. - Isolate the visual layer without changing functional structure. ## Possible causes - The style hides hierarchy or reduces contrast. - The effect is applied to too many surfaces or depends on an unavailable API. - An interactive state is no longer perceivable. ## Bounded corrections Repair neumorphism by increasing label contrast and adding a border or color change to states. Keep shadows as visual depth, never the only way to understand an action. ## Final verification - Add boundaries and states that remain perceptible without low-contrast shadows. - Keep a high-contrast focus outline around every control. - Avoid this treatment for critical forms and long action lists.