Gentle and quiet. Fades and small vertical moves only, between 120 and 320ms, on standard easing. No bounce, no spin, no attention-seeking loops.
Hover a card to feel the standard lift. This is the whole motion vocabulary, applied everywhere.
| Token | Value | Use |
|---|---|---|
| --dur-1 | 120ms | Micro: hover, colour shifts, copy reveal |
| --dur-2 | 180ms | Default: most state changes, panel crossfade |
| --dur-3 | 240ms | Medium: reveals, tab height, route content |
| --dur-4 | 320ms | Large: the theme flip, hero entrance |
| Token | Value | Use |
|---|---|---|
| --ease-standard | cubic-bezier(.4,0,.2,1) | In-out: toggles, sliding indicators, swaps |
| --ease-out | cubic-bezier(.22,.61,.36,1) | Decelerate: entrances, things arriving |
| --ease-in | cubic-bezier(.55,.06,.68,.19) | Accelerate: things leaving |