Spacing & scale
A 4px base unit drives a consistent spacing scale. Use 4px for tight gaps (icon-to-text) and 8px and up for structural spacing (form fields, list items, sections).
Base spacing scale
All spacing derives from --spacing: 0.25rem (4px). Bars scale in proportion to value.
Content group coupling
4px within a group, 8px between groups. Elements that read as a single unit (a title and its lead, a label and its value) sit at 4px to signal association. Anything beyond that is structure.
Tight coupling (4px)
The paragraph sits close enough to read as the same thought: one unit, one breath. This is gap-1.
gap-1 · 4px
Loose coupling (8px)
The paragraph feels separated: the right call between groups, the wrong call inside one. This is gap-2.
gap-2 · 8px
Max widths
Width constraints for containers and panels, from small popovers to full page.
Breakpoints
Mobile-first responsive breakpoints. Tailwind defaults, applied as min-width media queries.
Shadow scale
Four elevation levels, from subtle form control depth to modal-level lift.
shadow-xs
Form controls (Input, Select, Checkbox)
shadow-sm
Subtle elevation
shadow-mddefault
Cards, elevated surfaces
shadow-lg
Modals, sheets, dialogs
Border radius
A progressive scale from subtle rounding to fully circular. Each level has a defined usage.
xs
0.125rem
Checkbox, micro elements
sm
0.25rem
Menu items, small controls
md (default)
0.375rem
Form controls, cards
lg
0.5rem
Dialogs, buttons
xl
0.75rem
Drawers, sheets, large panels
2xl
1rem
Feature cards
full
9999px
Badges, pills, switches
Z-index scale
Named layers prevent z-index wars. Each level has a clear purpose.