Open DS

Spacing

Five questions every design system answers about spacing. These are Accessible first’s answers, and each one points back to the reasons that chose it.

View all 8 spacing tokens ↓

The reasons this scheme answers from

  • R1People and work contextEveryone, including people with disabilities, AAA
  • R2Human factorsLow effort to understand, they see it fresh each time
  • R3Content and dataForms and tasks, one idea at a time

Question 1

Which spacing roles does it need?

  • Gaps and insets
  • Gaps, insets and row heights (chosen)

Why Accessible first picks it: Large rows matter for touch and zoom.

becauseR1

gap0.75rem · 1rem · 2rem · 3rem
inset1.5rem · 1.5rem · 1rem
row3.5rem

Question 2

How many densities exist?

  • One (chosen)
  • Two

Why Accessible first picks it: One density; no compact mode to fail people.

becauseR1

space5
size1

Question 3

How are spacing steps defined?

  • A fine base unit
  • A coarse base unit (chosen)

Why Accessible first picks it: Big, even steps lower effort.

becauseR2

  • A coarse base unit
  • from space
  • from size

Decisions point at primitives, so the rule lives in one place.

Question 4

How dense is the layout?

  • Compact
  • Comfortable
  • Spacious (chosen)

Why Accessible first picks it: Space lowers effort and mis-taps.

becauseR2

  • gap
    tight
    → space.12
    default
    → space.16
    group
    → space.32
    section
    → space.48
  • inset
    control-x
    → space.24
    container
    → space.24
    cell-x
    → space.16
  • row
    row
    → size.56

Question 5

Where does spacing matter most?

  • Rows and cells
  • Between paragraphs
  • Between fields (chosen)
  • Between big sections

Why Accessible first picks it: Space between fields prevents mis-taps.

becauseR3

  • button · 1 keys
  • input · 1 keys
  • badge · 1 keys
  • card · 1 keys
  • table · 2 keys

When to use

  • Items that belong togetherUse: space.gap.default. Not: space.gap.tight. Generous space lowers mis-taps.
  • Between page sectionsUse: space.gap.section. Not: A thin line. Space is easy to see; thin lines are not.
  • Table row heightUse: size.row (large). Not: A compact row. Large rows are easy to read and tap.

All spacing tokens

8 tokens · each decision and the primitive it points to

  • space · 5space.120.75rem · 12pxspace.161rem · 16pxspace.322rem · 32pxspace.483rem · 48pxspace.241.5rem · 24px
  • size · 1size.563.5rem · 56px
  • Decisions · 8space.gap.tight{space.12}space.gap.default{space.16}space.gap.group{space.32}space.gap.section{space.48}space.inset.control-x{space.24}space.inset.container{space.24}space.inset.cell-x{space.16}size.row{size.56}

Decisions reference primitives, so changing one primitive updates every decision and component that uses it.

Spacing in Accessible first: spacious. Space lowers effort and mis-taps. Space between fields prevents mis-taps.