8-Point Grid: How to Build a Spacing System in UI Design

What the 8pt grid is and why it matters

The 8pt grid is an agreement that all spacing, padding and element sizes in an interface are multiples of 8: 8, 16, 24, 32, 48, 64 and so on. For small details, a half step of 4pt is added.

Why limit yourself:

• Visual rhythm. When distances repeat, a layout looks put together, even if viewers cannot explain why.
• Fewer decisions. Instead of choosing between 13, 14 and 15 pixels, the designer picks from a short scale.
• Easy handoff. The scale becomes a handful of tokens, and random margin: 13px values stop appearing in code.
• Scaling. 8 divides cleanly by 2 and 4, so values stay whole on screens with different pixel densities.

How a spacing scale is built

In practice, teams do not use every multiple of 8, only a limited set of steps. A typical scale:

The proximity rule: the more closely elements are related, the smaller the space between them. A card title sits closer to its text than to the neighboring card.

Padding, margins and line height

• Padding. A 48-high button with 16 on each side is the classic example. Set heights in multiples of 8 and center the text.
• Margin and gap. Take the distance between elements from the scale instead of eyeballing it.
• Line height. Make it a multiple of 4 or 8 as well: 24px works for 16px text, 20px for 14px. Lines then sit on a baseline grid and text blocks align with neighboring elements.

Why you sometimes need 4pt: small text, badges, 16–20px icons and dense tables do not fit an 8 step. The half step covers these cases without breaking the system.

How to apply it in Figma

1. Set the nudge amount. In Figma preferences you can set the Shift-nudge to 8, so objects move along the grid.
2. Add a layout grid. A square 8px grid on the frame helps at the start; you can hide it later.
3. Use Auto Layout. Set padding and gap only to values from the scale, and components keep the rhythm on their own.
4. Create variables. In Figma Variables, add a space collection with number values and bind them to padding and gaps instead of typing numbers by hand.
5. Check components. Heights of buttons, inputs and table rows should also be multiples of 4 or 8.

How to hand the system to developers

A spacing scale is a set of design tokens. Define them once and use them everywhere:

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
}

.card {
  padding: var(--space-3);
  gap: var(--space-2);
}

What to agree on with the team:

• The same token names in Figma and in code.
• Units. Code often uses rem, so 8px = 0.5rem with a 16px base size.
• No arbitrary values. A linter or code review helps catch spacing outside the scale.

Common mistakes

• A scale that is too long. With twenty steps, the system no longer simplifies choices.
• Grid for spacing only. If element heights and line heights are random, the rhythm still breaks.
• Forcing font sizes onto the grid. Font size does not have to be a multiple of 8; line height does.
• Exceptions without rules. Optical adjustments are fine, but document them instead of letting them multiply.