Spacing & Layout
A comprehensive spacing system built on a 4px/8px grid for consistent layouts across all breakpoints. Includes spacing scale, layout widths, border radius, durations, and typography metrics.
Spacing Scale
31 spacing values from 0px to 256px
Layout Sizes
Container and max-width values for responsive layouts
Mobile width
Small container
Medium container
Large container
Extra large
Prose width
Tablet width
Medium desktop
Default content
Wide content
Max content
Border Radius
9 radius values for consistent corner rounding
Duration / Animation
8 timing values for transitions and animations
Micro interactions
Quick feedback
Default transitions
Standard animations
Smooth transitions
Emphasis animations
Complex animations
Long animations
Line Heights
6 line height multipliers for typography
Text only, no extra space
Headings, compact text
Slightly compact
Body text default
Comfortable reading
Maximum readability
Font Weights
9 font weight values from thin (100) to black (900)
8px Grid System
All spacing values are multiples of 4px, with 8px as the base unit. This ensures visual consistency and alignment across all elements.