Foundations · Tokens

Motion

Motion should feel calm and intentional — quiet confidence in movement. Hover any track below to preview. Durations and easings are tokenized so product and marketing animate to the same rhythm.

Easing

Hover a row to see the curve.

--motion-ease-standard

The default — most transitions, hovers, and state changes.

cubic-bezier(0.2, 0, 0, 1)

--motion-ease-out

Entering elements: decelerate into place.

cubic-bezier(0, 0, 0, 1)

--motion-ease-in

Exiting elements: accelerate away.

cubic-bezier(0.5, 0, 1, 1)

--motion-ease-spring

Playful emphasis — a gentle overshoot for delight moments only.

cubic-bezier(0.2, 0.8, 0.2, 1.1)

Duration

Same easing, increasing time. Hover to compare.

--motion-duration-instant

Micro-feedback — toggles, checkboxes.

75ms

--motion-duration-fast

Hovers, small state changes.

150ms

--motion-duration-base

The default for most UI transitions.

250ms

--motion-duration-slow

Larger surfaces — drawers, sheets.

400ms

--motion-duration-deliberate

Page-level or hero motion, used rarely.

600ms