The Spacing Scale
A spacing scale is a constrained set of named values — 4, 8, 16, 24, 32, 48, 64px — so every gap and padding decision is intentional and consistent rather than arbitrary.
Without a spacing scale, every gap is an independent decision. A developer puts 13px between a label and input, 22px below a card, 17px above a section header. The page renders, nothing looks obviously broken, but it does not feel right. The rhythm is off. The spacing is inconsistent in ways that are hard to name but easy to feel.
The base unit
Most spacing scales start with a base unit of 4px. All values in the scale are multiples of this unit: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96. Some scales skip odd multiples and use only powers that feel visually significant: 4, 8, 16, 24, 32, 48, 64.
The 4px base unit is not arbitrary. A standard browser line-height on a 16px font is typically 24px — a multiple of 4. Most icon sizes (16px, 20px, 24px) are multiples of 4. Border-radius values, input heights, button padding — the vast majority of UI measurements that feel correct are multiples of 4. Using 4 as a base unit means the spacing scale naturally harmonises with these other measurements.
Named steps, not pixel values
A spacing scale works best when you name the steps rather than reference their pixel values in code. Tailwind CSS, for example, uses numeric names where each number corresponds to a value: space-4 is 16px, space-6 is 24px, space-8 is 32px. Design tokens might use semantic names: space-xs, space-sm, space-md, space-lg, space-xl.
The benefit of named steps is that the name abstracts away the pixel value. If you decide to change space-lg from 32px to 28px, every instance of space-lg in your codebase updates automatically. The semantic relationship (“this is a large gap”) remains constant even if the underlying measurement changes.
Applying the scale
The scale creates a vocabulary for spacing decisions:
4–8px — Tight, internal spacing. Between an icon and its label. Between a checkbox and its text.
12–16px — Component internal spacing. Padding inside a button. Gap between a label and its input.
24–32px — Component-to-component spacing. Between two form fields. Between cards in a list.
48–64px — Section-level spacing. Between a heading and its content. Between distinct page sections.
80–96px — Page-level spacing. Above a hero. Between major page sections.
These ranges are not rigid. The principle is that small values belong to small contexts and large values belong to large contexts. A gap that reads as comfortable padding inside a button would look cramped between two sections.
The discipline of staying on-scale
The hard part of a spacing scale is not defining it — it is refusing to break it. The instinct to add 5px because something “looks better with a bit more room” is the instinct that produces inconsistent spacing. If something looks better with a bit more room, the answer is to move to the next scale step — not to add an arbitrary offset.
Staying on-scale is what transforms a collection of well-made components into a system. The components made by different people, at different times, on different screens, feel like they belong together — because they share a spatial vocabulary.
Up next: padding vs margin — what each one controls and when to use which.