Shadows
Five elevation steps, all tinted with the warm-neutral 900 hue. Never use shadows on a colour darker than surface-base — it produces mud.
Scale
shadow-xs
--shadow-xs
shadow-sm
--shadow-sm
shadow-md
--shadow-md
shadow-lg
--shadow-lg
shadow-xl
--shadow-xl
When to use
Elevation maps to interactivity.
- xs — flat cards in a list.
- sm — primary buttons.
- md — hover lift on cards & buttons.
- lg — popovers, dropdown menus.
- xl — modals, command palettes.