Neumorphism / Soft UI

What you see

The perceptual fingerprint, in the order you notice it.

• Background and controls in the same colour, distinguished only by shadow
• Two shadows per element — light from the top-left, dark from the bottom-right
• Very soft large radii on everything
• Almost no borders and almost no colour variation
• Pressed elements that appear carved into the surface rather than lifted

Best for

• Small focused surfaces — players, controls, single-purpose panels
• Brands aiming at calm, tactile, physical-product associations
• Showcase pieces where the surface itself is the demonstration

Avoid when

• Anything with real accessibility requirements and no budget to fix them
• Dense interfaces — the shadow pair costs space around every element
• Dark or saturated kits, where the light shadow has nowhere to go

Accessibility

Where this style tends to fail an audit, and what fixes it.

• This is the highest-risk style in the catalog. Shadow-only boundaries routinely fail the 3:1 non-text contrast requirement, so every control here also needs a real border or fill difference.
• Selected state must never be 'pressed shadow' alone — carve plus an accent rule plus a glyph, or the state is invisible to a large share of users.
• Focus cannot be a soft glow. Use a solid 2px `--ring` outline with a 2px offset, which deliberately breaks the soft aesthetic where it must.