Spacing

Spacing scale and border radius tokens for consistent layouts.

Spacing scale

Based on a 4px base unit. Use for margin, padding, gap, and sizing.

Name	Value	Class examples
0	0px	p-0, m-0, gap-0
px	1px	p-px, m-px, gap-px
0.5	2px	p-0.5, m-0.5, gap-0.5
1	4px	p-1, m-1, gap-1
1.5	6px	p-1.5, m-1.5, gap-1.5
2	8px	p-2, m-2, gap-2
2.5	10px	p-2.5, m-2.5, gap-2.5
3	12px	p-3, m-3, gap-3
3.5	14px	p-3.5, m-3.5, gap-3.5
4	16px	p-4, m-4, gap-4
5	20px	p-5, m-5, gap-5
6	24px	p-6, m-6, gap-6
7	28px	p-7, m-7, gap-7
8	32px	p-8, m-8, gap-8
9	36px	p-9, m-9, gap-9
10	40px	p-10, m-10, gap-10
12	48px	p-12, m-12, gap-12
14	56px	p-14, m-14, gap-14
16	64px	p-16, m-16, gap-16

Common patterns

Component spacing

gap-2 (8px) - Between form elements

gap-4 (16px) - Between sections

gap-6 (24px) - Between major blocks

Padding

p-2 (8px) - Compact buttons

p-4 (16px) - Cards, inputs

p-6 (24px) - Page sections

Border radius

Consistent corner rounding across components.

Class	Value	Usage
rounded-none	0px	Square corners
rounded-sm	2px	Subtle rounding
rounded	4px	Default rounding
rounded-md	6px	Buttons, inputs
rounded-lg	8px	Cards, dialogs
rounded-xl	12px	Large cards
rounded-2xl	16px	Hero sections
rounded-full	9999px	Pills, avatars

Usage

{/* Spacing */}
<div className="p-4">Padded content</div>
<div className="space-y-4">Vertical stack</div>
<div className="flex gap-2">Horizontal items</div>

{/* Border radius */}
<button className="rounded-md">Button</button>
<div className="rounded-lg">Card</div>
<span className="rounded-full">Badge</span>

{/* Combined */}
<Card className="p-6 rounded-lg">
  <div className="space-y-4">
    <Input className="rounded-md" />
    <Button className="rounded-md">Submit</Button>
  </div>
</Card>