Spacing

Consistent spacing scale used for padding, margins, and gaps throughout the site.

Spacing Scale

Space 0

0px

space-0

Space 1

4px

space-1

Space 2

8px

space-2

Space 3

12px

space-3

Space 4

16px

space-4

Space 5

20px

space-5

Space 6

24px

space-6

Space 8

32px

space-8

Space 10

40px

space-10

Space 12

48px

space-12

Space 16

64px

space-16

Space 20

80px

space-20

Padding Examples

p-3 (12px)
p-6 (24px)
p-8 (32px)

Gap Examples

gap-2 (8px)

gap-4 (16px)

gap-6 (24px)

Usage Guidelines

Consistent Spacing

Always use the spacing scale to maintain visual consistency. Avoid arbitrary spacing values outside this scale.

Component Margins

Use consistent margins between components. Typically space-4 (16px) for sections, space-6 (24px) for major sections.

Responsive Spacing

Increase spacing on larger screens. Use Tailwind responsive prefixes (sm:, md:) to adjust spacing at breakpoints.