Build an isometric timeline

Accessibility for decorative art is mostly about getting out of the way. If an illustration adds no information, hide it from assistive technology with aria-hidden on its wrapper. If it does carry meaning, such as a chart, give it a text alternative that says what the picture shows, not how it was built.

Scaling for small screens

Reading isometric art is a learned skill, and most readers have learned it from games and instruction manuals. That shared vocabulary is what makes the style so friendly. It also means readers notice immediately when something is off, even if they cannot say why, so consistency matters more than detail.

1. Sketch the layout

   Draw the room on triangle-grid paper and number the tiles by column and row.

2. Create the grid

   Use display: grid with equal columns and rows on the tilted floor.

3. Place the furniture

   Position each block with grid-area and sort the markup by depth.

4. Add the walls

   Two extra planes, rotated upright, close the room at the back.

5. Check it on a phone

   Scale the scene with clamp() so it never overflows the viewport.

The code

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.

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.

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.

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.

Three colours carry the whole illusion. The top face is the lightest because it faces the sky, the left face sits in the middle, and the right face is the darkest. Keep those three roles consistent across the page and readers stop seeing flat shapes. Break the rule once, with a dark top on a single block, and the entire scene looks wrong.

Dark mode

[/tab][/tabs]

Colours used

Lessons from the workshop

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.