Elevation
How things stack, using grey steps and a soft shadow for what floats.
Levels
- Page
- Surface
- Raised card
- Menu
- Overlay
| Level | Used by |
|---|---|
| Surface | Cards and wells, no shadow |
| Raised card | A card that floats |
| Menu | Popover, dropdown, select, combobox |
| Overlay | Dialog, alert dialog, sheet |
Tokens
11 tokens
--shadow-ink- 40 36 20
--shadow-card- 0 1px 2px rgb(var(--shadow-ink) / 0.06), 0 1px 1px rgb(var(--shadow-ink) / 0.04)
--shadow-menu- 0 8px 24px -6px rgb(var(--shadow-ink) / 0.16), 0 2px 6px rgb(var(--shadow-ink) / 0.06)
--shadow-overlay- 0 24px 48px -12px rgb(var(--shadow-ink) / 0.24), 0 4px 12px rgb(var(--shadow-ink) / 0.08)
--thumb- #ffffff
--switch-on- var(--accent)
--switch-on-thumb- var(--thumb)
--shadow-thumb- 0 2px 5px rgb(var(--shadow-ink) / 0.1), 0 1px 1px rgb(var(--shadow-ink) / 0.07), 0 0 0 0.5px rgb(var(--shadow-ink) / 0.1)
--z-dialog- 40
--z-popover- 50
--z-toast- 60