A spacing system for web design: a short scale and the rules for using it
A spacing system is a short list of allowed distances, usually multiples of 4 or 8 pixels, plus rules for which one goes where. Eight or nine steps are enough for a whole site. The rules matter more than the numbers: smaller steps inside a component, larger steps between components, the largest between sections.
Why a scale beats eyeballing
Left to judgement, spacing drifts. One card gets 22px of padding, the next 24px, a third 20px because someone nudged it. No single value is wrong, but together they make a page look slightly unsteady, and every new section starts from a blank decision. A scale removes the decision: you choose from a handful of steps, and the gaps between steps are large enough that the difference between them is always visible.
It also makes a site easier to change. If spacing values live in one place as tokens, tightening the whole site for phones, or loosening it for a calmer feel, is a change to a few numbers rather than a search through hundreds of rules.
Choosing a base: 4 or 8
Most systems build on 8, a convention that spread through interface design partly because common screen sizes and densities divide by it cleanly. An 8-point base gives steps like 8, 16, 24, 32, 48, 64. A 4-point base adds the half steps, 4 and 12, which you'll need for small gaps such as the space between an icon and its label or between lines of a compact list.
In practice many sites use both: a 4-point grid for small, internal distances and 8-point multiples for anything larger. The exact base matters less than sticking to it.
| Token | Value | Typical use |
|---|---|---|
| space-1 | 4px | Icon to label, tight inline gaps |
| space-2 | 8px | Label to field, items in a compact list |
| space-3 | 12px | Button padding (vertical), chip gaps |
| space-4 | 16px | Paragraph spacing, form row gaps |
| space-5 | 24px | Card padding, gap between cards |
| space-6 | 32px | Heading to content in a section |
| space-7 | 48px | Between groups inside a long section |
| space-8 | 64px | Section padding on phones |
| space-9 | 96 to 128px | Section padding on wide screens |
Notice that the steps grow faster as they get larger. Small distances need fine control; large ones only need to be clearly different from each other. A purely linear scale (8, 16, 24, 32, 40, 48 and so on up to 128) has too many large steps that look the same.
The rules that make it a system
- Inside is smaller than between. A card's padding is smaller than the gap between cards, which is smaller than the gap between sections. This single rule does most of the grouping work.
- Headings sit closer to what follows than to what precedes. Give the space above a heading roughly twice the space below it.
- Spacing follows the type. Paragraph spacing usually equals about one line of body text. If the body line height is 28px, steps near 24 and 32 will feel related.
- Large steps flex, small steps don't. Section padding can shrink by half on a phone. Button padding and the space between a label and its field should barely change, because they're about hands and reading, not layout.
- Nothing off the scale without a reason. Optical adjustments happen, such as nudging an icon by a pixel to look centred, but they should be rare and deliberate.
Writing it in CSS
Define the steps once as custom properties on :root, such as --space-4: 1rem, and use them everywhere instead of raw numbers. For the large steps, clamp() lets one token cover both phone and desktop: --space-9: clamp(4rem, 2rem + 6vw, 8rem) moves smoothly from 64px to 128px. Using gap on flex and grid containers instead of margins on children keeps the spacing in one place and stops margins doubling up.
Name tokens by size, not by use. --space-5 can be card padding today and a form gap tomorrow; --card-padding invites a second token with the same value. If you want use-based names, alias them to the scale. The guide to design tokens covers that layering.
How Anticode does it
Anticode’s design engine writes spacing as tokens rather than as numbers scattered through the page. Section padding runs to 104px on wide screens and contracts on phones, the gap between items is 24px and the default padding inside cards is 28px (some systems trim or restyle it). Each design system sets its own type sizes, line heights and corner radii on top of those tokens, so a section spaced for Editorial still holds together when you switch to Swiss.
When you change a gap in the layout editor, you pick from named steps (XS, S, M, L, XL and XXL), each a range that tightens on narrow screens, so hand edits stay on a scale instead of introducing a new number. What the steps can't do is decide which relationship you mean; the inside-smaller-than-between rule is still yours to apply. For the visual side of the same subject, see whitespace in web design.
Questions people ask
Should I use a 4px or 8px grid?
Use 8 as the main rhythm and 4 for the small gaps that 8 can't express. Most sites end up with both.
How many spacing values does a website need?
Eight or nine steps, from about 4px to around 128px. Fewer is fine for a small site; more usually means steps that look alike.
Should spacing be fluid?
The large steps, yes: section and column gaps should shrink on phones. The small steps that affect tapping and reading should stay nearly fixed.
Margins or gap?
Prefer gap on flex and grid containers. It keeps spacing on the parent, avoids collapsing or doubled margins, and is easier to change from one token.