Spacing
Consistent spacing scale used for padding, margins, and gaps throughout the site.
Spacing Scale
Space 0
…
--space-0
Space 1
…
--space-1
Space 2
…
--space-2
Space 3
…
--space-3
Space 4
…
--space-4
Space 5
…
--space-5
Space 6
…
--space-6
Space 8
…
--space-8
Space 10
…
--space-10
Space 12
…
--space-12
Space 16
…
--space-16
Space 20
…
--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.