Motion
Motion is meaning, not decoration. Every transition reads under 200ms; never animate properties that trigger layout (top/left); never animate longer than 500ms outside a page transition.
Easing
ease-in-out
cubic-bezier(0.4, 0, 0.2, 1)
Default for any state change — bidirectional.
ease-out
cubic-bezier(0, 0, 0.2, 1)
Element entering view, opening menus.
ease-spring
cubic-bezier(0.34, 1.56, 0.64, 1)
Playful overshoot — use sparingly on click feedback.
Duration
| Token | ms | CSS variable | Use |
|---|---|---|---|
| duration-fast | 100ms | --duration-fast | Micro feedback — hover colour shifts, focus rings. |
| duration-normal | 200ms | --duration-normal | Default — buttons, cards, dropdowns. |
| duration-slow | 350ms | --duration-slow | Larger components — drawers, modals, page sections. |
| duration-page | 500ms | --duration-page | Page transitions and large layout shifts. |
Reduced motion
Always respect prefers-reduced-motion. Skeleton pulses, page transitions and decorative reveals all disable themselves automatically.