Spacing

Consistent spacing tokens for margins, padding, and gaps throughout the design system.

p-4 (16px padding)

p-6 (24px padding)

p-8 (32px padding)

Code

Usage

// Padding
<div className="p-4">Padding all sides</div>
<div className="px-4 py-2">Padding horizontal and vertical</div>

// Margin
<div className="m-4">Margin all sides</div>
<div className="mb-6">Margin bottom</div>

// Gap (for flexbox/grid)
<div className="flex gap-4">Items with gap</div>

// Custom heights
<button className="h-9">Default button</button>

Reference

Spacing Scale

Space 0

No spacing

0px0

p-0

Space 1

Tight spacing

4px0.25rem

p-1

Space 2

Small spacing

8px0.5rem

p-2

Space 3

Default spacing

12px0.75rem

p-3

Space 4

Medium spacing

16px1rem

p-4

Space 6

Large spacing

24px1.5rem

p-6

Space 8

Extra large spacing

32px2rem

p-8

Space 12

Section spacing

48px3rem

p-12

Space 16

Large section spacing

64px4rem

p-16

Space 20

Hero spacing

80px5rem

p-20

Custom Heights

h-8

32px

Small button height

h-9

36px

Default button height

h-11

44px

Large button height

Usage Guidelines

When to Use

Use spacing tokens consistently throughout your UI. Smaller values (1-4) work well for tight layouts and component internals. Medium values (6-8) are ideal for sections and card padding. Large values (12-20) create breathing room between major sections.

Custom height tokens (h-8, h-9, h-11) are specifically designed for button components to ensure consistent sizing across the design system.

Best Practices

Use the spacing scale (multiples of 4px) for consistency
Prefer padding for component internals
Use margin for spacing between components
Use gap for flexbox and grid layouts
Maintain visual rhythm with consistent spacing

Rhetoric-ds