Motion

Motion is a Foundation dimension like color and spacing. Components consume motion roles — one named job each — and the configured character (currently Productive) and pace decide what every role feels like, product-wide, on Save. Configured on the Foundation page (Motion section).
The four roles
Micro feedback
Hover, press, and focus feedback — the color and transform ticks on controls. The default for every transition-* utility.
--motion-micro · 120ms · cubic-bezier(0.2, 0, 0, 1)
Control state
A control changing state — checks, switches, selection moving between items.
--motion-control · 180ms · cubic-bezier(0.2, 0, 0, 1)
Surface
Menus, popovers, sheets, and tooltips entering and leaving.
--motion-surface · 240ms · cubic-bezier(0.2, 0, 0, 1)
Page
Section and page-level moves — the largest transitions in the product.
--motion-page · 320ms · cubic-bezier(0.2, 0, 0, 1)
How components consume it

CSS (the default): every transition-* utility already rides the micro role — Tailwind's default transition duration and easing map onto --motion-micro / --motion-ease. A slower job names its role: duration-(--motion-surface).

Framer Motion: pass useMotionTransition("surface") as a transition, or useMotionSpring() for gestural, interruptible moves.

The rule: never a literal duration, easing, or spring in component code — a stated "200ms" is a request for the nearest role. The orb's identity springs are the one sanctioned exception.