Tokens

Shadow

Geometry and color are separate tokens, and only the color follows the theme. Switch themes in the sidebar and watch these hold their weight.

The ladder

Four steps. Every one above xs is two layers: a tight direct shadow over a wide, soft ambient one, which is what makes it read as cast rather than painted on.

What each is for

Pick by how far the thing is meant to float, not by how dark you want it.

shadow.xsResting card, separation only

shadow.sRaised: a hovered card, a small menu

shadow.mFloating: dropdown, popover, tooltip, toast

shadow.lOverlay: dialog, drawer

Cast upward

Use shadow.up for anything pinned to the bottom of the screen, where content passes above it and a downward shadow lands on nothing.

up.xs

up.s

up.m

up.l

The ink is 0.08 / 0.14 on light and 0.48 / 0.72 on dark. The six-fold jump is what puts the dark theme back at roughly the separation the light one gets for free.