Motion

Short, quiet, always easing out, never bouncing. A reduced-motion setting zeroes all four durations.

120ms

fast, for hovers, presses and every exit

160ms

overlay, for every entrance: dialogs, drawers, menus, popovers and toasts

200ms

base, for toggles, chevrons, tabs and disclosures

320ms

slow, for a surface that takes over the page: the tour, the lightbox

Everything eases out, so it slows as it arrives. A surface with no anchor fades in and rises 4px; a panel anchored to a control comes out of that control, 4px from the side it sits on. Every surface leaves on a shorter fade. Nothing scales or bounces when pressed.