Foundations
Radii & elevation
Subtle corners, restrained shadows. We use elevation to signal layering and focus, not to invent visual richness.
Radii
none
0
Tables, hard dividers
xs
2px
Tight chips
sm
4px
Inputs, badges
md
6px
Default · buttons, cards
lg
8px
Containers
xl
12px
Modals, large cards
2xl
16px
Hero panels
full
9999px
Pills, avatars
Elevation
Five steps from flat to floating. Use sparingly — flat is usually correct in dense tools.
xs
--shadow-xs
Hairline lift
sm
--shadow-sm
Cards on bg
md
--shadow-md
Dropdowns, popovers
lg
--shadow-lg
Modals
xl
--shadow-xl
Toasts, focused dialogs