Motion design

Motion design in a design system is the set of duration, easing and choreography rules — usually expressed as tokens (duration-fast, easing-emphasised) — that make interfaces feel alive without becoming chaotic. The tokens are consumed by transition utilities, animation hooks and state changes throughout the component library.

A coherent motion system answers the boring questions designers shouldn't have to debate per-component: how fast does a tooltip appear? Does a modal slide or fade? What's the easing curve for hover? It also handles accessibility — prefers-reduced-motion should disable or soften animation by default, per WCAG 2.3.3.

Related: Foundations · Design tokens · Semantic tokens · Accessible design