Colour contrast still applies to illustrations that carry meaning. A bar chart drawn as blocks needs enough contrast between the bars and the floor, and labels on the faces need the same contrast as body text. Decorative scenes have more freedom, but we still avoid pale blocks on a pale background.
At a glance
| Projection | Angle | Line ratio |
|---|---|---|
| True isometric | 30° | 1 : 1.732 |
| Pixel art | 26.57° | 1 : 2 |
| Dimetric | 15° / 45° | varies |
Testing on real devices
Readers often ask whether isometric art is still a trend or already a cliché. Our answer is that the style is a tool, like a chart type. It is excellent for explaining structure and relationships, and it is a poor choice for emotion or narrative. Used for the right job, it never really goes out of date.
Design tokens keep the whole team in step. We name colours by their role, such as face-top, face-left and face-right, rather than by hue. When we switched the site to a violet accent for a campaign, only the token values changed. Every illustration, button and chart followed without anyone opening a single component.
Download
Questions
Can I use this without JavaScript?
Yes. Every scene in our tutorials is pure HTML and CSS; JavaScript only adds optional interactions.
Does it work on phones?
It does, as long as the scene is scaled with clamp() and never wider than the viewport.
Can I use the code in client work?
Yes. All tutorial code is MIT licensed, so you can use it anywhere with attribution in the source.
Hana Sato
Our designer drew the scene in Figma and I rebuilt it with your approach in an afternoon.
Omar Haddad
Thanks! A follow-up is already in the drafts.
Farah Aziz
Love the palette. Could you share the exact lightness values?
Tess Walsh
Is there a way to do the shadow without a pseudo-element? Our CMS strips empty spans.
Lena Vogel
We used the grid background on our docs site and it looks great with a dark theme too.
Kofi Mensah
Fixed now, thanks for spotting it.
Nina Ahlberg
I tried this on an old iPad and one of the faces flickers on hover. Any idea why?
Eli Novak
Has anyone tried this with container queries? Feels like a good fit.