Duration

Motion duration tokens.

Fast

Micro-interactions like hovers, toggles, and focus rings.

130msduration-fast-min

175msduration-fast

230msduration-fast-max

Standard UI transitions like panels, menus, and reveals.

310msduration-medium-min

410msduration-medium

550msduration-medium-max

Emphasis animations and larger layout changes.

730msduration-slow-min

975msduration-slow

1300msduration-slow-max

Apply duration tokens as Tailwind utilities or CSS variables.

className="transition-all duration-fast"
style={{ transitionDuration: 'var(--duration-medium)' }}