Spacing

Our spacing scale for consistent margins, padding, and gaps throughout the application.

Space XS
4px • Icon padding
4px
Width/Height
w-1
Padding
p-1 h
Margin
m-1 h
Space SM
8px • Tight UI spacing
8px
Width/Height
w-2
Padding
p-2 h
Margin
m-2 h
Space MD
16px • Default spacing
16px
Width/Height
w-4
Padding
p-4 h
Margin
m-4 h
Space LG
32px • Section gaps
32px
Width/Height
w-8
Padding
p-8 h
Margin
m-8 h
Space XL
64px • Large section separation
64px
Width/Height
w-16
Padding
p-16 h
Margin
m-16 h
Space XXL
96px • Hero sections
96px
Width/Height
w-24
Padding
p-24 h
Margin
m-24 h
Spacing Examples

Padding

Content with p-4 (16px) padding

Margin

First element
Second element with mb-4 (16px) margin above

Gap (Flexbox/Grid)

Item 1
Item 2
Item 3
Spacing Guidelines

Consistency: Use the spacing scale consistently throughout the application. Avoid using arbitrary spacing values.

Responsive Spacing: Consider using responsive spacing utilities (e.g., p-4 md:p-8) for better mobile experiences.

Component Spacing: Use smaller spacing (XS, SM) within components and larger spacing (LG, XL, XXL) between sections.