Spacing

The spacing scale is a modular scale of values stored as SASS variables.

Spacing Scale

These values are used for vertical spacing, padding and margins of all components within this UI Kit.

XSmall

Size: 0.25rem / 4px
SASS: spacing(1)

Small

Size: 0.5rem / 8px
SASS: spacing(2)

Default

Size: 1rem / 16px
SASS: spacing(3)

Medium

Size: 1.5rem / 24px
SASS: spacing(4)

Large

Size: 3rem / 48px
SASS: spacing(5)

XLarge

Size: 4rem / 64px
SASS: spacing(6)

2XLarge

Size: 5rem / 80px
SASS: spacing(7)

3XLarge

Size: 6.5rem / 104px
SASS: spacing(8)

4XLarge

Size: 8rem / 128px
SASS: spacing(9)

Further Reading