Edge lines deserve more attention than they usually get. A thin, slightly darker line along the bottom edges grounds each block, and a lighter line on the top edge suggests a highlight. Using currentColor for those lines means a single colour change on the wrapper restyles every outline in the scene.
Shadows that sell the weight
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.
Keeping everything on the grid
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.
Chen Wei
Great write-up. Would love a follow-up on doing the same thing with SVG.
Eli Novak
Agreed, this is the part most tutorials skip.
Nina Ahlberg
This is the clearest explanation of draw order I have read.
Dana Ortiz
Our designer drew the scene in Figma and I rebuilt it with your approach in an afternoon.