Twelve columns, twelve units tall.
Two numbers fix the document — twelve columns and a 12px X unit. No page margin, no gutter.
Cell padding, the baseline and every height on the page are multiples of it.
Full, two-thirds, half, third, quarter, sixth, twelfth — across and down.
In a third or narrower, always at body size. A wider cell wanting large type wants a lede, said deliberately.
One set of names, on both axes.
What ranks a row is how many cells it has, and height agrees with it. One cell outranks two; two outranks three. So inside a movement the count strictly increases and the height never increases — two statements of the same thing, which is why a page that breaks one always looks like it broke both. Every row prints its count under the overlay.
Two adjacent rows divided the same way. A half and two quarters sitting on a half and two quarters does not read as two steps of a hierarchy — it reads as one region cut in half for no stated reason, and the eye spends its time looking for the reason. If two rows want the same division they are one row: stack them with a split and let the vertical twelfths carry the difference.
One row
may centre.
THE EXCEPTION IS THE ALIGNMENT, NOT THE ANATOMY — THE FOUR CORNERS ARE STILL WHERE THEY ALWAYS ARE.
The same arithmetic, turned ninety degrees.
A row is twelve units tall. A cell inside it spans the same names it spans across.
One unit governs space and text.
158
112 Aa
80 The quick brown fox
56 The quick brown fox jumps
40 The quick brown fox jumps over
28 The quick brown fox jumps over the lazy dog
Alternate steps are exact doubles — 14, 28, 56, 112 — which is the only ratio where extending the scale cannot make it drift. A fifth or a golden section looks better on a specimen sheet and accumulates error the moment you add a step at either end.
The ladder passes through 80 and 158 on its own. Those are the two sizes measured off the brand document, and nothing here was fitted to them.
Cell padding is 2 baselines. A vertical twelfth is 8. A page is 96. So a line of type in one cell lands on the same line as type in the cell beside it — not merely inside a box of the same height, which is the difference between aligned and coincidentally similar.
Every line box must be a whole multiple of 12. That rules out 1.5-type leading and any font size whose natural line box is awkward, which is why the scale sets both together rather than leaving line-height to the call site.
The rows here are on it, the rails are on it, and the rests are on it because their heights are multiples of 96. Turn B on and scroll: what should unsettle you is how little moves.
Two of the three insets are zero.
The page margin, the gutter and the cell padding were three mechanisms for one job. Two are now zero and the padding does all of it — so a column is exactly page over twelve with no remainder, and the column edge, the hairline and the padding edge are one line.
A gutter is a third mechanism for a job two others already do. Add a gap between ruled columns and the rule stops sitting on the column boundary — it sits flush against one side of a 16px void that belongs to nothing. That void is why a ruled row can look subtly out of true however carefully the padding is set.
Harder, closer to an instrument panel than to a printed document, with the hairlines doing the framing the margin used to do.
A margin tells the eye that content has an edge. Without one a page of running prose feels relentless — set the measure inside the cell instead and let the rules carry it.
Unruled columns on a white page, where the gap is the only separator there is. That is the Swiss print grid, and it needs one for the same reason this does not.
No table has ever had a gutter. Rule your columns or space them; doing both is a hedge, and hedges are what make a layout feel almost right.
There is no margin utility, no gap prop and no section padding. Air between regions is a rest — a row with a name and a rule — so it is countable under the overlay.
A cell cannot decide its own height either. Its row does. That is what stops a region growing because its contents grew, which is the failure this system exists to prevent.
What it makes.
The same cell, at two-thirds, carries a lede. At one-third it carries the annotation that answers it.
Nothing about this region is configured differently from the stat tiles above it. It is the same component at a different fraction, which is why the two rows line up without anyone aligning them.
A run of sixths and a third close the twelve exactly. Any row that does not sum to twelve is a bug, and it is visible with G.
Asymmetry comes from starting later, never from a margin.
Objects may cross the line.
A grid of closed rows hands the eye off at every boundary. The documents this is modelled on are full of objects that overlap the lines — the line is still there, still true, and the picture sits across it. That is what makes them read as one field rather than a stack of boxes.
Text across a row line is text in two regions at once, and no reader can be asked to resolve that.
Bleeding upward makes a region reach back into one already finished, which reads as an error every time.
It degrades by re-fractioning.
Every fraction available, both axes named, heights honoured. This is the width the system is designed at and the only one where a quarter and a sixth both exist.
Six divides by two and three, so 2-3, half and third survive and nothing else does. Every cell goes full width unless it names one of them — explicitly, at the call site, because there is no honest arithmetic that maps a quarter of twelve onto six.
Everything stacks, heights relax, and the type ladder loses its top three steps — a 158px display on a 390px screen is not a display, it is a word per line.
A system that halves every fraction is relying on wrap — a row of four quarters becomes 3 + 1 rather than 2 + 2, and nothing in the source says so. That is the moment a grid stops being checkable, which is the only property this whole system exists to have.
You write md="half" on the rows that should stay side by side on a tablet. That is the whole tax, and it is paid at the one place where the decision actually belongs.