Material & depth · 2019–present
Neo-Skeuomorphism
Flat design with subtle depth added back: soft shadows, micro-gradients, and tactile button states — without heavy textures or physical metaphors.
Live preview base style — press Wear
$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(94% 0.007 76) - --fg
oklch(18% 0.014 240) - --muted
oklch(50% 0.016 240) - --surface
oklch(100% 0 0) - --surface-2
oklch(97% 0.005 240) - --border
oklch(86% 0.01 240) - --accent
oklch(50% 0.17 256) - --accent-fg
oklch(99% 0 0) - --focus
oklch(50% 0.17 256)
| Token | Value |
|---|---|
| --font-body | 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif |
| --font-display | 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif |
| --font-mono | ui-monospace, 'SF Mono', 'Fira Code', monospace |
| --radius | 12px |
| --radius-sm | 8px |
| --shadow | 0 1px 0 oklch(100% 0 0 / 0.9) inset, 0 1px 3px oklch(20% 0.01 240 / 0.12), 0 0 0 1px oklch(82% 0.01 240) |
| --shadow-lg | 0 8px 28px oklch(18% 0.015 240 / 0.15), 0 2px 4px oklch(18% 0.015 240 / 0.06) |
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root {
--bg: oklch(94% 0.007 76);
--fg: oklch(18% 0.014 240);
--muted: oklch(50% 0.016 240);
--surface: oklch(100% 0 0);
--surface-2: oklch(97% 0.005 240);
--border: oklch(86% 0.01 240);
--accent: oklch(50% 0.17 256);
--accent-fg: oklch(99% 0 0);
--focus: oklch(50% 0.17 256);
--font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, 'SF Mono', 'Fira Code', monospace;
--radius: 12px;
--radius-sm: 8px;
--shadow: 0 1px 0 oklch(100% 0 0 / 0.9) inset, 0 1px 3px oklch(20% 0.01 240 / 0.12), 0 0 0 1px oklch(82% 0.01 240);
--shadow-lg: 0 8px 28px oklch(18% 0.015 240 / 0.15), 0 2px 4px oklch(18% 0.015 240 / 0.06);
}Where it came from
Origin: Reaction to flat-design fatigue; a restrained return to depth cues
After a decade of flat design, designers noticed affordances suffered: buttons no longer looked pressable, inputs blurred into backgrounds. Neo-skeuomorphism emerged as a quiet correction — adding just enough depth to distinguish surfaces and signal interactivity, without the leather and linen of iOS 6. Neumorphism pushed a similar idea in 2019 but at the cost of contrast; neo-skeuomorphism differs by keeping surfaces their own colour and using conventional shadow placement.
How to spot it
- Soft shadows that imply elevation, not texture
- Micro-gradients on buttons and surfaces — light top, slightly darker bottom
- Clear visual distinction between background and surface
- Visible press feedback: shadows flatten on :active
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Restores affordances that flat design removed | Easy to over-apply and become visually noisy |
| More scalable than classic skeuomorphism — no textures to maintain | The line between neo-skeuomorphism and neumorphism is contested |
| Works at high density without becoming heavy | Requires careful shadow contrast management for accessibility |
In the wild
- Apple visionOS control panel surfaces
- Payment and checkout UIs with softly elevated cards
- Modern SaaS dashboards with subtle card depth
Use it when
When flat feels lifeless — add just enough depth to restore interactivity signals without adding texture.