System
Motion, applied with restraint.
Motion clarifies hierarchy and rewards interaction. It never demands attention.
Principles
Four rules.
Purposeful
Every animation communicates state, hierarchy, or continuity.
Subtle
Distance under 12px. Duration under 400ms. Never spectacle.
Consistent
Reuse the same easing curve across the system.
Respectful
Honor prefers-reduced-motion. Never block interaction.
Tokens
Duration & easing.
| Token | Value | Use |
|---|---|---|
| duration/xs | 120ms | Hover, focus, small state changes |
| duration/sm | 200ms | Popovers, tabs, dropdowns |
| duration/md | 320ms | Modals, drawers, page transitions |
| ease/standard | cubic-bezier(.2,.8,.2,1) | Default easing curve |
| ease/emphasized | cubic-bezier(.16,1,.3,1) | Hero moments only |
Interactions
Try it.
Fade in
Content enters gently, never abruptly.
Signature moment
One per view, maximum.