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.