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.
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.
Gus Lindgren
Our designer drew the scene in Figma and I rebuilt it with your approach in an afternoon.
Quinn Adler
Glad it helped. The values are in the colour ratios reference.
Rosa Medina
How would you handle text that needs to wrap on one of the faces?
Nina Ahlberg
Bookmarked. The table alone is worth it.
Kofi Mensah
The tip about naming faces instead of colours saved our design system a lot of pain.
Theo OkaforAuthor
The templates are in the downloads section of the reference post.