Instrument

The page is drawn inside a frame rather than on an open canvas. Two vertical rails sit at the outer gutters, fixed to the viewport and capped at 1680px, and horizontal hatch bands separate the sections. Both are filled with the same 45° hatch at background-attachment: fixed, so the stripes are anchored to the viewport rather than to each element. The rails and the bands are windows onto one continuous field, which is why their diagonals meet exactly at every corner.

The rails and a hatch band, drawn at page scale

Where a band crosses a rail the system draws a crosshair rather than letting one line pass behind the other, which is the technical-drawing tick for two members meeting. Below 700px the rails are removed entirely, so there is nothing left to intersect and the crosshairs go with them.

Nothing in the system names a colour. Every rule reads a token, and a theme is a redefinition of those tokens on [data-dir]. Four grounds are general and two belong to a single page each. Because the tokens are the only interface, a page written for one ground works on all six without knowing which it is on.

Ink, dim, faint, signal, cool — the five that carry meaning

Archivo is variable on width, not just weight, and that is the part of the system worth understanding. Sixty-three rules, counted in August 2026, across the four stylesheets pin font-variation-settings: 'wdth' to a specific value, and they fall into two populations that behave differently.

The same string at each width the system actually uses

Where every width-axis rule sits

Text narrows as it grows. Across the 54 text rules the correlation between size and width is r = -0.46: a 240px outro headline is set at 64 to 74, a 30px sub-head at 88 to 92. Large type has enough room to be read condensed, and condensing it is what stops a headline turning into a wall.

Numerals and the mark do not. The other 9 rules sit at 100 to 125 whatever their size, because they are read as data rather than as language. A chapter number at 112px and the 15px wordmark are both near the ceiling. The one apparent exception, .pl-count at 220px and width 84, is a display numeral set like a headline, and it behaves like one.

The system has very few spacing tokens. Almost everything else is a clamp() tied to the viewport, so the page rescales continuously rather than snapping at breakpoints.

A content column is --gut + --pad in from the page edge, which is what keeps text off the rails at every width. Measure is capped by content rather than by the grid: the lede runs to 56 characters, prose to 70.

Two easings, and a rule about when each applies. Anything that enters or settles uses the decelerating curve; anything that swaps one state for another uses the symmetric one. Nothing in the system uses a linear or a default ease.

Sections arrive on a stagger rather than together: .rv starts 26px low and transparent, and data-d="1" through "8" add 70ms each. Eight steps is the whole ladder, which caps the longest entrance at just over half a second.

A handful of components appear on nearly every page, and they carry the system more than any single rule does.

Live components, rendered from the system’s own classes

All of it is hand-written CSS, imported as one stylesheet. There is no utility framework and no component library underneath, and the classes on this page are the same classes every other page uses, which is the only reason a documentation page can be trusted to still be true.