Motion tokens in Tailwind. Choreographed.

Without tokens, every component picks its own animation duration. The dropdown takes 150ms; the modal takes 300ms; the page transition takes 400ms; the toast notification takes 250ms. None of these were decided systematically; each was chosen at the moment by whoever built the component. The aggregate effect is a product that feels uneven, with motion behavior that varies arbitrarily between surfaces. Users do not consciously notice, but the product reads as less polished.

With tokens, motion is a named system. Quick 100ms applies to toggles, switches, focus rings, and other immediate feedback. Snappy 200ms applies to hovers, button presses, small UI confirmations. Smooth 350ms applies to modals appearing, drawers sliding, tooltips fading in. Deliberate 600ms applies to page transitions, hero element reveals, large surface changes. Every component references one of the four; no component invents its own number.

The cognitive load drops for everyone. Designers do not debate whether the hover should be 180ms or 220ms; they pick snappy. Engineers do not ask the designer; they use duration-snappy. Code reviews do not have "why is this duration 280ms" comments. The system absorbs the small decisions.

Reference: Material 3 motion tokens document the same pattern. Apple Human Interface Guidelines on motion covers the platform-aware version for iOS. Both are studied references when scoping a custom system.

The universal "feels right" curve is cubic-bezier(0.2, 0.7, 0.2, 1). It accelerates quickly out of the start, holds a fast middle, then decelerates softly into the end. The asymmetric shape (heavy front, soft back) matches how physical objects move under impulse plus friction; it is the curve the eye expects.

For elements entering the scene (modals appearing, drawers sliding in, content fading in), use ease-out or its equivalent cubic-bezier(0, 0, 0.2, 1). The motion starts fast and decelerates; the eye perceives the element "arriving" rather than "approaching." For elements exiting (modals closing, drawers retracting, content fading out), use ease-in or cubic-bezier(0.4, 0, 1, 1). The motion starts slow and accelerates; the eye perceives the element "leaving fast." The asymmetry between entering (decelerate-in) and exiting (accelerate-out) is the convention; reversing it feels strange.

Linear is reserved for continuous motion: spinners, progress bars, marquees, infinite carousels. The constant velocity is correct for repeating motion and would feel wrong for any one-time transition. Avoid ease-in-out for hovers and short transitions; the slow-fast-slow shape makes the motion feel mushy, especially at 200ms or less. easings.net visualizes the common named curves; cubic-bezier.com lets you craft and preview custom curves.

Brand personality maps to easing in subtle ways. A "deliberate, considered" brand reads as slightly longer durations (350 to 600ms) with the standard cubic-bezier curve. A "fast, energetic" brand reads as shorter durations (100 to 200ms) with a sharper accelerating curve like cubic-bezier(0.4, 0, 0.2, 1). The differences are small in absolute terms but accumulate across hundreds of interactions in a product.

Operating systems let users signal they prefer reduced motion. On macOS: System Settings, Accessibility, Display, Reduce motion. On iOS: Settings, Accessibility, Motion, Reduce Motion. On Windows: Settings, Ease of Access, Display, Show animations. On Android: Settings, Accessibility, Remove animations. The browser exposes this preference via the prefers-reduced-motion media query.

The web app must respect the preference. WCAG 2.2 SC 2.3.3 (Animation from Interactions) requires that any non-essential motion can be disabled. Implementation: wrap every transition declaration in a @media (prefers-reduced-motion: no-preference) block so the animation only applies when motion is allowed, or add an override @media (prefers-reduced-motion: reduce) block that drops all transition-duration to about 0.01s. Avoid 0s exactly; some scripts watch transitionend events and 0 duration never fires the event.

Tailwind exposes motion-safe and motion-reduce variants. The motion-safe variant applies a class only when no preference is set; the motion-reduce variant applies only when reduce is requested. Pattern: class="motion-safe:transition-all motion-safe:duration-smooth motion-reduce:transition-none". Components declare their motion safely without per-component @media queries.

The accessibility audit will check this. axe-core, Lighthouse, and most third-party audit tools flag missing prefers-reduced-motion support. A production design system has to ship with the motion-safe and motion-reduce variants baked into every animated component, or the audit fails. The cost is one extra utility class per declaration; the benefit is no audit fines and a better experience for the 5 to 10 percent of users (estimates vary) who have the preference set. Related reading: Color system WCAG compliance, Brand book vs design system, Modular type scale guide.