Isometric
Axonometric projection — three dimensions, no perspective.
30° × 30°
120°
Perfect Angles
Every axis separated by exactly 120 degrees. No vanishing points, no distortion.
2:1
Pixel Ratio
Classic isometric grid uses 2:1 pixel stepping. Moves right 2, up 1 — the golden rule.
CSS
3D Transforms
Modern CSS can render isometric scenes with rotateX(54deg) rotateZ(-45deg).
Games
Gaming Roots
From Q*bert to SimCity, isometric was the go-to for pseudo-3D in the 80s and 90s.
Mood: Technical & clean
Era: 1980s–present
Colors: Deep navy, purple, accent red
Font: Space Grotesk