Motion tokens

Motion tokens are named values for the timings a product repeats: durations, easing curves, delays, and sometimes spring settings. Instead of scattering 180ms and cubic-bezier strings through components, a design system exposes names such as duration-fast and ease-enter that describe a shared motion language. Material Design 3 publishes exactly this, with duration tokens running from short1 to extra-long4 alongside standard and emphasized easing; IBM's Carbon splits its curves into productive and expressive.

Reach for them when several teams or components need to feel related. A small scale is enough: fast for direct state changes, base for overlays, slow for large spatial moves, plus enter, exit, and move curves. CSS custom properties make the tokens available to plain CSS and let a reduced-motion media query replace them in one place.

Gotcha: tokens are defaults, not a command to give a tooltip and a full-screen drawer the same duration. Name them by purpose rather than raw value, document exceptions for distance and size, and do not create a new token for every component. A scale nobody can remember is still hardcoded motion with extra steps.