Foundations · Space16 tokens · 0 → 80 px
Space is how Dew breathes.
A 4 px base scale for every margin, padding, and gap.
PrinciplesHow to use space
Space communicates relationships.
Tight space groups related content. Generous space separates distinct sections. The 4 px base keeps every gap on the same rhythm, even when layouts grow dense.
Do this
Stay on the scale
Reference var(--spacing-200) for a 16 px gap — every component agrees on what 200 means.
Don't
Invent in-between values
No 13 px, 37 px, or 19 px gaps. The scale is 0 · 2 · 4 · 6 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 56 · 64 · 72 · 80.
Scale16 tokens · click to copy
The space scale.
In componentsWhere space lands
Applied.
Item label
Inline gap · --spacing-100 (8 px)
Between an icon and its label, or two chips in a row.
Card title
Supporting body copy lives one step in.
Card padding · --spacing-300 (24 px)
Inner breathing room for cards, panels, and modals.
Section A
Section B
Section break · --spacing-800 (64 px)
Between distinct sections on a page or settings panel.