Spacing
The scale, grid, and layout rules for creating consistent and harmonious designs.
Spacing Scale
Space 1
4px • 0.25rem
Small gaps
Space 2
8px • 0.5rem
Icon padding
Space 3
12px • 0.75rem
Component gaps
Space 4
16px • 1rem
Content padding
Space 6
24px • 1.5rem
Card padding
Space 8
32px • 2rem
Medium section gaps
Space 12
48px • 3rem
Section spacing
Space 16
64px • 4rem
Large section gaps
Space 24
96px • 6rem
Page sections
Grid System
768px Breakpoint
Mobile Grid
Breakpoint:< 768px
Columns:1 column
Gutter:16px
Margin:16px
Max Width:100%
Single column layout for mobile devices
Desktop Grid
Breakpoint:≥ 768px
Columns:12 columns
Gutter:32px
Margin:auto
Max Width:1200px
Full grid system for desktop and tablet experiences