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 token-selection guidance, see Choosing design tokens.
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 | — |