Spacing System

Spacing Scale

Our spacing system uses a 4px base unit. Here's the visual scale:

xs (4px)

0.25rem

sm (8px)

0.5rem

md (16px)

1rem

lg (24px)

1.5rem

xl (32px)

2rem

2xl (48px)

3rem

3xl (64px)

4rem

---

Padding Examples

sm (8px)

p-2

md (16px)

p-4

lg (24px)

p-6

xl (32px)

p-8

---

Gap Examples

gap-2 (8px)

gap-4 (16px)

gap-6 (24px)

---

Usage in Code

Tailwind CSS

// Padding
<div className="p-4">16px padding</div>
<div className="px-6 py-4">24px horizontal, 16px vertical</div>

// Margin
<div className="m-4">16px margin</div>
<div className="mt-8 mb-4">32px top, 16px bottom</div>

// Gap (flexbox/grid)
<div className="flex gap-4">16px gap between items</div>
<div className="grid gap-6">24px grid gap</div>

---

Reference

Token	Tailwind	Pixels	Rem	Common Use
xs	1	4px	0.25rem	Icon gaps, tight spacing
sm	2	8px	0.5rem	Inline elements, small gaps
md	4	16px	1rem	Standard padding, margins
lg	6	24px	1.5rem	Card padding, section gaps
xl	8	32px	2rem	Section margins
2xl	12	48px	3rem	Large section spacing
3xl	16	64px	4rem	Page-level spacing

---

Spacing tokens are configured in Tailwind. See tailwind.config.js for customization.