Foundation

Spacing

Spacing and dimension tokens used across layouts, components, and breakpoints.

sg-spacing-none

0rem · 0px

sg-spacing-xs

0.4rem · 4px

sg-spacing-2xs

0.8rem · 8px

sg-spacing-sm

1.2rem · 12px

sg-spacing-md

1.6rem · 16px

sg-spacing-lg

2rem · 20px

sg-spacing-xl

2.4rem · 24px

sg-spacing-2xl

2.8rem · 28px

sg-spacing-3xl

3.2rem · 32px

sg-spacing-4xl

3.6rem · 36px

sg-spacing-5xl

4rem · 40px

sg-spacing-6xl

4.8rem · 48px

sg-spacing-7xl

5.6rem · 56px

sg-spacing-8xl

6.4rem · 64px

sg-spacing-9xl

7.2rem · 72px

sg-spacing-10xl

8rem · 80px