Spacing
Spacing tokens define the distances, padding, gaps, and structural dimensions used throughout the system.
- Scale — The base pixel scale that all spacing tokens reference (e.g.
scale/4=4px). - Layout — Semantic spacing tokens for padding, gap, layout heights, and screen size breakpoints.
For layout and spacing usage guidelines, see the Spacing and Layout foundations page.
Base scale
The underlying numeric scale. All semantic spacing tokens map to a step on this scale.
26 tokens
| Name | Type | Value | Description |
|---|---|---|---|
scale/0 | FLOAT | 0px | — |
scale/1 | FLOAT | 1px | — |
scale/10 | FLOAT | 10px | — |
scale/12 | FLOAT | 12px | — |
scale/14 | FLOAT | 14px | — |
scale/16 | FLOAT | 16px | — |
scale/18 | FLOAT | 18px | — |
scale/2 | FLOAT | 2px | — |
scale/20 | FLOAT | 20px | — |
scale/22 | FLOAT | 22px | — |
scale/24 | FLOAT | 24px | — |
scale/28 | FLOAT | 28px | — |
scale/32 | FLOAT | 32px | — |
scale/36 | FLOAT | 36px | — |
scale/4 | FLOAT | 4px | — |
scale/40 | FLOAT | 40px | — |
scale/48 | FLOAT | 48px | — |
scale/56 | FLOAT | 56px | — |
scale/6 | FLOAT | 6px | — |
scale/64 | FLOAT | 64px | — |
scale/72 | FLOAT | 72px | — |
scale/8 | FLOAT | 8px | — |
scale/80 | FLOAT | 80px | — |
scale/88 | FLOAT | 88px | — |
scale/96 | FLOAT | 96px | — |
scale/9999 | FLOAT | 9999px | — |
Padding, gap, layout, and screen sizes
50 tokens
| Name | Type | Value | Description |
|---|---|---|---|
| gap | |||
gap/2xl | STRING | var(--scale-16) | — |
gap/3xl | STRING | var(--scale-20) | — |
gap/4xl | STRING | var(--scale-24) | — |
gap/default/content/row | STRING | var(--gap-sm) | — |
gap/lg | STRING | var(--scale-8) | — |
gap/md | STRING | var(--scale-6) | — |
gap/none | STRING | var(--scale-0) | — |
gap/sm | STRING | var(--scale-4) | — |
gap/xl | STRING | var(--scale-12) | — |
gap/xs | STRING | var(--scale-2) | — |
| layout | |||
layout/height/contained/lg | STRING | var(--scale-20) | — |
layout/height/contained/md | STRING | var(--scale-16) | — |
layout/height/contained/sm | STRING | var(--scale-12) | — |
layout/height/contained/xl | STRING | var(--scale-24) | — |
layout/height/contained/xs | STRING | var(--scale-8) | — |
layout/height/standard/2xl | STRING | var(--scale-56) | — |
layout/height/standard/3xl | STRING | var(--scale-64) | — |
layout/height/standard/4xl | STRING | var(--scale-72) | — |
layout/height/standard/5xl | STRING | var(--scale-80) | — |
layout/height/standard/lg | STRING | var(--scale-40) | — |
layout/height/standard/md | STRING | var(--scale-32) | — |
layout/height/standard/sm | STRING | var(--scale-24) | — |
layout/height/standard/xl | STRING | var(--scale-48) | — |
layout/height/standard/xs | STRING | var(--scale-16) | — |
| padding | |||
padding/10xl | STRING | var(--scale-48) | — |
padding/11xl | STRING | var(--scale-56) | — |
padding/2xl | STRING | var(--scale-12) | — |
padding/3xl | STRING | var(--scale-14) | — |
padding/4xl | STRING | var(--scale-16) | — |
padding/5xl | STRING | var(--scale-20) | — |
padding/6xl | STRING | var(--scale-24) | — |
padding/7xl | STRING | var(--scale-32) | — |
padding/8xl | STRING | var(--scale-36) | — |
padding/9xl | STRING | var(--scale-40) | — |
padding/default/containers | STRING | var(--padding-lg) | — |
padding/lg | STRING | var(--scale-8) | — |
padding/md | STRING | var(--scale-6) | — |
padding/none | STRING | var(--scale-0) | — |
padding/sm | STRING | var(--scale-4) | — |
padding/xl | STRING | var(--scale-10) | — |
padding/xs | STRING | var(--scale-2) | — |
| screensize | |||
screensize/2xl | FLOAT | 1536px | — |
screensize/2xs | FLOAT | 320px | — |
screensize/desktop/max | FLOAT | 1960px | — |
screensize/desktop/min | FLOAT | 1400px | — |
screensize/lg | FLOAT | 1024px | — |
screensize/md | FLOAT | 768px | — |
screensize/sm | FLOAT | 640px | — |
screensize/xl | FLOAT | 1280px | — |
screensize/xs | FLOAT | 376px | — |