Spacing

The spacing scale is based on a 4px base unit. Tokens are named by their multiplier (1 = 4px, 2 = 8px, etc.) to keep the mental model simple.

Scale

px · 1px

0.5 · 2px

1 · 4px

1.5 · 6px

2 · 8px

2.5 · 10px

3 · 12px

3.5 · 14px

4 · 16px

5 · 20px

6 · 24px

7 · 28px

8 · 32px

10 · 40px

12 · 48px

16 · 64px

20 · 80px

24 · 96px

Use case	Token	Value
Component inner padding (small)	`--mk-spacing-2`	8px
Component inner padding (default)	`--mk-spacing-4`	16px
Component inner padding (large)	`--mk-spacing-6`	24px
Gap between inline elements	`--mk-spacing-2`	8px
Gap between stacked sections	`--mk-spacing-8`	32px
Page horizontal padding	`--mk-spacing-6`	24px
Page section gap	`--mk-spacing-12`	48px