Motion and shadow

Motion

Token	Value	Use
motion.duration.fast	120ms	Feedback to a press or hover: must feel instant.
motion.duration.normal	200ms	Something appearing or changing place.
motion.duration.slow	320ms	Large surfaces: sheets, full panels.
motion.easing.standard	cubic-bezier(0.2, 0, 0, 1)	Moving between two places on screen.
motion.easing.enter	cubic-bezier(0, 0, 0, 1)	Arriving: starts fast, settles.
motion.easing.exit	cubic-bezier(0.3, 0, 1, 1)	Leaving: starts slow, gets out of the way.
motion.press-scale	0.97	How far a button shrinks while it is pressed. Feedback that does not depend on color.
motion.spring.default.stiffness	700
motion.spring.default.damping	0.9
motion.spring.fast.stiffness	1400
motion.spring.fast.damping	0.9

Shadow

A shadow is written as offset x, offset y, blur, spread, then its color.

Token	Value	Use
shadow.subtle	0px 1px 2px 0px, #000000 at 6%	Cards and outlined controls: just enough to lift them off the page. Drawn together with a hairline border.
shadow.raised	0px 4px 16px 0px, #000000 at 12%	Menus and dialogs. Paired with background.raised, which carries the elevation in dark mode.
shadow.overlay	0px 12px 32px 0px, #000000 at 35%	Dialogs and sheets, which sit above everything else on the screen.