Spacing Scale
The fixed set of gaps, padding and margin values a product is allowed to use, usually built on a 4 or 8 pixel base.
A spacing scale removes a decision that gets made badly hundreds of times. Values step from a base — 4, 8, 12, 16, 24, 32, 48, 64 — and components use steps rather than arbitrary numbers. The gain is not tidiness: it is that vertical rhythm stays consistent when three teams build three screens, and that a designer and an engineer disagreeing about a gap have a small set of options rather than an argument about 14 versus 16.
The rule that makes it work in practice is proximity: related things get a smaller step than unrelated things, consistently. A label 4px from its input and 24px from the next field reads as grouped without any borders. Most “cluttered” interfaces are not too dense — they use the same gap everywhere, so nothing groups.
In practice
A design system audit found 47 distinct padding values in a component library built by four teams. Mapping to an eight-step scale changed the rendered output by at most 2px in any place and cut the CSS by roughly 15%, because most declarations collapsed into shared tokens.
Where teams get it wrong
- Arbitrary values that bypass the scale, which reintroduce the problem one component at a time.
- The same gap between related and unrelated elements, so nothing groups visually.
- A scale that is linear all the way up, giving too many indistinguishable large steps.
- Spacing defined in the design file but not exported as tokens.
- Negative margins used to escape the scale rather than fixing the component.
( Learn more )
Related terms
All terms- Design TokenA named variable holding one design decision — a colour, spacing step, radius or type size — so the value can change everywhere from one place.
- Grid SystemThe columns, gutters and margins a layout is built on — the structure deciding where things can go before anybody decides what goes there.
- Typography ScaleThe fixed set of text sizes a product is allowed to use, and the line heights and weights that travel with each one.
- Design SystemThe single source of truth for how a product looks and behaves: tokens, components, patterns, usage rules and the process for changing them.