Elevation & motion

Depth is mostly tonal — a card on a page, a slot in a card — and shadows are five named levels; motion is three durations and two curves, named by what moves.

Elevation

	Token	Value	What it is for
	elevation/flat	0px 1px 2px 0px #0000000d	Input, Table light, the flat card — a hairline of depth
	elevation/card	0px 24px 48px -12px #0000002e	Card, the deck table, the dark Table — a card lifted from the page
	elevation/floating	0px 24px 64px 0px #1510511f	Select menu, Tooltip, a hovered blog card — floating over content
	elevation/modal	0px 32px 64px 0px #00000024	Dialog, Alert dialog — over the scrim
	elevation/bar	0px 32px 64px 0px #00000024	Deprecated — an alias of elevation/modal, which the Navigation menu wears; removed in the next major

Motion

Token	Value	What it is for
duration/instant	50ms	instant — a press, a toggle
duration/fast	150ms	fast — motion/state: hover, focus, colour
duration/medium	200ms	medium — motion/move: a panel, a row
duration/slow	250ms	slow — motion/menu: a menu, a popover
duration/slower	300ms	slower — reserved; nothing moves on it yet
easing/standard	cubic-bezier(0.25, 0.1, 0.25, 1)	motion/easing, everything that changes in place
easing/decelerate	cubic-bezier(0.16, 1, 0.3, 1)	motion/easing-enter, things arriving: a menu, a sheet, a toast

On the Figma page

The five cards carry the five effect styles — the value under each is read from the style at build time. The bars’ widths are bound to the duration variables (1px = 1ms) so the scale is the token. Which duration a component uses: hover, focus and colour changes take motion/state; a panel moving takes motion/move, a sheet motion/menu; a menu opening takes motion/menu with easing-enter.

The same page in the Figma library: Elevation & motion.