Skip to content
Grid Systems

Isometric grid sizes reference

Tile widths and heights that line up at common breakpoints.

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.

At a glance

Isometric angles
Projection Angle Line ratio
True isometric 30° 1 : 1.732
Pixel art 26.57° 1 : 2
Dimetric 15° / 45° varies

Testing on real devices

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.

Design tokens keep the whole team in step. We name colours by their role, such as face-top, face-left and face-right, rather than by hue. When we switched the site to a violet accent for a campaign, only the token values changed. Every illustration, button and chart followed without anyone opening a single component.

Download

cubefold-grid-templates.zipIsometric grid backgrounds in CSS and SVG. 610 B
Download cubefold-grid-templates.zip

Questions

Can I use this without JavaScript?

Yes. Every scene in our tutorials is pure HTML and CSS; JavaScript only adds optional interactions.

Does it work on phones?

It does, as long as the scene is scaled with clamp() and never wider than the viewport.

Can I use the code in client work?

Yes. All tutorial code is MIT licensed, so you can use it anywhere with attribution in the source.

Share

Written by

Priya Raman

Priya covers accessibility and tooling. She reviews every illustration on the site with a screen reader before it ships.

All 18 posts by Priya Raman

8 comments

  1. Hana Sato

    Our designer drew the scene in Figma and I rebuilt it with your approach in an afternoon.

    Reply to Hana Sato
    1. Omar Haddad

      Thanks! A follow-up is already in the drafts.

      Reply to Omar Haddad
  2. Farah Aziz

    Love the palette. Could you share the exact lightness values?

    Reply to Farah Aziz
  3. Tess Walsh

    Is there a way to do the shadow without a pseudo-element? Our CMS strips empty spans.

    Reply to Tess Walsh
  4. Lena Vogel

    We used the grid background on our docs site and it looks great with a dark theme too.

    Reply to Lena Vogel
    1. Kofi Mensah

      Fixed now, thanks for spotting it.

      Reply to Kofi Mensah
  5. Nina Ahlberg

    I tried this on an old iPad and one of the faces flickers on hover. Any idea why?

    Reply to Nina Ahlberg
  6. Eli Novak

    Has anyone tried this with container queries? Feels like a good fit.

    Reply to Eli Novak

Leave a comment

Your email address won’t be published. Required fields are marked.