Design Systems Add Motion Accessibility Tokens to Support Vestibular Sensitivities

Design · 4 min read

A growing number of enterprises are publishing 'motion tokens' alongside color and spacing tokens to express animation intent—such as 'feedback-pulse', 'slight-dimension-shift', and 'critical-alert-entrance'. Each token includes parameters for duration, easing, and fallback behaviors when users opt into reduced motion settings.

This token-based approach solves a common problem: when designers apply 'reduce motion' globally, some micro-interactions that signal important state changes disappear, harming usability. Motion tokens let systems selectively preserve low-motion but high-clarity transitions (like light crossfades) while disabling decorative parallax and full-screen motion.

Implementation patterns include CSS custom properties for web, platform-specific motion tokens for native apps, and runtime introspection that maps user preference settings to token overrides. Storybook addons and visual regression tests have been updated to render components under both full-motion and reduced-motion modes to catch unintended side effects.

Design leads emphasize pairing tokens with documentation and rationales so engineers understand which animations are essential for comprehension versus purely aesthetic. This documentation also helps QA and accessibility reviewers know which motions must be preserved and why.