styles

Motion

Motion shows what changed and where it came from, without slowing anyone down.

  • Three durations: fast (150ms) for small state changes, base (250ms) for panels and overlays, slow (400ms) for large transitions.
  • One easing, standard, for everything.
  • Every duration drops to 0ms when the user asks for reduced motion. That's automatic as long as you use the tokens.