Elevation
Shadow tokens for depth and hierarchy.
Elevation scale
Six steps from a subtle lift to a floating overlay, plus shadow-status for status dots.
shadow-sm --elevation-sm
inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1px 0px #00000033, 0px 1px 3px 0px #00000024 shadow-base --elevation-base
inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1.5px 0px #00000029, 0px 2px 5px 0px #00000024 shadow-md --elevation-md
inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1.5px 0px #00000026, 0px 0px 6px 2px #0000000a, 0px 6px 12px -2px #00000014 shadow-lg --elevation-lg
inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1.5px 0px #0000002e, 0px 0px 6px 3px #00000008, 0px 18px 22px -6px #0000001a shadow-xl --elevation-xl
inset 0px 0.25px 1.5px 0px #ffffff29, 0px 0px 1px 0px #00000033, 0px 0px 10px 2px #0000000a, 0px 24px 30px -8px #0000001a shadow-2xl --elevation-2xl
inset 0px 0.25px 2px 0px #ffffff29, 0px 0px 1.5px 0px #00000040, 0px 0px 10px 2px #00000008, 0px 44px 52px -10px #0000001aSurface pairing
In dark mode, shadows fade against dark backgrounds, so depth comes from a lighter surface instead. The surface-elevation-* tokens handle this: they stay white in light mode and step lighter in dark mode. Pair shadows with these tokens rather than raw surface-gray-* so one class works in both themes.
Pairings used by the components:
| Use case | Surface | Shadow |
|---|---|---|
| Resting card, active nav item | surface-elevation-3 | shadow-sm / shadow-base |
| Dialog, Popover | surface-elevation-2 | shadow-xl |
| Dropdown, Select, floating menu | surface-elevation-2 | shadow-2xl |