Foundations

Motion

Three duration tiers (120 / 200 / 320 ms) and three easing curves. No spring overshoots, no bounces. All transitions reference var(--ease-standard) unless there is a specific reason to deviate.

Duration tiers

--dur-fast 120ms

Micro-interactions, hover states, icon swaps

--dur-base 200ms

Button transitions, panel reveals, state changes

--dur-slow 320ms

Modal open/close, sidebar slide, page transitions

Easing curves

--ease-standard Standard
cubic-bezier(0.2, 0, 0, 1) All transitions by default
--ease-emphasized Emphasized
cubic-bezier(0.2, 0, 0, 1.2) Attention-drawing moments — keep rare
--ease-out Out
cubic-bezier(0, 0, 0, 1) Elements entering the viewport

Usage rules

Default to standard

Use var(--ease-standard) + var(--dur-base) as your baseline. Deviating requires a clear reason — not preference.

Match tier to complexity

Fast (120ms) for simple hover swaps. Base (200ms) for state changes visible in flow. Slow (320ms) for panels and overlays that take visual space.

No overshoots in product UI

--ease-emphasized has a slight overshoot (1.2). Reserve it for moments where you deliberately want to draw attention — not standard interactions.

Respect prefers-reduced-motion

Wrap any animation that moves content across distance in an @media (prefers-reduced-motion: no-preference) block, or set transition-duration: 0.001ms in a reduced-motion override.