8-pt Spacing Scale

A multiple-of-8 (or 4) scale gives consistent rhythm and predictable layouts.

How to apply it

Pick {4, 8, 12, 16, 24, 32, 48} and use them everywhere — no arbitrary values.

8-pt Spacing Scale in practice: a concrete example

Why design systems pick 8

Choose a fixed set of spacing steps, say 4, 8, 12, 16, 24, 32, 48, and use only those, and a layout snaps into rhythm: gaps repeat, cards line up, and nothing lands on a stray 13px by accident. Most systems, including Material and the token sets behind shared Figma libraries, build on a 4 or 8 base for exactly this reason. Eight also divides cleanly across common screen densities, so edges stay crisp.

Common 8-pt Spacing Scale mistakes

Keeping the scale in the design file but typing arbitrary values (11px, 17px, 25px) in code, which quietly breaks the rhythm.
Using one step for unrelated relationships, so the gap between sections and the padding inside a button look identical and the grouping reads wrong.
Treating the scale as sacred for optical work. Icons and type sometimes need a 1-2px nudge to look centred even when the maths disagrees.

When 8-pt Spacing Scale doesn't apply

Hairline borders, focus rings, and optical alignment often need sub-scale values like 1px or 2px that no 8-point step covers, and that is fine: the scale governs layout spacing, not every measurement. Dense professional tools may also adopt a tighter 4-point base so more information fits without feeling cramped.

Practise it on a real challenge

Profile Card — nothing quite lines up

A teammate's profile card uses gaps of 6, 11, and 13px — no scale, just values nudged by eye. It looks subtly broken and no one on the team can say exactly why.

8-pt Spacing Scale

How to apply it