Foundations

Geometry

What happens to all of this when the window changes size is the next page: Width. Every number below is in rem since stage 10, which at a 16px root is the same number and for a reader who set a larger font is the whole difference.

Space, radius, line and the measures that stop growing. None of it gets a second token level: a radius and a height have nothing a theme or a rebrand could override, so a component reads them straight from the primitive. That is the one place this system deliberately does less than the shape of a design system suggests.

The space scale, shown as space

One scale, seven steps, 268 uses. --space-2 and --space-3 carry the density between them, which is what six hours a day at a console looks like as a number.

--space-1 · 4px
28 uses --space-2 · 8px
83 uses --space-3 · 12px
72 uses --space-4 · 16px
45 uses --space-5 · 24px
23 uses --space-6 · 32px
8 uses --space-7 · 48px
9 uses

Radius, and there is one

Measured on the brandbook plate: no console element carries a radius. A radius of zero is a decision and not an omission, and it is what makes the square terminals of the icon set consistent with everything they sit in.

--radius-ui
0 --radius-object
5px

--radius-object is measured on the plate for physical applications only, and it is unused in the interface by definition, because the product does not render a printed object. It has zero uses across the product and it is on the list step 9 rules on.

Three lines, and which one a component takes is a WCAG decision

Not a taste. The three differ by what they are allowed to identify, and getting it wrong is the difference between a divider that reads as a control boundary and a control that cannot be found.

--rule-hair

1.18:1 in dark, 1.20 in light. It separates and it never carries meaning, so it is below every floor deliberately. The line between rows, 30 sites.

--rule-edge

2.997:1 in dark, 2.88 in light. A panel edge, 36 sites. Below 3:1 and allowed: 1.4.11 covers what identifies a control, not a divider.

--rule-control

3.24:1 in dark, 3.70 in light. The boundary of a control: chip, button, kbd. The only one of the three that clears the floor, and the reason it exists at all.

The fourth width in the product is 2px, and it has no token. It draws the current nav item's underline, the alert toast, the framed record and the printed page. Whether that is a fourth line token or a component decision is open, and it is one of the eight tracking and line values this stage carried without collapsing.

Round 1 located it rather than closing it. Two of the four now live in a component file and say so in a comment: navitem.css writes the underline and link.css writes the underline offset. The reason it is still open is that --focus-ring already bakes 2px into a composite, so a token would have to explain why the ring and the underline are the same number and the panel edge is not. That is a real question about what 2px MEANS in this product, and step 9 answers it with the count in front of it.

The frame of a screen

The zones of node 0.1, drawn to their own tokens. This is not a picture of the shell: each band below is its real height.

Z1, the top bar--zone-top · 56px
Z2, the annunciator--zone-strip · 26px
Z4 and Z5, the splitthe pane is --pane-w · 380px, 320px below 1560

The queue row is a grid of seven tracks and it is the one structural value that is not a single number: --row-tracks is 90px 120px minmax(104px,1fr) minmax(120px,1.2fr) 72px 100px 40px. The log keeps those seven zones and changes their widths; the shift brief has four zones and is a different component, which is why two further track sets exist and are not values from nowhere.

What stops growing

Five measures, and each of them answers a different question about when a thing has become wide enough to stop being read.

--width-sheet · 760px · a case standing alone with no list beside it --width-frame · 820px · the framed record --width-dialog-wide · 720px · the keyboard map, a reference table rather than a decision --width-dialog · 520px · the dialog --width-toast · 400px · the notice stack, never as wide as the pane --measure · 66ch · a single column of prose. Zero uses

--width-dialog is the one value in this system with no origin. Its four neighbours all carry one, in the file or in DESIGN.md, and it carries none in either. Found by the second instrument at step 1 and carried unchanged rather than quietly justified. Open at the step 4 gate.

--zone-notice-clear at 180px is the sixth, and it is the only one that is not a maximum: it is what the page ends above at 360 so that one notice hides nothing behind it.

The artefact that leaves the building

Print is a real surface of this product, settled at the close of 03b, and it lives in base.css rather than being split across five component files. Print is a surface and not a component, and scattering it would mean nobody could read what the printed record looks like without opening five files.

Decision log entry, as of 12 June 2026

In print every expansion is open, the address is on the page, and the panel is gone. True black on true white, and not the screen greys: the reading ink of this product is a warm bone that prints as nothing at all. This is the one place in the system where a literal colour is correct, and it is said out loud because two critique instruments flagged it independently before the reason was written down.