📐 Space

📐 Space

Space

Token and descriptionValue
space-0
Use for resetting default space.
0px
space-1
Use for small and compact pieces of UI.
4px
space-2
Use for small and compact pieces of UI.
8px
space-3
Use for small and compact pieces of UI.
12px
space-4
Use for small and compact pieces of UI.
16px
space-5
Use for larger and less dense pieces of UI.
20px
space-6
Use for larger and less dense pieces of UI.
24px
space-7
Use for larger and less dense pieces of UI.
28px
space-8
Use for larger and less dense pieces of UI.
32px
space-9
Use for larger and less dense pieces of UI.
36px
space-10
Use for larger and less dense pieces of UI.
40px
space-11
Use for larger and less dense pieces of UI.
44px
space-12
Use for larger and less dense pieces of UI.
48px
space-14
Use for larger and less dense pieces of UI.
56px
space-16
Use for larger and less dense pieces of UI.
64px
space-20
Use for larger and less dense pieces of UI.
80px
space-24
Use for the largest pieces of UI and for layout elements.
96px
space-28
Use for the largest pieces of UI and for layout elements.
112px
space-32
Use for the largest pieces of UI and for layout elements.
128px
space-36
Use for the largest pieces of UI and for layout elements.
144px
space-40
Use for the largest pieces of UI and for layout elements.
160px
space-44
Use for the largest pieces of UI and for layout elements.
176px
space-48
Use for the largest pieces of UI and for layout elements.
192px
space-52
Use for the largest pieces of UI and for layout elements.
208px
space-56
Use for the largest pieces of UI and for layout elements.
224px
space-60
Use for the largest pieces of UI and for layout elements.
240px
space-64
Use for the largest pieces of UI and for layout elements.
256px
space-72
Use for the largest pieces of UI and for layout elements.
288px
space-80
Use for the largest pieces of UI and for layout elements.
320px
space-96
Use for the largest pieces of UI and for layout elements.
384px