Foundations
Spacing
4px base scale, plus a micro tier most systems skip.
A 4px base scale, with two micro tiers below it (space-px and space-2xs)
for the 1–2px adjustments a 4px grid alone can't express cleanly — hairline
borders, icon-to-label gaps in dense chrome.
space-px
1px
space-2xs
2px
space-xs
4px
space-sm
6px
space-md
8px
space-lg
12px
space-xl
16px
space-2xl
20px
space-3xl
24px
space-4xl
32px
space-5xl
40px
space-6xl
48px
space-7xl
64px
space-8xl
80px
space-9xl
96px
space-10xl
128px
Usage
Spacing tokens aren't exposed as arbitrary Tailwind values — use the
matching standard utility instead (gap-1 = 4px = space-xs, p-4 = 16px =
space-xl, etc.), since Tailwind's own 4px-based scale already lines up
with these steps one-to-one. The token names above exist for the Figma ↔
code mapping, not as a separate utility set to memorize.