Spacing
Five questions every design system answers about spacing. These are Content 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
- R1Content and dataLong-form text, one idea at a time
- R2OutcomesReading comfort, losing your place
Question 1
Which spacing roles does it need?
- Gaps and insets (chosen)
- Gaps, insets and row heights
Why Content first picks it: No dense tables, so no row role.
becauseR1
Question 2
How many densities exist?
- One (chosen)
- Two
Why Content first picks it: One calm density.
becauseR1
Question 3
How are spacing steps defined?
- A fine base unit
- A coarse base unit (chosen)
Why Content first picks it: Big, even steps suit long reading.
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 Content first picks it: Room around the text helps reading.
becauseR2
- gap
- tight
- → space.8
- default
- → space.16
- group
- → space.32
- section
- → space.64
- inset
- control-x
- → space.20
- container
- → space.24
- cell-x
- → space.16
- row
- row
- → size.48
Question 5
Where does spacing matter most?
- Rows and cells
- Between paragraphs (chosen)
- Between fields
- Between big sections
Why Content first picks it: Space is spent between paragraphs and 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. Text needs air even inside a group.
- Between page sectionsUse: space.gap.section, no line. Not: A divider line. Space alone separates sections; lines add noise.
- Table row heightUse: size.row (comfortable). Not: A compact row. Rows are read, not scanned.
All spacing tokens
8 tokens · each decision and the primitive it points to
- space · 6
space.80.5rem · 8pxspace.161rem · 16pxspace.322rem · 32pxspace.644rem · 64pxspace.201.25rem · 20pxspace.241.5rem · 24px - size · 1
size.483rem · 48px - Decisions · 8
space.gap.tight{space.8}space.gap.default{space.16}space.gap.group{space.32}space.gap.section{space.64}space.inset.control-x{space.20}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 Content first: spacious. Room around the text helps reading. Space is spent between paragraphs and sections.