Soft UI Evolution
Also called: Soft UI 2.0, Neumorphism 2.0, Accessible Neumorphism
Neumorphism grown up: the same gentle dual-shadow depth, but on white cards with real borders, solid colour buttons and visible focus.
Design keywords
Say these words to ask for this style.
Soft UI Evolution keeps what people loved about neumorphism — pillowy depth, rounded corners, a calm light palette — and fixes what failed: contrast. Cards are white on a cool grey canvas, every surface has a 1px border, controls use solid saturated colour with white text, states are shown with colour and icons rather than shadows alone, and focus rings are always visible. It feels soft and premium yet passes WCAG AA, which makes it a favourite for health, finance and productivity products.
Best for
- Health, telemedicine and patient portals
- Banking and personal-finance apps
- Productivity and booking tools
- Products that must pass WCAG AA but want a soft feel
Avoid for
- Loud youth or gaming brands
- Editorial and long-read magazines
- Brutalist or retro identities
✓ Do
- Put white (#FFFFFF) cards with a 1px #C8D2DF border on a #EDF1F6 canvas
- Keep the soft shadow subtle: white -6px -6px 16px plus a 10–12% navy shadow down-right
- Use solid primary buttons with ≥ 4.5:1 text and a 3px focus ring
- Show status with a coloured dot or icon plus text, not only with depth
✕ Don't
- Don’t make cards the same colour as the page (that is plain neumorphism)
- Don’t remove borders on inputs — keep 1.5px, ≥ 3:1 against the field
- Don’t use heavy or coloured drop shadows
- Don’t rely on inset shadow alone for selected states
Not to be confused with
On mobile
Use white bordered cards on the grey canvas, 48px+ touch targets, a solid bottom tab bar with a tinted pill behind the active icon and a bold label. Keep the soft shadow only on cards and the primary button; lists can rely on borders alone for speed.
Prompt builder
Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.