Primitives

Spacing

A 4px base grid. All padding, margin, and gap values should align to this scale. Tailwind utility classes map directly to these steps.

Scale

Each step is a multiple of 4px. Decimals (0.5, 1.5, 2.5, 3.5) fill in the gaps for fine-grained component internals.

0

0px

0rem

0.5

2px

0.125rem

1

4px

0.25rem

1.5

6px

0.375rem

2

8px

0.5rem

2.5

10px

0.625rem

3

12px

0.75rem

3.5

14px

0.875rem

4

16px

1rem

5

20px

1.25rem

6

24px

1.5rem

7

28px

1.75rem

8

32px

2rem

9

36px

2.25rem

10

40px

2.5rem

12

48px

3rem

14

56px

3.5rem

16

64px

4rem

20

80px

5rem

24

96px

6rem

28

112px

7rem

32

128px

8rem

Usage guidelines

Component internals (padding, icon gaps) typically use 1–6 (4px–24px). Layout spacing (section gaps, content margins) uses 8–32 (32px–128px).

Component padding

3–6 (12–24px)

Button, Input, Badge

Component gap

1–3 (4–12px)

Icon + label, avatar + name

Section spacing

10–20 (40–80px)

Page sections, cards

Layout margin

16–32 (64–128px)

Page gutters, hero padding