Foundations / Motion
Motion.
Three easings. Four durations. Token-driven — never hand-rolled cubic-béziers in components. The brand-side narrative lives at /brand/motion.
Easing tokens
Duration tokens
| Token | Value | Role |
|---|---|---|
| 50ms | Hover state changes, micro-interactions | |
| 150ms | Standard — buttons, links, focus rings | |
| 300ms | Sheets, dialogs, route transitions | |
| 500ms | Reserved — only when 300ms feels rushed |
Usage rules
- No spring or bounce. The brand is precise.
- Press feedback is universal. Every button — and only buttons — uses
scale(0.97)at 100ms. - Reduce-motion respected. All durations collapse to 0 under
@media (prefers-reduced-motion: reduce). Animations become instant transitions. - Token names mirror CSS vars. Use
var(--dur-fast)in Svelte styles, not literal150ms. - v1.1 recipes. reveal-on-scroll, view transitions, copy-confirm, hover lift, and nav indicator all compose from these same tokens — see Brand / Motion for the full recipe table and live demos.