Neomorphism: a design system that feels carved out of one surface

What neomorphism actually is

Neomorphism is the style where controls look pressed out of the page itself. A raised button has a light shadow on one side and a dark shadow on the other; an inset field is the same shape pushed the opposite way. Everything shares one background material, so there are few hard borders and lots of gentle, rounded volume.

Recognize it by four tells: low contrast everywhere, paired light-and-dark shadows, generously rounded controls, and a tactile depth that makes you want to poke the screen. It reads premium and quiet — popular for finance dashboards, wallets, and anywhere a calm, physical surface feels trustworthy. The weakness is the same thing that makes it pretty: contrast is low by design, so text and interactive states need deliberate protection.

The style has had two lives. It went mainstream as the 'soft UI' trend of the late 2010s, spread far faster than it was understood, and picked up a bad reputation because most imitations shaved the shadows off their accessibility. The versions that survive treat neomorphism as a skin on a normal, fully readable interface, not as a replacement for borders and states. Build it that way and it still looks expensive years later.

How to recognize it

Four tells separate genuine neomorphism from a generic shadow-heavy interface:

• Low contrast — surfaces, controls and text stay harmoniously muted; almost no pure black or pure white appears
• Paired shadows — every raised control carries both a light highlight and a dark shadow from the same light source
• Rounded controls — corners are generous, because sharp edges would break the soft-material illusion
• Tactile depth — controls read as inset or raised, so the whole page behaves like a soft keypad

The neomorphism preset

The style demands a muted, single-hue palette — the whole surface is one material, and loud multi-color systems break the illusion. The preset locks a desaturated slate blue, stays monochromatic so every hue matches, and pulls saturation down further with the refinement dial. Radius goes round for that soft extruded feel.

That muted monochrome does one more useful thing: it makes the accent genuinely loud. When everything sits in one quiet hue family, a single saturated accent can light up exactly one or two things per screen and get real attention. Keep the accent's coverage per screen small — it's the pressure valve for the whole style.

How the color roles land in this style

One material means the semantic tokens collapse into a friendly ladder. Background and surfaces carry the extruding; primary owns the one or two raised actions you actually want pressed; secondary marks inset fields and quiet controls; and the accent is the single voice allowed to be loud. Everything sits within a few lightness steps so the illusion holds:

:root {
  --background: #eef0f3;
  --surface: #f7f8fa;
  --primary: #718096;
  --secondary: #8f9baa;
  --accent: #5b7fd4;
  --foreground: #2f3640;
}

Adapt it to a brand

Swap the slate seed for any hue you like — the monochromatic strategy and round radius do the rest of the styling. What you must not do is let the muted surface drag text below contrast. Run every foreground/background pair through the checker, and if a pair fails, lift lightness on the OKLCH axis rather than pumping saturation back in, which quietly undoes the whole effect.

When a pair fails in this style, the instinct is to add more shadow behind the text — don't. Lift the text token's lightness and let the raised surface carry the depth. Neomorphism also leans on several near-identical tones, so a greyscale pass is worth the ten seconds: if surfaces vanish into each other once color is removed, the material reads as mud, not as a premium surface.