Open DS

Spacing

Five questions every design system answers about spacing. These are Multi-brand’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 dataForms and tasks, a moderate amount
  • R2Business and productSells and converts, many
  • R3Tasks and flowsComplete a form, sometimes

Question 1

Which spacing roles does it need?

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

Why Multi-brand picks it: Account tables need a row height.

becauseR1

gap0.5rem · 0.75rem · 1.5rem · 3rem
inset1rem · 1.5rem · 1rem
row3rem

Question 2

How many densities exist?

  • One (chosen)
  • Two

Why Multi-brand picks it: One density across brands.

becauseR2

space5
size1

Question 3

How are spacing steps defined?

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

Why Multi-brand picks it: A fine base unit fits every brand.

becauseR2

  • A fine 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 (chosen)
  • Spacious

Why Multi-brand picks it: Comfortable spacing in every brand.

becauseR1

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

Question 5

Where does spacing matter most?

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

Why Multi-brand picks it: Space matters most between form fields.

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: Brand-specific spacing. Spacing is shared across brands.
  • Between page sectionsUse: space.gap.section and cards. Not: Lines. Cards group offers in every brand.
  • Table row heightUse: size.row (comfortable). Not: A compact row. Comfortable rows in every brand.

All spacing tokens

8 tokens · each decision and the primitive it points to

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

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

Spacing in Multi-brand: comfortable. Comfortable spacing in every brand. Space matters most between form fields.