Spacing scale

A spacing scale is a short list of allowed gaps, built from one base value such as 4 or 8 pixels.

Why it matters

Consistent spacing reads as order. Random gaps make even good designs look busy.

In practice

  • Pick one base value.
  • Use multiples of it everywhere.
  • Keep one value inside each card.

The UI sizing guideAll 42 terms

Related terms

Mobile-first design

Mobile-first design starts with the phone screen and adds to it for larger screens, instead of squeezing a desktop page down.

Learn the term

Nested border radius

The nested border-radius rule says an inner corner's radius should equal the outer radius minus the padding between them.

Learn the term

Touch targets

A touch target is the tappable area of a button, link or control.

Learn the term

Want this done for you?

Spacing scale is part of a normal project here. Tell me where you are and I'll suggest the first three fixes.

Book a 20-minute call