/* 8pt spacing ramp — generated with koalia.design/tools/8pt-grid */
:root {
--space-3xs: 4px;
--space-2xs: 8px;
--space-xs: 12px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 32px;
--space-xl: 48px;
--space-2xl: 64px;
--space-3xl: 80px;
}spacing is the single easiest thing to get consistently right and the most common thing to get quietly wrong. the 8pt grid removes the decision: every gap, pad and margin is a multiple of 8, so “how much space here?” becomes “which step?”
8 divides cleanly at every common display density. at 1× it is 8 physical pixels, at 1.5× it is 12, at 2× it is 16, at 3× it is 24 — all whole numbers. a 5pt grid gives you 7.5 physical pixels at 1.5×, and the browser rounds it, and your careful spacing drifts by half a pixel in a direction you don't control.
the second reason is arithmetic you do in your head. multiples of 8 are easy to hold — 8, 16, 24, 32, 48, 64 — so a team converges on the same values without checking a document. that consistency is the actual product; the number 8 is just a convenient carrier.
4pt as the half-step. pure 8 is too coarse inside small components — the gap between an icon and its label, the pad on a compact chip. most systems run an 8pt grid with 4pt available below sm. that's what the base unit toggle is for.
the 8pt grid is a convention for interface work, and it earns its keep on teams and on systems that have to stay coherent for years. it is not a law of visual design.
editorial layout, poster design and anything typographically driven usually wants a baseline grid derived from the leading of the body text instead — where the unit is whatever line-height you set, not 8. forcing an 8pt grid onto a text-first layout produces spacing that fights the type.
the honest version: pick a unit, write it down, and hold the team to it. 8 is the best default because the arithmetic is kind and every other tool already assumes it.