Motion answers in tone.
Depth comes from contrast.
Feedback is a shift in tone; the colour moves while the element holds its place. Transitions run 120–240ms on a standard ease, and the focus ring stays visible throughout.
Hover & pressed
Interactive surfaces answer by darkening one step, then another. Hover these; hold them down. The colour moves; the button stays exactly where it is.
The same ladder drives links and brand surfaces. State changes prefer a dark-alpha overlay (A08 → A16) on neutral surfaces.
Timing
The whole system lives between 120 and 240ms. Long enough to read, short enough to stay out of the way. Pick a duration and replay it.
Ease-in-out on everything. Colour and opacity transitions are free; layout-shifting animation is avoided.
Focus
A 2px brand ring, offset from the box, on every interactive element. It is never suppressed. Tab into these, or click the button, to see it.
Delivered by a single global :focus-visible rule in colors_and_type.css, so no component can lose it by accident.
Reduced motion
When someone asks their system to reduce motion, the guide honours it; transitions collapse to near-zero. Flip this to feel the difference on this page.
The real guard is @media (prefers-reduced-motion: reduce). This toggle only mimics it locally so you can compare.