Set up design tokens for isometric colours

Browser support for 3D transforms is excellent today, with a few sharp edges. The main one is that certain properties, such as overflow hidden or some filters, quietly flatten a preserve-3d context. If a face disappears or a block turns flat, look for one of those on an ancestor before you start rewriting your transforms.

Keeping everything on the grid

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.

1. Set the unit

   Define --unit: 2rem on the scene so every size derives from one value.

2. Build the columns

   Read each value from a data-value attribute and set the block height with calc().

3. Label the bars

   Keep labels flat and upright below the chart so they stay readable.

4. Describe the chart

   Add a visually hidden table with the same numbers for screen readers.

The code

Typography on a tilted plane is readable only in small doses. A single word on the side of a block looks great; a paragraph set at an angle is exhausting. Keep running text flat and upright, and save the skewed type for labels, numbers and the occasional headline where the shape of the word matters more than speed.

Hover effects on isometric blocks work best when they follow the same rules as the static scene. Lift a block along its vertical axis, deepen its shadow on the floor, and leave the other blocks alone. Moving a block sideways, or changing its angle, breaks the projection and makes the scene feel unstable.

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.

@media (prefers-reduced-motion: no-preference) {	.cube:hover {		transform: translateZ(calc(var(--unit) / 2));		transition: transform 180ms ease-out;	}}

Colours used

Where type fits in

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.

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.

SVG is often the better choice for complex scenes. CSS cubes are fun to build and easy to animate, but a city block made of hundreds of divs is hard to change and heavy to render. We draw the static parts in SVG, keep the interactive blocks in CSS, and layer the two together.