Foundations
Elevation
Six levels, flat (0) to highest overlay (5). Elevation communicates stacking order and interactivity — it is not decoration.
Scale
--shadow-0
--shadow-1
--shadow-2
--shadow-3
--shadow-4
--shadow-5
When to use each level
| Token | When to use it |
|---|---|
| --shadow-0 | Flat — default resting state for most surfaces |
| --shadow-1 | Cards and rows at rest |
| --shadow-2 | Hover state on a card or button |
| --shadow-3 | Dropdowns, popovers, tooltips |
| --shadow-4 | Modals, dialogs |
| --shadow-5 | The single highest overlay on screen at once |
Usage rules
| Rule | Detail |
|---|---|
| One highest layer | Only one element on screen uses --shadow-5 at a time — if two things compete for it, one is wrong. |
| Elevation implies interactivity | Raising a shadow on hover signals "this is clickable." Don’t apply it to static content. |
| Pair with motion | Elevation changes transition using --duration-fast, never instantly. |
Showing static fallback rules — add a "Foundation" document in Sanity Studio with slug elevation to manage the usage rules above from the CMS.