A spacing scale is a short list of allowed distances for paddings, gaps and margins. Instead of typing any number each time, you pick from the list. Interfaces built this way look calm and consistent, and designers and developers stop arguing about 14 versus 15 pixels.
Why a scale works
- Fewer decisions: choose the next step up or down, not a number between 1 and 100.
- Visible rhythm: the same steps repeat, so the layout feels ordered even when nobody can say why.
- Easy handoff: design and code share the same names and values (space-2, space-4).
- Density for free: a compact mode just uses smaller steps for the same relationships.
The 4 and 8 px grid
Most teams start from a 4 px base: 4, 8, 12, 16, 24, 32, 40, 48 and 64. Small steps (4 to 12) go inside controls and between related items. Larger steps (16 to 48) separate groups and sections. Eight is the workhorse because it divides cleanly, matches common line heights and keeps tap targets in round numbers.
Rules that keep it honest
- Space between things is larger than space inside things, so proximity shows what belongs together.
- Padding is at least as big as the largest gap inside the element.
- The same relationship gets the same step everywhere: every card has the same padding.
- Do not add a 10 or a 14 to fix one screen. If a step feels wrong, the layout is wrong, not the scale.
In Figma
Create spacing variables for the scale and bind auto layout padding and gap to them, so a change in one place reaches every frame. In Preferences, set the nudge amount to 4 (small) and 8 (big) so the arrow keys move in steps of the grid. Select a frame and press Shift + A to add auto layout, then read the padding fields: anything that is not a step is a candidate to snap.
In CSS
Name the steps once as custom properties and use them everywhere:
:root {
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
}
.card {
display: grid;
gap: var(--space-2);
padding: var(--space-6);
}Practice
Snap to Grid gives you five components whose spacing was nudged off the scale and a clock to beat. Snap each padding and gap back to its step, then read why that step fits.