One scale for every gap, inset, and offset. Steps are 4px multiples and the name is the multiplier — space.4 is 16px. The bars below are drawn at the step they name, so the ramp is the scale itself rather than a picture of it.
| Example | Token | Value | Usage |
|---|---|---|---|
space.0 | Collapse a gap deliberately | ||
space.1 | Hairline gaps, icon-to-text | ||
space.1-5 | Icon-side padding on small controls | ||
space.2 | Gaps inside controls | ||
space.3 | Control padding | ||
space.4 | Between related elements | ||
space.5 | Large control padding | ||
space.6 | Between groups | ||
space.8 | Card and block padding | ||
space.10 | Spacious block padding: empty states, feature panels | ||
space.12 | Section separation | ||
space.16 | Page-level separation |