You cannot build a golden grid. φ is irrational and grids are rational. What you can build is the grid that converges on it — and then write down the axioms so a script can tell you when it breaks.
Every length in the system is an integer multiple k of a single unit. Change the unit and the whole composition rescales with every ratio intact, because ratios are quotients of multipliers and the multipliers do not move. It is one equation with one free variable.
Floor 4px, below which the reading body (4u) drops under 16px. Baseline B = 24px = 6u.
The rhythm tuner puts that variable on a slider: one knob rescales the page and emits the token block for whatever tuning you land on.
Sizes climb by √φ, so that two steps make one φ. Each rung is a whole multiple of u, and the error against the irrational target is printed rather than hidden — it is the cost of living on a lattice.
| Rung | px | k · u | step | vs √φ | skip | vs φ |
|---|---|---|---|---|---|---|
xs | 10 | 2.5u | — | — | — | — |
sm | 12.5 | 3.13u | 1.25 | −1.73% | — | — |
base | 16 | 4u | 1.28 | +0.63% | 1.6 | −1.11% |
lg | 20 | 5u | 1.25 | −1.73% | 1.6 | −1.11% |
xl | 26 | 6.5u | 1.3 | +2.20% | 1.625 | +0.43% |
2xl | 32 | 8u | 1.2308 | −3.24% | 1.6 | −1.11% |
3xl | 42 | 10.5u | 1.3125 | +3.18% | 1.6154 | −0.16% |
4xl | 52 | 13u | 1.2381 | −2.67% | 1.625 | +0.43% |
5xl | 68 | 17u | 1.3077 | +2.80% | 1.619 | +0.06% |
Every figure above is parsed from the compiled token file at build time. √φ = 1.272, φ = 1.618.
A size and its leading are the pair a reader actually sees. Each one takes adjacent Fibonacci multiples of u — the best rational approximation of φ that exists at that size. Successive convergents overshoot and undershoot in turn, closing on φ without ever landing.
Specimen: the 5:8 lede pair, live
This paragraph is set in the lede pair: five units of size on eight units of leading, the setting for a paragraph that opens a section. The reading body under it is four on six. Nothing on this page is a screenshot of the system; it is the system, which is the only demonstration that cannot quietly go out of date.
Twenty-one leadings of your own size. Because the unit the measure is counted in already scales with the size, one rule lands every column inside the 45–75 character band — with no per-size override anywhere in the system.
21 × its own leading
21 × its own leading
Most systems document rules and never check them, so they drift one declaration at a time and nobody finds out. These six are axioms a script reads off the compiled output and the stylesheets that bind to it. A violation exits 1 and fails the build.
A5 is the one that matters in practice. A1 through A4 are properties
of a token file, which is easy to keep clean. A5 is a property of
every place a component binds a size to a leading — one hand-typed line-height: 1.5 beside a ladder size, and every rhythm below
it inherits the error. So the linter reads the stylesheets, not just the
tokens. A6 closes the last door: a raw 15px or an 18px padding typed anywhere,
in a stylesheet or an inline style, fails the build before it can ship.
A design system with no recorded errors is one nobody has measured. Two are worth keeping.
space-1 through space-6 carried φ-exponent
descriptions implying a geometric curve. Measured 2026-08-10: the
labels overstated the actual curve by up to 24%. The low ladder is linear by design — utility
spacing needs adjacent small steps, and forcing φ onto it produced
gaps nobody could use. φ lives in the Fibonacci members and in the
type ladder, not everywhere. Naming a linear ramp after φ did not
make it φ; it made the label wrong.
2xl at 33px and 4xl at 53px were √φ-correct
and Fibonacci-wrong. Snapping them to 32px and 52px cost about 2% of ladder
accuracy and bought exact 8:13 and 13:21 pairs. When the ladder and the
pairs disagree, the pairs win — the pair is what a reader sees.