Spacing
Five questions every design system answers about spacing. These are Dense data’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 dataNumbers and records, a lot
- R2Tasks and flowsScan and compare, constantly
Question 1
Which spacing roles does it need?
- Gaps and insets
- Gaps, insets and row heights (chosen)
Why Dense data picks it: Row height is a decision of its own in a table product.
becauseR1
Question 2
How many densities exist?
- One
- Two (chosen)
Why Dense data picks it: A second, denser size serves tables and toolbars.
becauseR2
Question 3
How are spacing steps defined?
- A fine base unit (chosen)
- A coarse base unit
Why Dense data picks it: A fine base unit gives the small steps dense screens need.
becauseR1
- 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 (chosen)
- Comfortable
- Spacious
Why Dense data picks it: Compact spacing shows more records.
becauseR1
- gap
- tight
- → space.4
- default
- → space.8
- group
- → space.16
- section
- → space.24
- inset
- control-x
- → space.12
- container
- → space.16
- cell-x
- → space.12
- row
- row
- → size.32
Question 5
Where does spacing matter most?
- Rows and cells (chosen)
- Between paragraphs
- Between fields
- Between big sections
Why Dense data picks it: Space is spent inside rows and cells.
becauseR2
- button · 1 keys
- input · 1 keys
- badge · 1 keys
- card · 1 keys
- table · 2 keys
When to use
- Items that belong togetherUse: space.gap.tight. Not: space.gap.group. Things that belong together sit close.
- Between page sectionsUse: space.gap.section and a hairline. Not: A card around every section. Lines separate without taking room from the data.
- Table row heightUse: size.row (compact). Not: The comfortable row. Compact rows show more records without scrolling.
All spacing tokens
8 tokens · each decision and the primitive it points to
- space · 5
space.40.25rem · 4pxspace.80.5rem · 8pxspace.161rem · 16pxspace.241.5rem · 24pxspace.120.75rem · 12px - size · 1
size.322rem · 32px - Decisions · 8
space.gap.tight{space.4}space.gap.default{space.8}space.gap.group{space.16}space.gap.section{space.24}space.inset.control-x{space.12}space.inset.container{space.16}space.inset.cell-x{space.12}size.row{size.32}
Decisions reference primitives, so changing one primitive updates every decision and component that uses it.
Spacing in Dense data: compact. Compact spacing shows more records. Space is spent inside rows and cells.