Open DS

Spacing

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

View all 8 spacing tokens ↓

The reasons this scheme answers from

  • R1Content and dataImages and campaigns, one idea at a time
  • R2BrandBold, loud

Question 1

Which spacing roles does it need?

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

Why Brand expressive picks it: Few tables; no row role needed.

becauseR1

gap0.5rem · 1rem · 2.5rem · 6rem
inset1.75rem · 2rem · 1rem
row3.25rem

Question 2

How many densities exist?

  • One (chosen)
  • Two

Why Brand expressive picks it: One generous density.

becauseR1

space6
size1

Question 3

How are spacing steps defined?

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

Why Brand expressive picks it: Big, even steps make big moments.

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 Brand expressive picks it: Big space makes big moments.

becauseR1

  • gap
    tight
    → space.8
    default
    → space.16
    group
    → space.40
    section
    → space.96
  • inset
    control-x
    → space.28
    container
    → space.32
    cell-x
    → space.16
  • row
    row
    → size.52

Question 5

Where does spacing matter most?

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

Why Brand expressive picks it: Space works between big sections.

becauseR1

  • 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. Air keeps big type readable.
  • Between page sectionsUse: space.gap.section and a color block. Not: A thin line. Big space and color make each section a moment.
  • Table row heightUse: size.row (comfortable). Not: A compact row. Rare tables stay airy.

All spacing tokens

8 tokens · each decision and the primitive it points to

  • space · 6space.80.5rem · 8pxspace.161rem · 16pxspace.402.5rem · 40pxspace.966rem · 96pxspace.281.75rem · 28pxspace.322rem · 32px
  • size · 1size.523.25rem · 52px
  • Decisions · 8space.gap.tight{space.8}space.gap.default{space.16}space.gap.group{space.40}space.gap.section{space.96}space.inset.control-x{space.28}space.inset.container{space.32}space.inset.cell-x{space.16}size.row{size.52}

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

Spacing in Brand expressive: spacious. Big space makes big moments. Space works between big sections.