Skip to content
Design Token Authority

Motion

A short scale: most transitions take motion.duration.base, small changes in place fast, larger moves such as a panel sliding in slow. Nothing waits longer than a third of a second, except the highlight of a changed value, which is colour and fades back on its own. How and when to use them is on the Motion page.

The tokens are string tokens in Primitives.Value.json, so dta build writes them as they are: --motion-duration-base: 200ms;, --motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);. (DTA’s token model has the four Figma types; the DTCG duration and cubicBezier types are not read yet, so a string keeps the CSS exact.)

Durations

Section titled “Durations”
  • motion-duration-instant0ms · --motion-duration-instantNo motion: a change that must not animate, and every movement under prefers-reduced-motion.
  • motion-duration-fast120ms · --motion-duration-fastSmall state changes in place: hover, a selected row's tint, a chevron turning.
  • motion-duration-base200ms · --motion-duration-baseMost transitions: a crossfade, a disclosure opening, a tab indicator moving.
  • motion-duration-slow320ms · --motion-duration-slowLarger moves: a panel or sheet sliding in, the input collapsing into the source bar.
  • motion-duration-highlight1200ms · --motion-duration-highlightHow long a changed value stays highlighted before it fades back.
  • motion-stagger40ms · --motion-staggerDelay between items that appear one after another.

Easings

Section titled “Easings”

Standard for something that stays on screen and moves or resizes, enter for things that appear (they arrive fast and settle), exit for things that leave (they start gently and go). Never a bounce or an overshoot.

  • motion-ease-standardcubic-bezier(0.2, 0, 0, 1) · --motion-ease-standardMoves and resizes: something that stays on screen.
  • motion-ease-entercubic-bezier(0, 0, 0, 1) · --motion-ease-enterThings that appear: fast start, gentle stop.
  • motion-ease-exitcubic-bezier(0.3, 0, 1, 1) · --motion-ease-exitThings that leave: gentle start, fast end.

In CSS

Section titled “In CSS”
.dta-detail[open] {
  transition: transform var(--motion-duration-slow) var(--motion-ease-enter);
}

Components use these variables only; a literal duration or easing in src/components/ds fails a test (components.test.ts). The endless loops of decoration (the gravity well’s orbits, the floating objects, the terminal cursor) keep their own periods.