Spacing
A 4-based scale. Every gap, pad and fixed size in the interface comes from it.
The scale
The bars below are drawn at each token's real width, so this page measures itself.
--space-2Hairline gaps between chips--space-4Tightest usable gap--space-6Dense control padding--space-8The default small gap--space-10--space-12Between related rows--space-16Card and panel padding--space-20--space-24Between groups--space-32Control height; section spacing--space-36--space-40Page gutters--space-48Between major sections--space-56--space-64--space-80--space-96Page-level breathing roomSizes, not just gaps
The scale covers fixed dimensions too. A 32px control is height: var(--space-32), not height: 32px — so a density pass can move the whole interface by editing one token rather than grepping for a number.
Off-scale values
When a spec hands you a value the scale does not have — 14, 28 — round to the nearest step and say so at the site:
/* Figma says 14; the scale has no 14. Rounded to 16. */
padding: var(--space-16);The comment is the part that matters. Without it, the next person reads the mismatch as a mistake and “fixes” it back off-scale.