Shadows

Six elevation levels, used sparingly. Shadow is how we show a thing has been picked up — never how we show a thing is important.

The scale

Elevation 1 – 6

The scale is compound — each step is a soft near-shadow plus a longer far-shadow. Together they model a light source ~30° above the screen.

Flat chips, inline tokens.

--shadow-1

Cards at rest, list rows.

--shadow-2

Hover on cards, segmented controls.

--shadow-3

Dropdowns, tooltips, date pickers.

--shadow-4

Popovers, floating toolbars.

--shadow-5

Modals, sheets, drag preview.

--shadow-6

Spec

Level

Token

Value

Preview

--shadow-1

0 1 2 · 6%

--shadow-2

0 2 4 · 6% + 0 1 2 · 4%

--shadow-3

0 4 8 · 6% + 0 2 4 · 4%

--shadow-4

0 8 16 · 8% + 0 4 8 · 4%

--shadow-5

0 16 32 · 10% + 0 8 16 · 4%

--shadow-6

0 24 48 · 14% + 0 12 24 · 6%

Rules

Use the lowest level that reads as lifted.

A card hovering on a card is almost always the wrong model — flatten one of them.

Step up one level on hover.

Card at 02 → 03 on hover. Dropdown item at 00 → muted fill on hover, not a shadow.

Don't

Stack the same shadow on adjacent surfaces.

Two 04-level elements side by side flatten visually. Pick one focal surface.

Don't

Invent new shadow values.

If the scale doesn't fit, propose a new token in #design-system. Don't ship custom values.