Design system · quantum lattice

The --u-base control

One knob rescales the entire composition. Ratios are quotients of multipliers, so φ cannot break; the display's pixel density bounds how finely the knob steps. Everything on this page — including the controls — re-derives live.

Reading body
PASS A1 · lattice every lead k·u lands on whole device pixels at dpr 2
PASS A2 · Fibonacci pairs 2:3 → 1.500 (φ -7.3%) · 5:8 → 1.600 (φ -1.1%) · 8:13 → 1.625 (φ 0.4%) · 13:21 → 1.615 (φ -0.2%)
PASS A3 · √φ ladder adjacent ±3.5% of √φ; skips ±2.5% of φ — u-free, invariant under the knob
PASS A4 · measure 21 own-leadings = 504px ≈ 63ch
PASS A6 · floor body 4u = 16px (≥16px required)

All axioms hold at this tuning.

tokenksizeleadboxpair
text-xs2.510.0px16px16px—
text-sm3.12512.5px20px20px—
text-base · body416px24px24px2:3
text-lg · lead ¶520px32px32px5:8
text-xl · title6.526.0px36px36px—
text-2xl832px52px52px8:13
text-3xl · headline10.542.0px52px52px—
text-4xl1352px84px84px13:21
text-5xl · display1768px80px80px—

Specimen

The grid that converges on gold

You cannot build a golden grid: φ is irrational and grids are rational. You can build the grid that converges on it. Every length on this page is an integer multiple of one unit, and every pair that claims proportion takes adjacent Fibonacci multiples: 2:3, 5:8, 8:13, 13:21 — the best rational approximations of φ that can exist.

A lead paragraph takes the 5:8 pair. Drag the knob and watch both columns rescale together; nothing resets, because there is nothing to reset — the composition is one equation with one free variable.

Small print keeps its own pair. The measure law caps every column at twenty-one of its own leadings, which lands each size inside the 45–75 character band without per-size overrides.

Tokens for this tuning

--u-base: 0.25rem; /* 4px */
--text-body: calc(var(--u-base) * 4);
--lead-body: calc(var(--u-base) * 6);
/* body line-height: 6/4 = 1.500 unitless */
enesru