Spacing

Foundation

The base unit and scale each system publishes.

Systems to compare (up to 4)

Showing 4. Turn one off to add another.

Show system

SGDSSingapore

A 4-point system

Sizes: 4, 8, 12, 16, 20, 24, 32, 48, 64, 96 and 128 px.
Principles: alignment, flexibility and uniformity.

SGDS, Spacing

Design-system conventionVerified 7 Oct 2026

GOV.UK

A 5 px based scale that responds

Static scale: 5, 10, 15, 20, 25, 30, 40, 50, 60 px.
The responsive scale uses smaller values on small screens for the larger steps: 60 becomes 40, 30 becomes 20.

GOV.UK Design System, Spacing

Design-system conventionVerified 7 Oct 2026

Atlassian

An 8 px base unit, as space tokens

space.100 is 8 px, the base unit.
The scale: 0, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64 and 80 px.
0 to 8 px for small and compact pieces of UI.
12 to 24 px for larger and less dense pieces of UI.
32 to 80 px for the largest pieces of UI and layout.

Atlassian Design System, Spacing

Design-system conventionVerified 8 Oct 2026

Carbon

Multiples of two, four and eight

Thirteen steps, $spacing-01 to $spacing-13: 2, 4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96 and 160 px.
The scale is built on multiples of two, four and eight.
Deviating from the spacing scale should be avoided whenever possible.

Carbon, Spacing

Design-system conventionVerified 8 Oct 2026

Not yet read on this topic: Material, Apple, Primer, USWDS. Nothing is shown for a system until its own page has been read.

Shortcut takeaway

Base units differ: 4, 5 and 8 px all ship in large systems, and all work. Staying on one scale matters more than which one. GOV.UK shrinking large gaps on small screens is worth copying whatever your scale.

Across the systems

Craft guidance

Shortcut’s reading of the columns above. It covers every system read on this topic, not only the ones showing, and is not a rule from any of them.

Common themes

A short, fixed list of values. All five publish between 9 and 17 steps, not a formula.
Steps widen as values grow: small steps at the bottom of each scale, large jumps at the top.
16, 24, 32, 48 and 64 px appear in the SGDS, Atlassian and Carbon scales.

Differences

Base unit: SGDS and Fluent use 4 px. GOV.UK's scale is based on 5 px. Atlassian's base unit is 8 px.
Naming: Atlassian's names track the value, so space.100 is 8 px and space.200 is 16 px. Carbon numbers its steps in order.
Only GOV.UK's page describes a scale that changes with screen size.
Atlassian is the only one that says which part of the scale suits which size of UI. Fluent is the only one that gives the same ramp for iOS, Android and the web.
Not read on this topic: Material, Apple, Primer and USWDS.

These sources do not carry equal weight

Standard requirement.: A testable criterion in a published standard. Whether it is legally required depends on your jurisdiction and contract.
Government control.: A control the issuing government expects its agencies and their partners to apply. It does not bind other organisations.
Design-system convention.: How one design system does it. Binding only on teams that have adopted that system.
Research-based best practice.: Advice drawn from usability research. Persuasive, not mandatory.
Industry convention.: A range many shipping products use. Written by Shortcut; no standard or organisation requires it.
Craft guidance.: Judgement of the kind given in design review. Written by Shortcut; reasonable designers may disagree.