Layout
Spacing
Spacing scale and usage guidelines
Production
Consistent spacing creates visual rhythm and hierarchy. Our spacing scale matches the Tailwind CSS default scale based on a 4px base unit.
Spacing Scale
Our spacing scale is based on a 4px base unit. Every token maps directly to a Tailwind utility class.
| Token | Pixels | Tailwind | Usage |
|---|---|---|---|
0 | 0px | p-0 / gap-0 | - |
px | 1px | p-px / gap-px | - |
0.5 | 2px | p-0.5 / gap-0.5 | - |
1 | 4px | p-1 / gap-1 | - |
1.5 | 6px | p-1.5 / gap-1.5 | - |
2 | 8px | p-2 / gap-2 | - |
2.5 | 10px | p-2.5 / gap-2.5 | - |
3 | 12px | p-3 / gap-3 | - |
3.5 | 14px | p-3.5 / gap-3.5 | - |
4 | 16px | p-4 / gap-4 | - |
5 | 20px | p-5 / gap-5 | - |
6 | 24px | p-6 / gap-6 | - |
7 | 28px | p-7 / gap-7 | - |
8 | 32px | p-8 / gap-8 | - |
9 | 36px | p-9 / gap-9 | - |
10 | 40px | p-10 / gap-10 | - |
11 | 44px | p-11 / gap-11 | - |
12 | 48px | p-12 / gap-12 | - |
14 | 56px | p-14 / gap-14 | - |
16 | 64px | p-16 / gap-16 | - |
20 | 80px | p-20 / gap-20 | - |
24 | 96px | p-24 / gap-24 | - |
28 | 112px | p-28 / gap-28 | - |
32 | 128px | p-32 / gap-32 | - |
36 | 144px | p-36 / gap-36 | - |
40 | 160px | p-40 / gap-40 | - |
44 | 176px | p-44 / gap-44 | - |
48 | 192px | p-48 / gap-48 | - |
52 | 208px | p-52 / gap-52 | - |
56 | 224px | p-56 / gap-56 | - |
60 | 240px | p-60 / gap-60 | - |
64 | 256px | p-64 / gap-64 | - |
72 | 288px | p-72 / gap-72 | - |
80 | 320px | p-80 / gap-80 | - |
96 | 384px | p-96 / gap-96 | - |
Semantic Tokens
Component Spacing
| Token | Value | Tailwind | Use Case |
|---|---|---|---|
| xs | 4px | p-1 | Component padding |
| sm | 8px | p-2 | Component padding |
| md | 16px | p-4 | Component padding |
| lg | 24px | p-6 | Component padding |
| xl | 32px | p-8 | Component padding |
Element Gaps
| Token | Value | Tailwind | Use Case |
|---|---|---|---|
| xs | 2px | gap-0.5 | Element gap |
| sm | 4px | gap-1 | Element gap |
| md | 8px | gap-2 | Element gap |
| lg | 12px | gap-3 | Element gap |
| xl | 16px | gap-4 | Element gap |
Section Spacing
| Token | Value | Tailwind | Use Case |
|---|---|---|---|
| xs | 24px | gap-6 | Section gap |
| sm | 32px | gap-8 | Section gap |
| md | 48px | gap-12 | Section gap |
| lg | 64px | gap-16 | Section gap |
| xl | 96px | gap-24 | Section gap |
Common Patterns
Card layout
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="p-6 rounded-lg">Card content</div>
</div>
Form spacing
<form class="flex flex-col gap-6">
<div class="flex flex-col gap-2">
<label>Field label</label>
<input class="p-3" />
</div>
</form>
Page section
<section class="py-16 px-6">
<div class="container mx-auto flex flex-col gap-8">
Section content
</div>
</section>
Principles
- Use the scale: Avoid arbitrary values; stick to the defined tokens
- Be consistent: Same elements should have same spacing
- Create hierarchy: More important content gets more breathing room
- Consider context: Mobile needs tighter spacing than desktop