Elevation
A border separates two surfaces at rest. A shadow only appears when something is floating — popover, modal, toast. We earn each shadow.
Five levels
Resting cards use a hairline border, not a shadow. Hover may add a barely-there shadow. Anything that overlays the page wears its own depth.
Rest
--shadow-none
Hover
--shadow-hover
Popover
--shadow-popover
Modal
--shadow-modal
Toast
custom
In use
Real surfaces at each elevation.
Card · rest
Today's revenue
$ 2,816.40
+ 12% vs Tue avg
Popover
Quick actions
Open invoice
Print receipt
Void this sale
Modal
Close shift
This will reconcile cash and lock the till. You can't reopen a closed shift.
Toast
Receipt R-19281 printed
Tokens
| Token | Value | Used for |
|---|---|---|
| --shadow-none | none | Default. Cards and panels at rest. |
| --shadow-rest | 0 1px 0 / .04 | The faintest cue for raised buttons. |
| --shadow-hover | 0 2px 4px / .06 | Hover on interactive cards. |
| --shadow-popover | 0 12px 32px / .18 | Popovers, dropdowns, autocomplete. |
| --shadow-modal | 0 24px 64px / .24 | Modal dialogs only. |
Do & don't
Do
Use a hairline border to separate two adjacent surfaces. It does the work of a shadow without the visual cost.
Don't
Shadow every card. Twelve floating cards on a page makes nothing important.
Do
Reserve --shadow-modal for true modal dialogs that block the page.
Don't
Use shadows to imply hover. We use a background-color shift instead — it's faster and clearer.