Skip to content
UX Atlas
Plate FND·042 · UI foundationGrid C1 · Rev. 2026-08-14

Spacing Systems

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

UI foundationCraft conventionFoundational

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 plate
  1. 1Definition
  2. 2A working scale
  3. 3Rules that make a spacing system hold
  4. 4Keeping a spacing system intact
  5. 5In practice
  6. 6Local chart
  7. 7Continue from here

Reach for this when

  • Starting a design system.
  • Auditing a product for inconsistent spacing.
  • Building density variants.
  • A layout looks unsettled and the elements are individually correct.

Common mistakes

  • Too many steps, which reintroduces the decision.
  • Inner space equal to or larger than outer space.
  • Physical properties that break under right-to-left layouts.
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.

Keeping a spacing system intact

Do

  • Derive every gap from the scale, including the awkward ones.
  • Name steps by size rather than by use, so one step can serve several purposes.
  • Use fewer, larger steps at the top of the scale, where precision stops mattering.
  • Apply space with a single direction convention, so margins do not fight.

Do not

  • Add a one-off value to fix a single component.
  • Use every step. A scale with twelve steps and six in use is a scale with six steps.
  • Set spacing per component, which guarantees drift within a quarter.

In practice

  1. i.

    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.

  2. ii.

    Messy layout, spacing diagnosis

    The usual root cause

    Most layouts that read as untidy are not misaligned, they are spaced with values that have no relationship to each other. Replacing eleven arbitrary gaps with four scale steps fixes the impression without moving anything else.

Local chart

FND·042 · Region II · Grid C1

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Aesthetic-Usability EffectLAW·011 · PRINCIPLES BEHIND THISFitts's LawLAW·002 · PRINCIPLES BEHIND THISLaw of PrägnanzLAW·017 · PRINCIPLES BEHIND THISGridsFND·039 · OFTEN USED WITHChoosing a Density for an Analytics DashboardCASE·004 · PRACTICAL EXAMPLEDesign TokenTERM·071 · SHORT DEFINITIONGutterTERM·069 · SHORT DEFINITIONInternationalization (i18n)TERM·135 · SHORT DEFINITIONRight-to-Left (RTL)TERM·137 · SHORT DEFINITIONWhitespaceTERM·055 · SHORT DEFINITIONTarget SizeA11Y·011 · RELATED CONCEPTDesign TokensSYS·001 · RELATED CONCEPT

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.

  • GridsFND·039 · UI 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.