Foundations

Motion

Durations and easings for animation. Overlays fade and slide in and out; with reduced motion, nothing slides or scales.

Token	Value	Preview
--ds-motion-duration-fast	100ms: hovers, small state changes
--ds-motion-duration-base	200ms: overlays in, switches, indicators
--ds-motion-duration-slow	300ms: sheets, sidebars, accordions
--ds-motion-easing-standard	ease: exits and simple fades
--ds-motion-easing-emphasized	cubic-bezier(0.2, 0, 0, 1): entrances

Reduced motion

Under prefers-reduced-motion: reduce, Motion replaces slides and scales with an instant change or a short fade. Use the tokens in your own transitions and add motion-reduce: variants:

/src/styles.css

.panel {
  transition: transform var(--ds-motion-duration-base) var(--ds-motion-easing-emphasized);
}
@media (prefers-reduced-motion: reduce) {
  .panel { transition: none; }
}