Spacing and shape
A 4px spacing grid, modest rounding and deliberate elevation. Group related information without shrinking readable text.
Spacing scale
--space-10.25rem--space-20.5rem--space-30.75rem--space-41rem--space-51.25rem--space-61.5rem--space-82rem--space-102.5rem--space-123rem--space-164rem--space-246rem--space-328remShape
--radius12px--radius-sm4px--radius-md8px--radius-xl16px--radius-btn6px--radius-pill9999pxElevation
Depth starts with surface contrast. Use shadows for raised panels and overlays, with hover lift on interactive cards.
--shadow-sm--shadow-md--shadow-lg--shadow-card-hoverControl density
Default buttons and fields align at 36px with a fine pointer. Coarse pointers keep at least 44px targets. Labels, help text and focus indicators need space even in a compact layout.