Deprecated - contains information about version 17 of the IDS librarySeedesign.if.eufor the latest documentation

Spacing

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