8-point spacing grid
Space things in multiples of 8 (and 4 for fine tuning) to keep layouts consistent.
Why it matters
Most design systems space things in multiples of 4 or 8. Training your eye to see 16 vs 24 vs 32 is what makes layouts feel consistent.
Spacing you can name is spacing you can repeat. Designers who think in tokens (8, 16, 24, 32) ship more consistent UIs.
An 8pt grid uses multiples of 8 (with 4 for fine tuning). It divides cleanly across screen densities and keeps decisions fast.
How to apply it
- Define spacing tokens: 4, 8, 16, 24, 32, 48, 64
- Use the same tokens in design and in code
- Train your eye to recognise common gaps
Common mistakes
- Random values like 13px or 27px
- Different spacing on identical components
Quick answers
What is 8-point spacing grid?
Space things in multiples of 8 (and 4 for fine tuning) to keep layouts consistent. Most design systems space things in multiples of 4 or 8. Training your eye to see 16 vs 24 vs 32 is what makes layouts feel consistent.
How do I apply 8-point spacing grid in UI design?
Define spacing tokens: 4, 8, 16, 24, 32, 48, 64. Use the same tokens in design and in code. Train your eye to recognise common gaps.
What are common mistakes with 8-point spacing grid?
Random values like 13px or 27px. Different spacing on identical components.