Motion

Three transition tokens cover the whole system. They share an easing curve and differ only in duration — fast for direct feedback, slow for larger spatial moves. Hover a swatch to feel its timing.

Transitions

Each swatch uses its token for both the color shift and the slide. Hover to trigger; the timing is the difference.

Hover me

--transition-fast 150ms ease Hover, focus, small state flips

Hover me

--transition-base 200ms ease Default for most interactions

Hover me

--transition-slow 350ms ease Panels, overlays, larger moves

Usage

Bind the token on the transition property and name the properties you animate — never animate all. Default to --transition-base unless the change is tiny (fast) or spatial (slow).

.button {
  transition: background var(--transition-fast),
              box-shadow var(--transition-fast);
}
.drawer {
  transition: transform var(--transition-slow);
}