Motion
Three transition durations cover every animation in the system. Each value is an easing-plus-duration shorthand so components can apply a single token.
Reduced motion
All transitions respect the user's prefers-reduced-motion setting. When reduced motion is requested by the system, components fall back to instant state changes with no animation.
transition-fast
--transition-fast · 150ms ease
Hover state changes, icon swaps, focus rings
transition-normal
--transition-normal · 200ms ease
Toggles, switches, small surface transitions
transition-slow
--transition-slow · 300ms ease
Overlays, accordions, larger surface movement
Hover any row above to see the duration applied to a translating square.