FoundationsShipped
Elevation
One shadow. Surfaces are flat; only things that float above text get lifted.
Flat
A hairline and paper. Cards, figures, shots: no shadow.
--shadow-popPopovers, menus, dialogs, toasts and the tool dock.
Show code
<div class="card d-w-sm"><b>Flat</b><p>A hairline and paper. Cards, figures, shots: no shadow.</p></div>
<div class="pop d-static d-w-sm"><b>--shadow-pop</b>Popovers, menus, dialogs, toasts and the tool dock.</div>| Token | Value | Role | Status |
|---|---|---|---|
--shadow-pop | 0 18px 40px -22px rgba(22,22,22,.28)0 18px 40px -18px rgba(0,0,0,.7) dark | The only elevation. Reserved for things that float above text: popovers, menus, dialogs, the tool dock. | Shipped |
Do
Lift only what overlaps content: if it can cover a sentence, it gets --shadow-pop.
Don't
Use shadow for hover on cards or buttons - a darker border or fill carries the affordance. Device frames have no bezel and no shadow, just a 2px hairline.