Isometric Design

Isometric Design

"The architect's view. A parallel projection where depth is constant and parallel lines never converge."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Parallel Lines: Unlike true 3D, isometric projection has no vanishing point. Everything is viewed from an exact 30-degree angle.
2. Top-Down, Angled View: The classic "SimCity" perspective.
3. Blocky Architecture: UI elements often look like city blocks or stacked tiles.

Visual DNA

• Colors: Warm Tech or Earth-Grounded Elegance. Isometric designs often look like physical models, so slightly muted, realistic colors work well.
• Typography: Keep text flat to the screen, or map it perfectly to the isometric planes (top, left, right).
• Shadows: Hard, long drop shadows cast at an exact angle (usually -45 or 45 degrees).

Web Implementation

• CSS transforms are perfect for this. Combine rotateX(60deg) and rotateZ(-45deg).
• CSS Example:

.isometric-grid {
  /* The foundation */
  transform-style: preserve-3d;
  transform: rotateX(60deg) rotateZ(-45deg);
}

.iso-block {
  width: 100px;
  height: 100px;
  background-color: var(--secondary-base);
  position: relative;
  transition: transform 0.3s;
}

/* Creating the 3D block with pseudo-elements */
.iso-block::before {
  content: '';
  position: absolute;