Spacing units

Spacing throughout our design system utilizes Spacing Units to inform spacing, including margins and padding for both horizontal and vertical rhythms. It aligns with our 4px/8px baseline grid, providing a single measurement unit that works holistically across our design assets.

Spacing unit Rem Pixels Design Token
0.25 0.125rem 2px $size-spacing-2
0.5 0.25rem 4px $size-spacing-4
1 0.5rem 8px $size-spacing-8
1.5 0.75rem 12px $size-spacing-12
2 1rem 16px $size-spacing-16
3 1.5rem 24px $size-spacing-24
4 2rem 32px $size-spacing-32
5 2.5rem 40px $size-spacing-40
6 3rem 48px $size-spacing-48
7 3.5rem 56px $size-spacing-56
8 4rem 64px $size-spacing-64
11 5.5rem 88px $size-spacing-88
15 7.5rem 120px $size-spacing-120

Table of Contents

Edit this section, Opens in new window
Contact us, Opens in new window