Motion Tokens DTCG (17)

Last built on 2026-08-31T15:10:56.763Z

TokenValueTypeDescription
duration-fast-01
70ms
durationMicro-interactions such as button and toggle. Instant response to user action.
duration-fast-02
110ms
durationMicro-interactions such as fade in. Subtle entrance or exit of small UI elements.
duration-moderate-01
150ms
durationMicro-interactions, small expansion, short distance movements. Default transition speed.
duration-moderate-02
240ms
durationExpansion, system communication, toast. Slightly longer interactions with more visual weight.
duration-slow-01
400ms
durationLarge expansion, important system notifications. Deliberate, prominent transitions.
duration-slow-02
700ms
durationBackground dimming, large hero transitions. Slow, immersive motion for maximum emphasis.
easing-standard-productive
cubic-bezier(0.2, 0, 0.38, 0.9)
cubicBezierStandard easing for productive motion. Used for UI elements that move within the viewport.
easing-standard-expressive
cubic-bezier(0.4, 0.14, 0.3, 1)
cubicBezierStandard easing for expressive motion. Used for elements with more prominent, fluid movement.
easing-entrance-productive
cubic-bezier(0, 0, 0.38, 0.9)
cubicBezierEntrance easing for productive motion. Used when elements enter the screen.
easing-entrance-expressive
cubic-bezier(0, 0, 0.3, 1)
cubicBezierEntrance easing for expressive motion. Used for prominent element entrances.
easing-exit-productive
cubic-bezier(0.2, 0, 1, 0.9)
cubicBezierExit easing for productive motion. Used when elements leave the screen.
easing-exit-expressive
cubic-bezier(0.4, 0.14, 1, 1)
cubicBezierExit easing for expressive motion. Used for prominent element exits.
surface-disclosure
moderate-01
surfaceAccordion, table-row expand — reveal in place.
surface-contextual
fast-02
surfaceIcon → tooltip/popover — fade and scale reveal.
surface-stretch
slow-01
surfaceComponent reveal stretching from the vertical axis.
surface-expand
moderate-02
surfaceCard/tile → side-panel/tearsheet — shared-element morph.
surface-invoke
moderate-02
surfaceButton → modal/menu/popover — shared-element morph from the trigger.