Spacing
Consistent spacing help create visual balance and harmony in a UI.
Our spacing values based on a 4px grid because our UI can typically be more dense than other web products. Using a grid with smaller increments gives us more flexibility.
Instead of deciding from over 24 tokens to choose from, we've scoped them down into a smaller collection you can use. See our spacing tokens for our sportsbook and casino products.
Name
Figma usage
Current value
--spacing-0
0px
0rem
--spacing-1px
1px
0.063rem
--spacing-2px
2px
0.125rem
--spacing-1
4px
0.25rem
--spacing-2
8px
0.5rem
--spacing-3
12px
0.75rem
--spacing-4
16px
1rem
--spacing-5
20px
1.25rem
--spacing-6
24px
1.5rem
--spacing-7
28px
1.75rem
--spacing-8
32px
2rem
--spacing-9
36px
2.25rem
--spacing-10
40px
2.5rem
--spacing-11
44px
2.75rem
--spacing-12
48px
3rem
--spacing-13
52px
3.25rem
--spacing-14
56px
3.5rem
--spacing-15
60px
3.75rem
--spacing-16
64px
4rem
--spacing-17
68px
4.25rem
--spacing-18
72px
4.5rem
--spacing-19
76px
4.75rem
--spacing-20
80px
5rem
--spacing-21
84px
5.25rem
--spacing-22
88px
5.5rem
--spacing-23
92px
5.75rem
--spacing-24
96px
6rem