Illustration · 1920s–present (digital revival 2020–present)
Claymation
The aesthetic of stop-motion clay animation — imperfect, handmade, bumpy shapes with visible texture and the physicality of real material.
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.032 70) - --fg
oklch(18% 0.04 48) - --muted
oklch(50% 0.04 58) - --surface
oklch(98.5% 0.018 74) - --surface-2
oklch(91% 0.036 66) - --border
oklch(18% 0.04 48) - --accent
oklch(60% 0.22 32) - --accent-fg
oklch(99% 0 0) - --focus
oklch(60% 0.22 32)
| Token | Value |
|---|---|
| --font-body | 'Baloo 2', system-ui, sans-serif |
| --font-display | 'Baloo 2', system-ui, sans-serif |
| --font-mono | ui-monospace, monospace |
| --radius | 28px |
| --radius-sm | 18px |
| --shadow | 0 5px 0 oklch(18% 0.04 48 / 0.75), 0 8px 20px -4px oklch(18% 0.04 48 / 0.18) |
| --shadow-lg | 0 8px 0 oklch(18% 0.04 48 / 0.7), 0 16px 40px -6px oklch(18% 0.04 48 / 0.22) |
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap');
:root {
--bg: oklch(94% 0.032 70);
--fg: oklch(18% 0.04 48);
--muted: oklch(50% 0.04 58);
--surface: oklch(98.5% 0.018 74);
--surface-2: oklch(91% 0.036 66);
--border: oklch(18% 0.04 48);
--accent: oklch(60% 0.22 32);
--accent-fg: oklch(99% 0 0);
--focus: oklch(60% 0.22 32);
--font-body: 'Baloo 2', system-ui, sans-serif;
--font-display: 'Baloo 2', system-ui, sans-serif;
--font-mono: ui-monospace, monospace;
--radius: 28px;
--radius-sm: 18px;
--shadow: 0 5px 0 oklch(18% 0.04 48 / 0.75), 0 8px 20px -4px oklch(18% 0.04 48 / 0.18);
--shadow-lg: 0 8px 0 oklch(18% 0.04 48 / 0.7), 0 16px 40px -6px oklch(18% 0.04 48 / 0.22);
}Where it came from
Origin: Stop-motion clay animation; Aardman Animations; Will Vinton Productions
Clay animation has roots in early cinema and was developed into an art form by studios including Aardman Animations (Wallace and Gromit) and Will Vinton Productions. The digital revival applies the visual language — chubby rounded forms, fingerprint-texture surfaces, deliberately imperfect edges — to web and UI illustration, often combined with 3D rendering tools that simulate clay material.
How to spot it
- Thick, rounded, irregular forms with slight imperfections
- Visible surface texture suggesting malleable material
- Warm, saturated colour palette with strong highlights
- Playful scale relationships — large hands, small feet
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Warm and handmade — instantly approachable | Expensive to produce well — requires 3D skills or illustration expertise |
| Strong personality that reads uniquely against flat styles | Doesn't translate to CSS without images |
| Works well for characters and mascots | Playful tone is wrong for serious or professional contexts |
In the wild
- Aardman Animations — Wallace and Gromit
- App illustration systems for children's education products
- Brand mascots for consumer fintech and gaming apps
Use it when
The product is consumer-facing, playful, and benefits from a handmade, warm personality.