Updated: Jul 19, 2026
Version: v1.3.0
Sources: 2 sources
Status: Published

Terminology classification · 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.

Style DNA

What the style requires, what usually comes with it, what can change without leaving it, and what betrays it.

Weekly report

Active sessions

12,480+8.2% vs last week

On track

Open the style gallery

Same card, rendered in Neumorphism.

Defines the style

Background and controls share exactly the same matte color.
One light and one dark shadow describe a constant diagonal light.
Active states invert the shadows into the surface.

Supports the style

Very rounded shapes, often pills or circles.
A desaturated pastel palette, light or dark.
Few controls per screen, with generous space around them.

Can vary

The base tint, as long as background and elements keep sharing it.
Shadow distance and blur, as long as the light direction stays the same.
A single colored accent for the active value or progress.

Avoid

Accessibility defectBoundaries and states perceptible only through low-contrast shadows.
Accessibility defectA missing focus outline, or one as soft as the shadows.
CaricatureEvery control molded until it becomes nearly invisible.
ContradictionA light direction that changes from one component to the next.

Close cousins

Styles that share a signal without sharing the rule.

Same card, four styles

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.

Ready-to-use briefs

Choose the intent that matches your work, then copy this static brief into your agent.

Create

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.

Modify

Modify only decorative or low-risk controls. Align background and element colors, normalize light direction, and preserve existing labels, focus borders, and states.

Repair

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.

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.

Implement correctly

Create a coherent Neumorphism direction

# 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.

## When not to use
- 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.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

Requires · Existing tokens, components, and brand constraints

Why it works

The style is framed by signals and surfaces, not just a visual reference.
States and fallbacks preserve use when motion or an API is unavailable.
Accessibility and performance criteria prevent aesthetics from becoming debt.

Try next

Audit Neumorphism in the product

# Audit Neumorphism on the real surface

## Objective
Check that Neumorphism remains consistent, accessible, and measured on the components that actually use it.

## Checks
- Compare interactive states and fallbacks.
- Check contrast, focus, and reduced motion.
- Report visual effects that weaken hierarchy or performance.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

StyleSkeuomorphism

sha256:ccc965b9dd05b7d59290fe149a758b671e811a65d11128af0f7e1523ba2f2f2a

Diagnose a problem

Fix Neumorphism inconsistencies

# Debug Neumorphism in your agent

## Observed symptom
[DESCRIBE THE SYMPTOM HERE]

## 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.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

Requires · Existing tokens, components, and brand constraints

Why it works

The diagnosis compares observable signals instead of judging taste.
The visual layer is isolated to preserve structure and interactions.
The fix stays tied to fallbacks, contrast, and interactive states.

Try next

Stabilize Neumorphism in the design system

# Prevent Neumorphism drift

## Objective
Turn the visual fix into a reusable rule and focused check without freezing the whole interface.

## Checks
- Isolate the responsible tokens or variants.
- Add focused evidence for the affected states.
- Compare nearby styles before widening the rule.

## Guardrails
- Show the proposed changes before any external action.
- Do not publish, send, delete, pay for, or change remote state without explicit authorization.
- Preserve unrelated changes and stop if the scope becomes ambiguous.

## Output format
- Outcome or verdict.
- Files or actions involved.
- Checks run and observable evidence.
- Remaining blockers or limitations.

StyleSkeuomorphism

sha256:2a67a24ff3865544fc194c88d028945bfcbc9453d9adf7d15b9dbe496d90267b

Pack digest: sha256:2cfce07fa28cec2ece36fe12a2728b25f1fd42bf5752858bb4139d7899b68b2d

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

Content revision: 1.3.0
Sources consulted on: 2026-07-20
Source catalog digest: sha256:e2e112ed9b0cabe7c6e72351765c2d7c1d0d309274926a8b1efe2aa9aa4f66b6; 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. ## When not to use - 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. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.

# Audit Neumorphism on the real surface ## Objective Check that Neumorphism remains consistent, accessible, and measured on the components that actually use it. ## Checks - Compare interactive states and fallbacks. - Check contrast, focus, and reduced motion. - Report visual effects that weaken hierarchy or performance. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.

# Debug Neumorphism in your agent ## Observed symptom [DESCRIBE THE SYMPTOM HERE] ## 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. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.

# Prevent Neumorphism drift ## Objective Turn the visual fix into a reusable rule and focused check without freezing the whole interface. ## Checks - Isolate the responsible tokens or variants. - Add focused evidence for the affected states. - Compare nearby styles before widening the rule. ## Guardrails - Show the proposed changes before any external action. - Do not publish, send, delete, pay for, or change remote state without explicit authorization. - Preserve unrelated changes and stop if the scope becomes ambiguous. ## Output format - Outcome or verdict. - Files or actions involved. - Checks run and observable evidence. - Remaining blockers or limitations.