Spacing
The spacing scale used for padding, gaps, and layout rhythm.
Unit
Token
Value
Dimension
$spacing-unit-none
0px
$spacing-unit-2
2px
$spacing-unit-4
4px
$spacing-unit-6
6px
$spacing-unit-8
8px
$spacing-unit-10
10px
$spacing-unit-12
12px
$spacing-unit-14
14px
$spacing-unit-16
16px
$spacing-unit-18
18px
$spacing-unit-20
20px
$spacing-unit-24
24px
$spacing-unit-26
26px
$spacing-unit-28
28px
$spacing-unit-32
32px
$spacing-unit-36
36px
$spacing-unit-40
40px
$spacing-unit-48
48px
$spacing-unit-56
56px
$spacing-unit-60
60px
$spacing-unit-64
64px
$spacing-unit-72
72px
$spacing-unit-80
80px
$spacing-unit-88
88px
$spacing-unit-92
92px
$spacing-unit-96
96px
$spacing-unit-104
104px
$spacing-unit-112
112px
$spacing-unit-120
120px
$spacing-unit-140
140px
$spacing-unit-280
280px
Space
Token
Value
Dimension
$spacing-space-none
0px
$spacing-space-3xs
2px
$spacing-space-2xs
4px
$spacing-space-xs
6px
$spacing-space-s
8px
$spacing-space-m
12px
$spacing-space-l
16px
$spacing-space-xl
20px
$spacing-space-2xl
24px
$spacing-space-3xl
32px
$spacing-space-4xl
40px
$spacing-space-5xl
48px
$spacing-space-6xl
56px
$spacing-space-7xl
64px
$spacing-space-8xl
72px
$spacing-space-9xl
80px
$spacing-space-10xl
104px
$spacing-space-11xl
120px
$spacing-space-12xl
140px
$spacing-space-13xl
280px
Breakpoint
Token
Value
Dimension
$spacing-breakpoint-320
320px
$spacing-breakpoint-320-max
359px
$spacing-breakpoint-360
360px
$spacing-breakpoint-360-max
567px
$spacing-breakpoint-568
568px
$spacing-breakpoint-568-max
767px
$spacing-breakpoint-768
768px
$spacing-breakpoint-768-max
1023px
$spacing-breakpoint-1024
1024px
$spacing-breakpoint-1024-max
1271px
$spacing-breakpoint-1272
1272px
$spacing-breakpoint-1272-max
1279px
$spacing-breakpoint-1280
1280px
$spacing-breakpoint-1280-max
1439px
$spacing-breakpoint-1440
1440px
$spacing-breakpoint-1440-max
1727px
$spacing-breakpoint-1728
1728px
$spacing-breakpoint-1728-max
1919px
$spacing-breakpoint-1920
1920px
$spacing-breakpoint-1920-max
3546px