A visual language that transforms flat surfaces into spatial experiences through 30-degree angular projection, face-based color stepping, and geometric precision.
Space Grotesk headlines paired with Inter body text create a modern, technical voice that mirrors the clarity of isometric illustration.
Isometric design creates the illusion of three-dimensional depth within a two-dimensional plane using parallel projection at 30-degree angles.
Objects are rendered with flat-filled faces rather than photorealistic textures. Each visible face uses a distinct tonal value -- light top, medium side, dark side -- to simulate directional lighting without actual 3D rendering. This produces a distinctive, approachable dimensionality.
Semibold weight for emphasis (600)
Medium weight for compact UI text and metadata (500 / 0.875rem)
Vibrant primaries with carefully stepped face-shading values create consistent directional lighting across every isometric element.
Each isometric object uses three tonal values: light top, medium front, dark right -- simulating a consistent top-left light source.
Feature cards anchored by isometric icons, with hover states that reveal elevation through shadow and transform.
A 30-degree angular grid that ensures every element aligns with mathematical precision across your entire layout.
Learn morePre-built isometric blocks, devices, and icons that snap together to create complex dimensional scenes.
Explore libraryAutomatic shadow and face-shading calculations that maintain consistent lighting direction across all elements.
View docsEstablish the 30-degree isometric grid as your foundational coordinate system for all spatial elements.
Construct objects from simple extruded primitives -- cubes, cylinders, prisms -- with flat-filled faces.
Color-step each face with distinct tonal values to simulate a consistent top-left light source.
A 3x3 grid transformed into isometric space. Hover tiles to see elevation changes that communicate hierarchy and interactivity.
Subtle animations bring isometric scenes to life -- floating layers, rotating geometry, shadow elevation, and stepped platforms.
Stacked planes at different Z-depths create progressive disclosure through vertical layering.
A 3D CSS cube rotating on the isometric axis, showing all six color-mapped faces.
Progressive shadow depth communicates hierarchy -- hover any block to see maximum elevation.
Stepped platforms demonstrating face-based color stepping with progressively shrinking layers.
Start building spatial interfaces with isometric projection. Clean geometry, vivid color stepping, and controlled depth -- no 3D software required.