The -morphism family · 2021–2023
Claymorphism
Puffy, inflated shapes that look like soft clay: thick rounded corners, an outer shadow plus inner highlights, and pastel colours.
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.03 298) - --fg
oklch(28% 0.06 288) - --muted
oklch(46% 0.05 288) - --surface
oklch(99% 0.01 300) - --surface-2
oklch(92% 0.045 298) - --border
transparent - --accent
oklch(64% 0.18 298) - --accent-fg
oklch(99% 0 0) - --focus
oklch(55% 0.2 298)
| Token | Value |
|---|---|
| --font-body | 'Fredoka', ui-rounded, system-ui, sans-serif |
| --font-display | 'Fredoka', ui-rounded, system-ui, sans-serif |
| --font-mono | ui-monospace, monospace |
| --radius | 30px |
| --radius-sm | 20px |
| --shadow | 12px 14px 28px oklch(50% 0.1 298 / 0.22), inset -8px -8px 16px oklch(0% 0 0 / 0.08), inset 8px 8px 16px oklch(100% 0 0 / 0.72) |
| --shadow-lg | 20px 24px 50px oklch(40% 0.1 298 / 0.28), inset -8px -8px 16px oklch(0% 0 0 / 0.08), inset 8px 8px 16px oklch(100% 0 0 / 0.72) |
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');
:root {
--bg: oklch(94% 0.03 298);
--fg: oklch(28% 0.06 288);
--muted: oklch(46% 0.05 288);
--surface: oklch(99% 0.01 300);
--surface-2: oklch(92% 0.045 298);
--border: transparent;
--accent: oklch(64% 0.18 298);
--accent-fg: oklch(99% 0 0);
--focus: oklch(55% 0.2 298);
--font-body: 'Fredoka', ui-rounded, system-ui, sans-serif;
--font-display: 'Fredoka', ui-rounded, system-ui, sans-serif;
--font-mono: ui-monospace, monospace;
--radius: 30px;
--radius-sm: 20px;
--shadow: 12px 14px 28px oklch(50% 0.1 298 / 0.22), inset -8px -8px 16px oklch(0% 0 0 / 0.08), inset 8px 8px 16px oklch(100% 0 0 / 0.72);
--shadow-lg: 20px 24px 50px oklch(40% 0.1 298 / 0.28), inset -8px -8px 16px oklch(0% 0 0 / 0.08), inset 8px 8px 16px oklch(100% 0 0 / 0.72);
}Where it came from
Origin: Dribbble, Michał Malewicz (Hype4)
Named by designer Michał Malewicz of Hype4 in late 2021 as a friendlier successor to neumorphism. Unlike neumorphism, elements float above the background in their own colour, which fixes most of the contrast problems. It overlaps heavily with the 3D clay illustrations popular in 2021.
How to spot it
- Large radii (24px and up)
- Double inner shadow for a puffy look plus a soft outer shadow
- Pastel, saturated fills
- Playful 3D clay illustrations
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Friendly and approachable | Can feel childish for serious tools |
| Better contrast than neumorphism | Wastes space at high density |
| Great for kids and casual products | Shadow stacks are verbose |
In the wild
- Kids learning apps
- Fintech onboarding screens
- Web3 landing pages (2022)
Use it when
Consumer, education or playful brands where warmth beats density.