Material & depth · 2020s
Toy Plastic
Bright, saturated primary colours, thick visible outlines, and the cheerful weight of injection-moulded plastic — maximally joyful, zero neutral.
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(97% 0.018 85) - --fg
oklch(14% 0.02 60) - --muted
oklch(44% 0.03 55) - --surface
oklch(99% 0.008 80) - --surface-2
oklch(95% 0.02 82) - --border
oklch(25% 0.03 60) - --accent
oklch(56% 0.24 26) - --accent-fg
oklch(99% 0 0) - --focus
oklch(56% 0.24 26)
| Token | Value |
|---|---|
| --font-body | 'Nunito', ui-rounded, system-ui, sans-serif |
| --font-display | 'Nunito', ui-rounded, system-ui, sans-serif |
| --font-mono | ui-monospace, monospace |
| --radius | 18px |
| --radius-sm | 12px |
| --shadow | 4px 4px 0 oklch(14% 0.02 60) |
| --shadow-lg | 6px 6px 0 oklch(14% 0.02 60) |
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&display=swap');
:root {
--bg: oklch(97% 0.018 85);
--fg: oklch(14% 0.02 60);
--muted: oklch(44% 0.03 55);
--surface: oklch(99% 0.008 80);
--surface-2: oklch(95% 0.02 82);
--border: oklch(25% 0.03 60);
--accent: oklch(56% 0.24 26);
--accent-fg: oklch(99% 0 0);
--focus: oklch(56% 0.24 26);
--font-body: 'Nunito', ui-rounded, system-ui, sans-serif;
--font-display: 'Nunito', ui-rounded, system-ui, sans-serif;
--font-mono: ui-monospace, monospace;
--radius: 18px;
--radius-sm: 12px;
--shadow: 4px 4px 0 oklch(14% 0.02 60);
--shadow-lg: 6px 6px 0 oklch(14% 0.02 60);
}Where it came from
Origin: Reaction to neutral enterprise palettes; LEGO and toy-design references
As enterprise SaaS design became a sea of grey and off-white, some designers reached for the opposite end of the palette. LEGO primaries, Playskool bright red, and chunky rounded forms became references. The look converges with claymorphism in some treatments but goes brighter and more graphic — bold outlines, flat fills — where claymorphism stays soft and gradient.
How to spot it
- Pure or near-pure primary palette: red, yellow, blue, green with thick outlines
- Thick visible border on every element — like the wall of a moulded plastic part
- Oversized corner radii suggesting injection-moulded ABS plastic
- High-contrast, heavy-weight type — body text as bold as a toy instruction sheet
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Immediately joyful and visually distinct from every SaaS competitor | Narrow emotional register — hostile to serious content |
| Very high visual energy — commands attention | Hard to scale into complex UI without becoming chaotic |
| Right for children, gaming, or any brand built on unapologetic fun | Reads immediately as childish in professional contexts |
In the wild
- Children's learning app launchers
- Game launcher and casual game UIs
- Direct-to-consumer toy brand sites
Use it when
Products explicitly for children or play — or any brand where unapologetic fun is the whole value proposition.