Spacing
A base-4 spacing scale with 22 primitive tokens and responsive semantic tokens for consistent rhythm across all viewports.
Primitives
Spacing Scale
All spacing values follow a base-4 progression. The 50 step is the base for increments of 2 and 6.
Reference
Primitive Tokens
All 22 spacing primitives with their rem and pixel values.
| Token | REM | Pixels | Visual |
|---|
Responsive
Semantic Spacing Tokens
These tokens alias to different primitives depending on the breakpoint, providing responsive spacing without media queries in Figma.
| Token | Mobile (390px) | Tablet (768px) | Desktop (1440px) | Usage |
|---|---|---|---|---|
padding-xl |
space80 (80px) | space96 (96px) | space128 (128px) | Hero sections, major content breaks |
padding-l |
space64 (64px) | space80 (80px) | space96 (96px) | Section padding (large) |
padding-m |
space40 (40px) | space48 (48px) | space64 (64px) | Section padding (medium) |
margin |
space16 (16px) | space24 (24px) | space52 (52px) | Page margin / grid offset |
Visual
Responsive Tokens Compared
How each semantic token resolves at the three canonical breakpoints.
Mobile 390px
padding-xl · 80px
padding-l · 64px
padding-m · 40px
margin · 16px
Tablet 768px
padding-xl · 96px
padding-l · 80px
padding-m · 48px
margin · 24px
Desktop 1440px
padding-xl · 128px
padding-l · 96px
padding-m · 64px
margin · 52px