Skip to content
UX Atlas
UI foundationCraft conventionFoundational

Spacing Systems

A fixed set of spacing values, so every gap in the product comes from the same vocabulary.

Definition

A spacing system defines the permitted values for margin, padding and gap, usually as multiples of a 4px or 8px base. It turns spacing from a per-instance judgement into a selection from a known set.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this page
  1. Definition
  2. A working scale
  3. Rules that make a spacing system hold
  4. In practice
  5. Continue from here
space-14pxspace-28pxspace-312pxspace-416pxspace-624pxspace-832pxspace-1248pxspace-1664pxInner space is alwaysone step smaller thanthe space around a group.
A 4px base scale. Small steps are linear for fine control inside components, and larger steps grow faster for layout separation.

A working scale

TokenValueTypical use
space-14pxIcon to label, tightest possible relationship.
space-28pxLabel to input, inside small components.
space-312pxCompact component padding.
space-416pxDefault component padding, gap between related items.
space-624pxBetween field groups, card padding.
space-832pxBetween components.
space-1248pxBetween sections.
space-1664pxBetween major page regions.
space-2496pxMarketing section separation.

Rules that make a spacing system hold

  • Space inside a group is always at least one step smaller than space around it. This is proximity, encoded.
  • Skip steps for meaningful difference. Adjacent steps look like inconsistency rather than intent.
  • Use logical properties, such as margin-block and padding-inline, so layouts mirror correctly for right-to-left languages.
  • Prefer gap on a flex or grid parent over margins on children. It removes the last-child margin problem entirely.
  • Do not create a separate scale for each component. One scale, consumed everywhere.

In practice

Spacing as the diagnosis for messy layouts

Design review

Most layouts described as untidy contain a dozen distinct spacing values. Mapping them onto a five-value scale usually resolves the problem without changing anything else.

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Applies when you are designing

A CheckoutA Data TableA FormAn Enterprise WorkflowAuthenticationNavigationSettings

Principles behind this

The reasoning this solution is an application of.

Often used with

These usually appear in the same screen or the same decision.

  • GridsUI foundation

    A grid without a spacing scale produces alignment with no rhythm.

Practical example

A worked decision where this was the deciding factor.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.