Motion

Use the semantic motion tokens, --nbhd-motion-duration-* and --nbhd-motion-easing-*, in your CSS. Each one points to the matching step of the base scale (--nbhd-motion-duration-normal → --nbhd-base-motion-duration-normal). Components use the same tokens.

Duration tokens set how long a change of state takes, such as a hover color or a border appearing. Easing tokens set how that change speeds up and slows down: standard (ease) for most changes, inOut (ease-in-out) for buttons and other controls that move evenly both ways. Choose the property yourself. Both work for transitions and animations.

.tile {
  transition-property: background-color;
  transition-duration: var(--nbhd-motion-duration-normal);
  transition-timing-function: var(--nbhd-motion-easing-inOut);
}