The grid is 4px and 2 is the only half step. Two ladders carry the same eleven numbers for two different reasons, five radii carry one corner per job, and the border has exactly one width. Measured across 10 screens at 1280: 2,905 padding readings, 1,454 gaps, 1,144 borders, 1,264 corners. Two readings in 4,359 are off the grid.
A value off the grid is not a distance. 1px is a line, so it is
--hairline and not a space; the measurement of a thing is --size-* or
--control-* and not a space either. What is left is eleven steps, and they are what
every gap and every padding in the product is made of.
617 declarations. --space-8 alone is 225 of them, and 8,
12 and 4 together are 408. The ladder is real at the bottom and thin at the top, which is what a
dense screen of odds and dates looks like when it is measured rather than designed on paper.
--space-* and --size-* hold identical values,
2 through 56, with --size-72 as the one step space does not have. That reads as an
accident and it is not one. A gap is a distance between things and can be retuned as a
rhythm; the side of an avatar, an icon plate or a legend swatch is the size of a thing and moves
when the thing does. Same numbers today, different reasons, so different names, and the day
the rhythm is retuned only one of the two ladders moves.
The test of the split is whether each step has a job written beside it, and every one of these twelve does. Two ladders with the same numbers and no reasons would be a duplicate; two with reasons are two ladders. 73 declarations against space's 617, which is also the right proportion: a product has far more distances than it has things with a fixed side.
Every one of the five renders somewhere in the product, and
border-radius is the most disciplined axis in the system: 100 per cent of the
declarations read a token, and the only non-token values are 0, which is no corner,
and 50%, which is dealt with below.
The sixth shape is the finding. 50% appears 28 times and
is not a token. On a square it draws the same circle --radius-pill does, so the two
are interchangeable there and they are not the same thing anywhere else: on a rectangle
50% makes an ellipse and 100px makes a stadium. Both are in use, both
look right today, and nothing says which to reach for. That is a decision the ladder never
took, not a value to sweep.
One declaration writes border-radius with four identical corners
where one value would do. It renders correctly and it is the only redundant geometry declaration
in the system.
Re-measured on 104 renders, 26 screens at 390 and 1280 in both themes, rendered elements only: 19,762 edges at 1px, 32 at 2px, 6 at 1.5px. 99.8 per cent hairline, and the two exceptions are not box borders at all. Both are underlines: the 2px is the selected rules tab and the 1.5px is the rule under the trader amount field. A line that marks a thing and a line that encloses one are different jobs, and only the enclosing job is the hairline's.
An earlier pass here read only the top and left edges of 10 screens and reported one width. Both exceptions are on the BOTTOM edge, so the reading was true about what it measured and wrong about the axis. Corrected 2026-08-08 by the consolidation's verification.
This corrects the census. census.md reports "border 17"
among the axes that are not scales. Seventeen is right and it is not a count of widths: it is a
count of distinct width / style / colour triples, and 99.8 per cent of them are the
same width. The border axis has one enclosing width and sixteen colours, which is the
colour page's subject and not this one's.
--ring is 2px and is the focus outline, which is the one edge in
the system that is deliberately heavier than a hairline, because it has to be seen at a glance
from across a keyboard rather than read up close.
Every padding side and every gap on 10 screens at 1280. Bars are to scale; a bar in red is off the 4px grid.
Padding, 2,905 readings, 13 values
Three readings are drawn as numbers rather than as bars, because no token has
their width and a bar this page drew itself would be a value invented to illustrate one:
44px once, which is on the 4px grid but is --control-44 standing in as a
padding rather than a --space-* step; 118px twice on .ed-head;
and 0.4px twice, a sub-pixel rounding artefact on an anchor.
Gap, 1,454 readings, 9 values, all on the grid
census.md says padding is "not a scale at all", 17 values.
Measured per side, it is 13 values and eleven of them are ladder steps, with two readings off
the grid in 4,359: a 118px on .ed-head and a 0.4px that is a rounding artefact on an
anchor. The census counted the padding shorthand as one value, so
8px 12px and 8px 8px read as two different paddings even though every
side of both is on the grid. A shorthand is not a value, it is four values, and the axis
it hid is in the shape the file always claimed.
The height half of the same census sentence stands, and it is the next section.
Re-measured 2026-08-09, and the reading this section carried before was a 10-screen census taken on 2026-08-07: three declared heights, twelve rendered, 317 controls. This one is 106 painted screens at 1280, 5,004 controls. The ladder is six rungs now, 28 / 32 / 36 / 44 / 48 / 56, and 3,266 of the 5,004 stand on one.
The split is total and it is the whole finding. Every height that lands
on the 4px grid came from a token. Every height that does not was accumulated: padding plus a
border plus a line box. And the line box is the one part the system never declared.
Padding and border are on the ladder; line-height on a control is normal,
which is the font's opinion, and DM Sans returns 21px at 14px, 18px at 12px and 16.5px at
11px. So the parity of a control was being set by its font size: .btn-md came out
12+12+2+21 = 47 and .btn-sm 8+8+2+18 = a clean 36, from the same padding
ladder. No value in --space-* can make 47 even, because 21 is odd.
The ladder, drawn, at 120px wide
This ladder was six numbers in a list and nothing on the page until
2026-08-12, on the one foundation page whose subject is dimension, three sections under a
space ramp and a size ramp that are both drawn at their own sizes. A page that states the touch
floor as a number and draws nothing at 44px cannot be checked by reading it, which is the whole
argument for a vitrine over a document, and it was failing on the ladder the floor is built from.
Drawing it found the hole in the ramp: the stand's own step classes were 32, 36 and 44,
written while census.md still said three heights were declared, and the other three
arrived on 2026-08-09 and nobody added them. A ramp that has to be drawn cannot be short in
silence.
Height and nothing else: the width is the stand's 120px, the corner is
--radius-10, and the box is the outlined block the ramps above use. What a
control's height is NOT is a box you can set, which is section 06's whole finding: 1,738 of
5,004 controls accumulate their height out of padding, a border and a line box, so these six are
the rungs a control lands on when it reads one, not the heights the product renders.
What is still arithmetic, and it is 1,738 of 5,004. The button family
reads the ladder as of today and nothing else does: .nav-row 32.5 on 365,
.chip-lane 40.5 on 312, .chip-nav 47 on 285,
.nav-row-stack 49 on 210, a bare <summary> 34.5 on 193,
.btn-bare 24.5 on 72, .chip-rail 26 on 63. Every one of the
fractional readings is a line box: 16.5, 19.5, 22.5. Backlog 40 stays open on exactly these.
A floor is not an assignment, and declaring a height proved it. The 44px
touch floor in base.css is (0,5,1) on purpose, so it out-specified
.btn-md's new 48 and put it back to 44, and the content then held the box at 47: the
same button stood 48 under a mouse and 47 under a finger. It reads
max(--control-44, --control-h) now, and --control-h is declared
inherits:false so a control's height is not something the boxes inside it can
claim.
--icon-12, --icon-16, --icon-18,
--icon-20, --icon-22 and --icon-28 are their own ladder in
tokens.css, and this page had no
section for them at all until 2026-08-12: four numbers with a comment each in the token file
and nothing drawn anywhere in the kit. It was four numbers until 2026-08-13 and the two that
joined were already in the product, sized off the SPACE ladder instead: the bottom bar's mark
read --size-20 and the state block's read --size-28, which is a mark
that moves the day somebody re-spaces a row. Backlog 133, and the row asked for the opposite fix,
a class per rung, which would put a size in a document. Two of the four share a number with
--size-* and they are still not the same token, for the reason section 02 gives
about the other two ladders: a mark is not the side of a thing. A mark is read at a
glance and its job is legibility inside a control; a size is the measure of an object.
The box, at the size the token names
The same six with a real mark in them
Two rows and not one, because a mark is not the size of its box. The
filled half of the set paints inside its geometry and the stroked half paints half of
--stroke-mark outside it, so a ladder drawn only as squares would be a ladder about
this page rather than about the product. The wells above are the stand's; the ink in them is
.ic in base.css, untouched, which is where
the icon page takes the rest of this apart.
22 is the default and 12 is the only other one base.css
names: .ic is 22 and .ic-sm is 12, so 16 and 18 are reached by a
component writing a width and a height of its own. That is the same shape as the height ladder
above, a declared set with only part of it wired to a class, and it is why these four had no
drawing to fall out of.
Across every geometry property in components/: padding, margin,
gap, width, height, inset, radius and border. 81 per cent read a token. The 240 that do
not split cleanly in two.
1px--hairline:1px is declared and used
ten times; 1px is typed 145 times, always inside a border
shorthand. The shorthand is why: border:1px solid var(--border-hairline) tokenises
the colour and leaves the width as a number, and nobody notices because the colour looks
done.the largest single finding on this pageSo the honest number is not 240 literals. It is 159 that have a token and 81 that do not, and the 81 are a different question entirely: whether a layout dimension scale should exist at all, which is the responsive stage's to answer and not this one's.
--hairline. The token was written for
exactly this and is used ten times against 145 literals. One value, one place, and the day the
hairline changes it changes once.--space-* already has the number.50% against --radius-pill gets a rule.
Twenty eight readings use a shape the ladder does not name. On a square they are the same
circle; on a rectangle they are an ellipse and a stadium, and nothing says which is
wanted.docs/backlog.md item 43.