Game artists have a name for the pixel-art version of isometric: two-to-one. Lines climb one pixel for every two across, which gives clean, stair-stepped edges instead of jagged ones. The angle is about 26.6 degrees rather than 30, and almost nobody notices, which is a nice reminder that looking right beats being exact.
Reader submissions: desk setups
3 imagesJPG, 1200 × 1200
Icons are the hardest isometric art to get right because there is so little room. At small sizes one of the three faces usually has to go, so we pick the two that best describe the object. A book keeps its cover and spine; a box keeps its top and front. Deciding early saves a lot of redrawing.
Omar Haddad
I teach an intro CSS class and I am going to use this as the final project.
Tess Walsh
Thanks! A follow-up is already in the drafts.
Nina Ahlberg
Tiny typo in the second code block: the unit is missing on the translate value.
Soren Dahl
Glad it helped. The values are in the colour ratios reference.
Rosa Medina
Love the palette. Could you share the exact lightness values?
Mateo Rossi
The tip about naming faces instead of colours saved our design system a lot of pain.
Alex Moreau
Short and useful. More quick tips like this, please.
Chen Wei
This is the clearest explanation of draw order I have read.