Space

Spacing tokens make it easy to configure a component's padding, margin, or position. Consistent spacing promotes a visual balance that helps make UIs more digestible and scannable.


4px

8px

12px

16px

24px

32px

48px

64px

160px

This scale operates on a 4px baseline, with each variant being a multiple of that baseline. Any spacing larger than 800 should be multiples of 16px or 400.
Spacing 00rem0px
spacing_0
Spacing 1000.25rem4px
spacing_100
Spacing 2000.5rem8px
spacing_200
Spacing 3000.75rem12px
spacing_300
Spacing 4001rem16px
spacing_400
Spacing 4501.25rem20px
spacing_450
Spacing 5001.5rem24px
spacing_500
Spacing 5501.75rem28px
spacing_550
Spacing 6002rem32px
spacing_600
Spacing 6502.5rem40px
spacing_650
Spacing 7003rem48px
spacing_700
Spacing 7503.5rem56px
spacing_750
Spacing 8004rem64px
spacing_800
Spacing 90010rem160px
spacing_900