The system

Six tokens. Three are greys doing three jobs, and the split between them is the site's primary hierarchy mechanism now that there is no type ramp. One is a hue, and it means you can act on this — a link, or the hovered row. A coloured mark that isn't interactive is a defect.

Four steps, each a multiple of the 28px leading, so every element on every page sits on one baseline. The ratio is 2× at every step: a reader can't measure 14 against 20, but 28 against 56 is unmistakable, and 56 against 112 is unmistakable again. Hierarchy by doubling — the trick a type ramp uses, on the axis that still had room in it.

One token sets both: --label, which is two columns of the page's own grid plus the gutter — 154px at the measure, so the content axis is 182px, exactly where column 3 begins. Everything that annotates starts at column 1; everything annotated starts on that axis. The specimen below is a real .facts ledger — the same markup a case study uses, so its label sits on the same vertical as this section's own head.

It was 16ch — a flat 144px, measured against the longest label on the site. Right about typography, wrong about the grid: the axis landed at 172px while column 3 starts at 182, so every ledger, head and panel put its value 10px inside the gutter. Two grids were running at once and the typographic one was quietly winning. Press ⌥G and it is the only thing you can see; without the overlay, four passes missed it.

Derived, the two grids agree at every width. The formula also sets the one breakpoint that matters: --label falls to 144px — the width of that 16-character label — at exactly 1060px, which is where the hung layout stops and every label stacks.

Twelve columns, a 28px gutter, capped at a 1120px measure — so a track is 63px and the document is 1064px wide on any screen bigger than that. Press ⌥G to see it on any page.

The page places one column, eight of the twelve. The four to its right are margin and stay empty: putting type in them would make the margin a column, and the document would be two columns again. That left weight is the most recognisable thing about the site, and it is a single declaration.

Nothing breaks out of it. A figure spans the document, the same as a paragraph. There used to be three widths on one page — 609 for prose, 781 for heads and ledgers, 1064 for media, each derived by its own formula and none of them named — and a reader could see all three at once. It also removed a whole class of defect: every phantom-measure bug in this redesign, four of them, was inside a bleed formula. A block that just spans the document cannot be measured against the wrong grid.

What it costs: media is 700px rather than 1064. A screenshot that needs 1064px to read should be its own page, not a reason for fifteen other pages to carry a second measure.

The rule that governs every hierarchy decision, and the one that catches the defects: a label earns its hierarchy from position if it has a position, otherwise from value. Never both. That is why the ledger label above is faint — it has a column, so it doesn't also need a colour change — and why the colophon's stacked labels are ink.

Both specimens below are live. The left is hung, the right is stacked, and the only difference in the CSS is which one gets --ink.

The site's only mark, and its only job is to carry a fact: which half of the practice a row belongs to. Outline vs. fill is the signal, not colour — the two old duality hues were 2.14:1 apart in greyscale, so a screenshot or a colourblind reader saw two identical dots. Both circles are r="5" with the same 1.8 stroke, so the ring and the disc are the same 11.8 units across — and the two one-sided marks are the same 16.2 as each other.

The rule stops at each circle's path (r=5), not at its outer edge — 13.54 to 18.46, which is 5 × 0.70711 projected along the 45° diagonal. That buries 0.9 units of each end inside the 1.8 stroke, so the join overlaps the object it meets.

It ended at the outer edge (14.17) for four passes. That is tangent to each circle rather than overlapping it, and tangency plus a hair of antialiasing reads as a gap. Going 0.64 units further, to the inner edge, breaks a stub back into the ring's hole. The tolerance is 0.64 units, and it is why this number is documented rather than left to the file.

Hover the row. The title steps right by exactly 1ch — one character cell of the monospace grid — its underline goes to ink, and the numeral darkens. Nothing fades, nothing scales, nothing tints. It is mirrored on :focus-visible, because a shift only a mouse can trigger is a mouse-only affordance.

The site's only form control, and the only Basecoat component on a real page. It is a line you type on, not a box: every other border came out with the document direction, which makes this one unambiguous — a horizontal rule under text means "type here" and means nothing else. 16px is the one deliberate size exception, because below it iOS Safari zooms the page on focus.

There is no button anywhere on this site. The gate checks as you type.

Basecoat ships 38 components. Four are imported and two are used. There is no dialog, dropdown, menu, tabs, table of data, toast, popover, sidebar, chart, or command palette — not because they'd be hard, but because nothing on this site needs one, and a system that documents unused components is a catalogue.

Also absent: a type ramp, a second typeface, a filled surface, a rounded corner, and a second hue.

The JavaScript is three things: the ⌥G toggle, a reduced-motion pass that pauses the clips, and the quiz engine on three pages. Nothing else ships.