Expressive & trend · 2010s – present
Isometric 3D
A fixed 30-degree axonometric projection that gives flat elements a consistent 3D depth — no perspective distortion, just clean geometric volume.
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.01 232) - --fg
oklch(18% 0.03 232) - --muted
oklch(48% 0.04 228) - --surface
oklch(100% 0 0) - --surface-2
oklch(93% 0.02 228) - --border
oklch(82% 0.03 228) - --accent
oklch(50% 0.22 250) - --accent-fg
oklch(99% 0 0) - --focus
oklch(55% 0.22 250)
| Token | Value |
|---|---|
| --font-body | 'DM Sans', system-ui, sans-serif |
| --font-display | 'DM Sans', system-ui, sans-serif |
| --font-mono | 'DM Mono', ui-monospace, monospace |
| --radius | 0px |
| --radius-sm | 0px |
| --shadow | 4px 4px 0 oklch(72% 0.06 228), 0 1px 2px oklch(0% 0 0 / 0.08) |
| --shadow-lg | 6px 6px 0 oklch(65% 0.08 228), 0 4px 16px oklch(0% 0 0 / 0.12) |
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;600;700&display=swap');
:root {
--bg: oklch(97% 0.01 232);
--fg: oklch(18% 0.03 232);
--muted: oklch(48% 0.04 228);
--surface: oklch(100% 0 0);
--surface-2: oklch(93% 0.02 228);
--border: oklch(82% 0.03 228);
--accent: oklch(50% 0.22 250);
--accent-fg: oklch(99% 0 0);
--focus: oklch(55% 0.22 250);
--font-body: 'DM Sans', system-ui, sans-serif;
--font-display: 'DM Sans', system-ui, sans-serif;
--font-mono: 'DM Mono', ui-monospace, monospace;
--radius: 0px;
--radius-sm: 0px;
--shadow: 4px 4px 0 oklch(72% 0.06 228), 0 1px 2px oklch(0% 0 0 / 0.08);
--shadow-lg: 6px 6px 0 oklch(65% 0.08 228), 0 4px 16px oklch(0% 0 0 / 0.12);
}Where it came from
Origin: Mobile game UI design, infographic illustration culture
Isometric projection has been used in technical illustration and game design for decades — it gives depth without the complexity of true perspective. Mobile games like Monument Valley brought it to mainstream attention. Dribbble illustrations and infographic culture picked it up for tech product explanations, and it became a signature of the 2010s SaaS illustration style.
How to spot it
- 30-degree axonometric projection — equal X, Y, Z axes
- No vanishing point; parallel lines stay parallel
- Flat-colour faces with consistent light direction
- Grid-derived layout of stacked or floating elements
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Communicates structure and depth without complexity | Constrains layout to a fixed grid angle |
| Clean and modern illustration style | Hard to execute well with CSS alone |
| Excellent for product screenshots and infographics | Overused in SaaS marketing illustration |
In the wild
- Monument Valley game design
- Late-2010s tech product illustration
- Numerous SaaS landing page hero illustrations
Use it when
Infographic dashboards, product explanations, or any UI that benefits from visible structure.