Elevation
Two systems work together to build depth: soft shadows imply lift off the surface, and a fixed z-index ladder keeps overlapping layers in a predictable stacking order.
Shadows
Deliberately soft and low-contrast — elevation should be felt, not seen. Use the semantic --elevation-* tokens in components; the --shadow-* primitives are the raw ramp underneath.
--elevation-1 --shadow-50 Resting lift — always-visible surfaces --elevation-2 --shadow-100 Cards, list items --elevation-3 --shadow-200 Raised cards, hover state --elevation-4 --shadow-300 Dropdowns, popovers, menus --elevation-5 --shadow-400 Modals, dialogs Shadow ramp
The primitive ramp that the elevation tokens alias. Prefer --elevation-* in components; reference --shadow-* only when you need a specific step not covered by the semantic scale.
--shadow-50 --shadow-100 --shadow-200 --shadow-300 --shadow-400 Z-index
Overlay layers reference these tokens instead of ad-hoc numbers, so stacking conflicts can't happen. The order is canonical — tooltips always win.
| Token | Value | Layer |
|---|---|---|
--z-dropdown | 50 | Menus, comboboxes |
--z-sidebar | 100 | App sidebar |
--z-header | 200 | Sticky header / topbar |
--z-modal-backdrop | 300 | Dialog scrim |
--z-modal | 400 | Dialog surface |
--z-toast | 500 | Toasts / notifications |
--z-tooltip | 600 | Tooltips (always on top) |