Elevation
Elevation shows what sits on top of what. coach-admin had 225 different shadows; the system has six, all in the same ink, and nine named layers instead of 44 z-index values.
Shadows
shadow-xsOutline buttons, inputs: a hint of depth on a flat surface.
shadow-smCards at rest, segmented controls.
shadow-mdCards on hover, sticky table headers when scrolled.
shadow-lgDropdown menus, popovers, sheets.
shadow-xlDialogs.
shadow-2xlLarge overlays such as the command palette or onboarding.
- A shadow means the surface is above the page: it floats, it can move, or it covers something. Don't add shadows for decoration.
- Higher surfaces get larger shadows. A menu (
shadow-lg) opened from a card (shadow-sm) reads as above it. - On a colored or dark surface, rely on borders and contrast, not shadows.
Layers
Use a named layer, never a raw number: z-(--z-modal), not z-50.
| Layer | Use |
|---|---|
base | Normal flow |
raised | An item lifted within its group |
sticky | Sticky headers, sticky table headers |
dropdown | Menus and select lists |
overlay | The scrim behind dialogs and sheets |
modal | Dialogs and sheets |
popover | Popovers and tooltips. Above modals, so they also work inside a dialog |
toast | Toasts, above everything the app owns |
max | Third-party widgets only, such as Intercom |
Related: Motion, Shadow tokens, Z-index tokens.