Motion

Use semantic motion roles in components. Primitives are the source timing and easing scale.

Hover or focus a tile to play it. Click to copy its tokens.

Interaction

Hover, press, toggle, and color changes on controls.

Accordions, disclosures, and rows that open in place.

Dropdowns, popovers, and tooltips. Exit faster than enter.

Modals and drawers.

Route and large layout transitions.

Components use these pairs. Each role has a -duration and an -easing token. The tiles above are options to compare.