Spacing
Our spacing system provides consistent spacing for all interface elements.
Spacing Scale
0
0rem / 0px
p-0, m-0
0.5
0.125rem / 2px
p-0.5, m-0.5
1
0.25rem / 4px
p-1, m-1
1.5
0.375rem / 6px
p-1.5, m-1.5
2
0.5rem / 8px
p-2, m-2
2.5
0.625rem / 10px
p-2.5, m-2.5
3
0.75rem / 12px
p-3, m-3
3.5
0.875rem / 14px
p-3.5, m-3.5
4
1rem / 16px
p-4, m-4
5
1.25rem / 20px
p-5, m-5
6
1.5rem / 24px
p-6, m-6
7
1.75rem / 28px
p-7, m-7
8
2rem / 32px
p-8, m-8
9
2.25rem / 36px
p-9, m-9
10
2.5rem / 40px
p-10, m-10
11
2.75rem / 44px
p-11, m-11
12
3rem / 48px
p-12, m-12
14
3.5rem / 56px
p-14, m-14
16
4rem / 64px
p-16, m-16
20
5rem / 80px
p-20, m-20
24
6rem / 96px
p-24, m-24
28
7rem / 112px
p-28, m-28
32
8rem / 128px
p-32, m-32
Section Spacing
Section Small
2rem / 32px - Compact spacing for footers and utility sections
py-8
Section Medium
4rem / 64px - Default spacing for standard content sections
py-16
Section Large
6rem / 96px - Comfortable spacing for important sections
py-24
Section Extra Large
8rem / 128px - Hero spacing for landing pages and major CTAs
py-32
Spacing Examples
Padding Examples
p-2 (0.5rem / 8px)
p-4 (1rem / 16px)
p-6 (1.5rem / 24px)
p-8 (2rem / 32px)
Margin Examples
mb-2 (0.5rem / 8px)
Content below
mb-4 (1rem / 16px)
Content below
mb-6 (1.5rem / 24px)
Content below
Usage Guidelines
Consistent Spacing
Always use our spacing scale to maintain consistency across the interface. Avoid arbitrary values.
Section Spacing
Use section spacing classes for consistent vertical rhythm between major content sections.
Component Spacing
Use smaller spacing values (2-8) for internal component spacing and larger values (12-32) for section spacing.
Responsive Spacing
Use responsive spacing classes (e.g., py-8 md:py-16) to adjust spacing for different screen sizes.