Motion
Motion is purposeful — durations short enough to feel responsive, easings that match the physical world. Always honor prefers-reduced-motion.
Duration
| Token | Value | Use |
|---|---|---|
instant | 0ms | Toggles, immediate state changes. |
micro | 150ms | Hover/focus state changes. |
short | 200ms | Default for most interactions. |
medium | 300ms | Layout shifts, drawers. |
long | 500ms | Entrances, modals appearing. |
Easing
| Token | Value | Use |
|---|---|---|
standard | cubic-bezier(0.4, 0, 0.2, 1) | Default — symmetric, neutral. |
enter | cubic-bezier(0, 0, 0.2, 1) | Things appearing — decelerating. |
exit | cubic-bezier(0.4, 0, 1, 1) | Things leaving — accelerating. |