Neumorphism — Stylebook

Live preview base style — press Wear

This month

$2,100

Revenue, up 12% from last month.

Customer	Plan	Status	MRR
Northwind	Studio	Active	$1,240
Acme Labs	Team	Trial	$0
Kaldi Coffee	Studio	Active	$860

Use this style 16 tokens

--bg oklch(91% 0.012 255)
--fg oklch(38% 0.03 260)
--muted oklch(55% 0.025 260)
--surface oklch(91% 0.012 255)
--surface-2 oklch(91% 0.012 255)
--border transparent
--accent oklch(58% 0.15 265)
--accent-fg oklch(98% 0.01 265)
--focus oklch(58% 0.15 265)

Token	Value
--font-body	`'Nunito', ui-rounded, system-ui, sans-serif`
--font-display	`'Nunito', ui-rounded, system-ui, sans-serif`
--font-mono	`'Courier New', Courier, monospace`
--radius	`22px`
--radius-sm	`14px`
--shadow	`6px 6px 14px oklch(70% 0.03 260 / 0.56), -6px -6px 14px oklch(100% 0 0 / 0.9)`
--shadow-lg	`14px 14px 30px oklch(70% 0.03 260 / 0.56), -14px -14px 30px oklch(100% 0 0 / 0.9)`

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;800&display=swap');

:root {
	--bg: oklch(91% 0.012 255);
	--fg: oklch(38% 0.03 260);
	--muted: oklch(55% 0.025 260);
	--surface: oklch(91% 0.012 255);
	--surface-2: oklch(91% 0.012 255);
	--border: transparent;
	--accent: oklch(58% 0.15 265);
	--accent-fg: oklch(98% 0.01 265);
	--focus: oklch(58% 0.15 265);
	--font-body: 'Nunito', ui-rounded, system-ui, sans-serif;
	--font-display: 'Nunito', ui-rounded, system-ui, sans-serif;
	--font-mono: 'Courier New', Courier, monospace;
	--radius: 22px;
	--radius-sm: 14px;
	--shadow: 6px 6px 14px oklch(70% 0.03 260 / 0.56), -6px -6px 14px oklch(100% 0 0 / 0.9);
	--shadow-lg: 14px 14px 30px oklch(70% 0.03 260 / 0.56), -14px -14px 30px oklch(100% 0 0 / 0.9);
}

Where it came from

Origin: Dribbble, Alexander Plyuto’s banking app concept

A November 2019 Dribbble banking concept by Alexander Plyuto went viral, and the name “neumorphism” (new + skeuomorphism) caught on in the discussion around it — often credited to a commenter, Jason Kelly, and spread by Michał Malewicz’s articles. It went everywhere on Dribbble, then hit a wall in real products: with no colour or border separating elements, buttons had almost no contrast, which made them fail accessibility checks.

How to spot it

Background and component colour are the same
Paired shadows — light top-left, dark bottom-right
Inset shadows for pressed or input states
Large radii, muted single-hue palettes

Trade-offs

Strengths	Weaknesses
Calm, tactile and cohesive	Very low contrast — hard to see button edges
Pressed/unpressed states feel physical	Fails WCAG for many users
Distinctive in a flat world	Only works on mid-tone backgrounds

In the wild

Smart-home controller concepts
Calculator and music-player Dribbble shots
Some fitness tracker dashboards

Use it when

Small, low-stakes control surfaces where mood matters more than scanability — and add borders for contrast.

Related styles

Skeuomorphism Claymorphism Tactile