An isometric style guide for a small team

Tile engines figured out draw order decades ago. Sort by the sum of the column and row, draw from the smallest sum to the largest, and most scenes just work. Tall objects that span several tiles need special care, but the simple rule covers floors, walls and small props, which is most of what a blog illustration needs.

Grids are the backbone of every scene we draw. A single grid unit decides tile width, block height and spacing, which is why our illustrations line up even when three different people made them. When something looks off, the first thing we check is whether one element quietly ignored the grid.

Choosing the three face colours

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.

• Name colours by role, not hue
• Keep one accent colour for small details
• Cool the shadows slightly towards blue
• Test the palette on a dark background

Performance is rarely a problem for one hero cube, but a scene with fifty transformed blocks is a different story. Each block may become its own compositing layer, and every layer costs memory. Open the Layers panel before you ship and count them. If the number surprises you, flatten the static parts into a single SVG.

A quick review before shipping

Before we publish any illustration we run it through a short review. Is the light direction consistent? Does every block sit on the grid? Is the art hidden from screen readers where it is decorative? Does it survive forced colours mode? It takes five minutes and catches most of the problems we used to fix after launch.

Decorative art should be invisible to a screen reader and obvious to everyone else.

Priya Raman

Shadows on the floor sell the idea that a block has weight. A blurred ellipse, skewed to match the grid and placed slightly offset from the light, is usually enough. Real shadows would change with the height of the block, and adding that detail makes towers and stairs look much more convincing.

Common mistakes

Palettes for isometric work start from one hue. Pick it, then shift only the lightness for the three faces, and cool the shadow slightly towards blue. Adding a second hue for accents is fine, but keep it to small elements such as windows or buttons, or the scene starts to look like a patchwork.

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.

Edges and highlights

Isometric drawing keeps every parallel line parallel. There is no horizon and no vanishing point, so a block at the back of the scene is exactly as large as one at the front. That sounds like a limitation, but it is the reason the style works so well for diagrams: you can measure anything, compare anything, and line things up without fighting perspective.

Decorative art should be invisible to a screen reader and obvious to everyone else.

Priya Raman

Workshops taught us more than any tutorial. Watching people fold paper cubes and then rebuild them in CSS showed exactly where the mental model breaks: the order of rotations, the origin of each face, and the moment a block turns inside out. Most of our tutorials now start with the paper version for that reason.

Shadows that sell the weight

Custom properties make isometric CSS far easier to maintain. Instead of hard-coding sizes, we define a single unit on the scene wrapper and multiply it everywhere else. Changing the unit rescales the whole illustration, keeps the proportions intact and means a phone layout needs one media query instead of twenty.

The classic CSS recipe is rotateX(60deg) followed by rotateZ(-45deg). The first rotation tips the square away from you; the second turns it so its corners point up and down. Together they give the familiar diamond. Swap the order and you get something else entirely, because transforms apply from right to left, which catches almost everyone at least once.

Handling motion

The best way to learn isometric CSS is to rebuild something you see every day. A mug, a keyboard key or a stack of books all make good first projects. They are simple enough to finish in an evening, and each one teaches a different trick, from rounded tops to repeating elements.

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.

Start with the floor

Testing on real devices matters for 3D transforms. Emulators get the layout right but not always the rendering, and older phones sometimes draw faces in the wrong order or with visible seams. We keep a drawer of old handsets for exactly this reason, and every tutorial gets a quick check on each of them.