Spacing
Space is how a screen breathes. Generous, consistent spacing lets a first-time user scan a screen and find the one thing that matters — cramped layouts make everything feel equally urgent, which means nothing stands out.
The scale
One 4-based scale, referenced by its value. Use multiples of it for padding, gaps, and margins so rhythm stays consistent across every screen.
How to use it
- Inside a control (button, input padding):
8–16. - Between related items (a label and its value):
4–8. - Between separate blocks (cards, sections):
16–24. - Around the screen edge:
16–20minimum, so content never touches the bezel.
Reach for the next step on the scale rather than a one-off number — 20 not 19.
When NOT to
- ❌ Don't invent off-scale values (
13,17) — that's how rhythm drifts and screens start to feel slightly "off". - ❌ Don't pack a screen tight to fit more in. On a small screen, fewer things with more space beats more things crammed together.
What user problem this solves
Scanning and focus. A low-literacy, first-time user reads a screen by shape before words. Consistent space groups what belongs together and separates what doesn't, so the eye lands on the next action instead of getting lost in a wall of equally-spaced text.
Empty space isn't wasted space — it's what makes the one important thing obvious. Resist the urge to fill it.