Spacing

Space is the horizontal and vertical distance between, inside or around different design elements.

Design Token

Desktop Value (px / rem)

Mobile Value (px / rem)

spacing-0

0px / 0rem

0px / 0rem

spacing-50

5px / 0.313rem

5px / 0.313rem

spacing-100

10px / 0.625rem

8px / 0.5rem

spacing-150

15px / 0.938rem

10px / 0.625rem

spacing-200

20px / 1.25rem

15px / 0.938rem

spacing-300

30px / 1.875rem

20px / 1.25rem

spacing-400

40px / 2.5rem

30px / 1.875rem

spacing-500

50px / 3.125rem

30px / 1.875rem

spacing-600

60px / 3.75rem

40px / 2.5rem

spacing-800

80px / 5rem

60px / 3.75rem

spacing-1000

100px / 6.25rem

80px / 5rem

spacing-1200

120px / 7.5rem

100px / 6.25rem

spacing-1500

150px / 9.375rem

120px / 7.5rem

spacing-1800

180px / 11.25rem

150px / 9.375rem

spacing-2000

200px / 12.5rem

180px / 11.25rem