I · 9 / 26

I — Isometric

Three dimensions without a vanishing point.

The style

Every axis, the same length.

Isometric means equal measure. The three axes of a cube are drawn 120° apart, so each is shortened by the same amount and one scale reads lengths along all of them. Nothing shrinks with distance, and no line runs to a vanishing point.

The Cambridge professor William Farish set the method out in 1822, as a way to draw machines so they could be built and taught from. It became a standard view in technical drawing. Arcade games took it up in the early 1980s, Sega’s Zaxxon among the first, and pixel artists settled on a two-to-one slope that is close to true and clean on a pixel grid.

On screen it draws systems seen whole and from above: servers, networks, cities, block worlds. Because sizes stay true, a map can be measured and a block sits exactly on the grid.

In use

The system, seen whole.

Atlas, a cloud console on the desktop, mapping production in one region: nine services as blocks, packets on the pipes between them, a light on every roof. The cache is struggling. Open it, and fix it.

One projection, end to endBlocks, pipes, lights and the packets on them all run on the same two 30° axes. Nothing is drawn in perspective, so sizes compare across the map.
Height is capacityEach block rises with the instances it runs, so the busy parts of the system stand up. Status sits on top, where it shows from every side.
Flat where you readLabels and the details panel stay on the page plane. Every block is a button in the tab order; Enter or Space opens it.

Atlaskestrel / production / eu-west-1

Healthy: 8 / 9
Requests: 2,410 /s
p95 latency: 184 ms
Errors: 0.08%

Redis · 2 shards

Cache

Degraded

Memory at 94% and evictions climbing. Hit rate is down to 61%, so reads fall through to the database.

Holds sessions and hot reads in memory.

CPU: 71%
Memory: 94%
p95: 14 ms
Requests: 3,920 /s
Instances: 2
Zone: eu-west-1a

Events

14:01:53Cache memory over 90%. Evictions rising.
14:01:36Replica lag back under 50 ms.
14:01:19Deploy 418 finished on API, 4 of 4 pods.

The kit

Every part, on the wall.

The parts Atlas is built from, in isometric terms: each one laid on a 30° wall, given depth along the third axis, and lit from the top left. Rows of states hold still for comparison; everything else works.

Button

Depth is 10px along the 30° axis; hover raises it to 13.Pressed, the slab sinks back into the wall to 3px.Disabled is flush with the wall: no depth, nothing to push.

Text field

Service nameLowercase, used in the URL.

A well is cut into the wall: its left side in shade, its floor lit.

Select

Region

Open, the options are a stack of thin slabs; the picked one stands proud.

Switch, checkbox, radio

A box is a socket; checked, a cube sits in it. A choice of one is a puck.

Slider

Replicas3

Each step is a cube: the value stands up as a stack you can count.

Progress

Migrating 2.1 TB0%

The fill is a slab of its own, growing along the wall’s x axis.

Segments and tabs

9 blocks, 8 pipes, one region.

The open tab stands at full depth; the others sink to 4px. Arrow keys move.

List rows

Rows stack like units in a rack. The picked one slides forward.

Card and loading

Zoneeu-west-1c7 of 10 racks in use

A card is the deepest slab, 16px: it holds other parts on its face.Small things on it, like the racks, are cubes on the same axes.

Toast

It slides in along the x axis, never straight up the screen.

Modal

The dialog stands 16px off the wall. What’s behind goes flush and pale.

Steps

Done: Plan
Build
Test
Ship

Steps are stairs: each one a course higher. Ahead of you, they’re flush.

Badges and avatars

Healthy
Degraded
Offline
New
12 alerts

Status is a thin tag; a count is a cube, as deep as it is wide.

Signature

Stack it, turn it.

An 8 × 8 grid and four colours of block. Click a square to stack on it, or tab in and build from the keyboard. Turn the view a quarter at a time to see the back; undo takes back one move, even a clear.

Cursor E5 · 0 high16 blocks · 9 squares · tallest 4 · view 0°

Block

Click to

View

Arrows: move along the grid
Enter: stack a block
Delete: take one off
R: turn right; Shift+R, left
Z: undo
1–4: pick a colour
Shift-click: the other tool

Tokens

The system, in numbers.

Ten colours with their contrast, the three faces of every solid, the angles, the units and depths, two typefaces. Copy them as custom properties, with the wall and the slab.

Colours

--paper #eef1f6Drafting paper: the page
--sheet #ffffffFlat panels and the top face
--ink #131a2bType and edges, 15.4:1
--ink-2 #4a5469Quiet type, 6.7:1
--blue #2f5fd0Accent and blue left faces, 5.0:1; white on it 5.7:1
--blue-deep #1d3f99Blue right faces; white 9.2:1
--blue-top #8fabf2Blue top faces, never type
--ok-ink #157047Healthy, as type, 5.5:1
--warn-ink #8a5a00Degraded, as type, 5.2:1
--down-ink #b3261eDown, as type, 5.6:1

Faces, lit from the top left

Top--top #ffffff#8fabf2
Left--left #dfe5ef#2f5fd0
Right--right #b3bfd3#1d3f99

Angles

30°Each ground axis off the horizontal
120°Between any two axes, on screen
90°Verticals stay vertical
26.57°Pixel art: two across, one up

Type

Restart the cacheSpace Grotesk · display and text, 400 to 700
Restart the cacheSpace Grotesk · text
Restart the cacheIBM Plex Mono · labels, numbers, coordinates

Units

Map unit · 34pxOne grid square in the console
Builder unit · 34pxOne block in the builder
Kit step · 4pxDepths and gaps in the kit

Depths

Flush · Disabled0px
Pressed · Held down3px
Rest · Buttons, tabs10px
Raised · Hover, selected13px

Spacing

:root {
  /* Paper and ink */
  --paper: #eef1f6;
  --sheet: #ffffff;
  --ink: #131a2b;
  --ink-2: #4a5469;
  --blue: #2f5fd0;
  --blue-deep: #1d3f99;
  --blue-top: #8fabf2;

  /* Three faces, one light from the top left */
  --top: #ffffff;
  --left: #dfe5ef;
  --right: #b3bfd3;

  /* Status, as type */
  --ok-ink: #157047;
  --warn-ink: #8a5a00;
  --down-ink: #b3261e;

  /* Projection */
  --iso-axis: 30deg;
  --iso-cos: 0.866;
  --unit: 40px;
  --depth: 10px;

  /* Type */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* A flat control laid on the left wall: x runs down at 30°, y stays vertical. */
.iso-wall {
  transform-origin: 0 0;
  transform: matrix(var(--iso-cos), 0.5, 0, 1, 0, 0);
}

/* A slab on that wall. On the wall, depth runs at 45°: once sheared, 30°. */
.iso-slab {
  --k: 1;
  position: relative;
  background: var(--left);
  transform: translate(
    calc((1 - var(--k)) * var(--depth)),
    calc((var(--k) - 1) * var(--depth))
  );
}
.iso-slab::before,
.iso-slab::after {
  content: '';
  position: absolute;
}
.iso-slab::before {
  /* top face */
  left: var(--depth);
  top: calc(var(--depth) * -1);
  width: 100%;
  height: var(--depth);
  background: var(--top);
  transform-origin: 0 0;
  transform: skewX(-45deg) scaleY(var(--k));
}
.iso-slab::after {
  /* right face */
  left: 100%;
  top: calc(var(--depth) * -1);
  width: var(--depth);
  height: 100%;
  background: var(--right);
  transform-origin: 100% 0;
  transform: skewY(-45deg) scaleX(var(--k));
}
.iso-slab:hover { --k: 1.3; }
.iso-slab:active { --k: 0.3; }
.iso-slab:disabled { --k: 0; }

Do

Pick one projection and keep every edge on it: two axes at 30°, verticals at 90°.
Light from one side. The top is lightest, the left in between, the right darkest, on every solid.
Build on the grid. Sizes in whole units or simple halves, so blocks meet edge to edge and stack.
Let depth mean something, height for load and stacking for layers, and keep long text and numbers flat.

Don’t

Mixed projections
An isometric block beside one in perspective, and a flat front with sides at 45°. The eye can’t put them in the same space.
Light from two sides
One block lit from the left, the next from the right. Shading is how a face says top, left or right; flip it and tops read as walls.
Depth where flat reads better
A bar chart stood up in 3D. Bars hide each other, no height can be read against the axis, and the labels tip over.

In the wild

Where the style shows up outside this page.

Q*bert
Gottlieb · 1982A pyramid of cubes drawn without a vanishing point, hopped one face at a time.
SimCity 2000
Maxis · 1993A whole city on a diamond grid, every tile at the same angle.
Habbo Hotel
Sulake · 2000Isometric rooms in pixel art, furniture snapped to the tile grid.
Monument Valley
ustwo games · 2014Isometry used as the puzzle: paths meet where the projection says they do.