| Token | Value | Type | Description |
|---|---|---|---|
| duration-fast-01 | 70ms | duration | Micro-interactions such as button and toggle. Instant response to user action. |
| duration-fast-02 | 110ms | duration | Micro-interactions such as fade in. Subtle entrance or exit of small UI elements. |
| duration-moderate-01 | 150ms | duration | Micro-interactions, small expansion, short distance movements. Default transition speed. |
| duration-moderate-02 | 240ms | duration | Expansion, system communication, toast. Slightly longer interactions with more visual weight. |
| duration-slow-01 | 400ms | duration | Large expansion, important system notifications. Deliberate, prominent transitions. |
| duration-slow-02 | 700ms | duration | Background dimming, large hero transitions. Slow, immersive motion for maximum emphasis. |
| easing-standard-productive | cubic-bezier(0.2, 0, 0.38, 0.9) | cubicBezier | Standard 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) | cubicBezier | Standard easing for expressive motion. Used for elements with more prominent, fluid movement. |
| easing-entrance-productive | cubic-bezier(0, 0, 0.38, 0.9) | cubicBezier | Entrance easing for productive motion. Used when elements enter the screen. |
| easing-entrance-expressive | cubic-bezier(0, 0, 0.3, 1) | cubicBezier | Entrance easing for expressive motion. Used for prominent element entrances. |
| easing-exit-productive | cubic-bezier(0.2, 0, 1, 0.9) | cubicBezier | Exit easing for productive motion. Used when elements leave the screen. |
| easing-exit-expressive | cubic-bezier(0.4, 0.14, 1, 1) | cubicBezier | Exit easing for expressive motion. Used for prominent element exits. |
| surface-disclosure | moderate-01 | surface | Accordion, table-row expand — reveal in place. |
| surface-contextual | fast-02 | surface | Icon → tooltip/popover — fade and scale reveal. |
| surface-stretch | slow-01 | surface | Component reveal stretching from the vertical axis. |
| surface-expand | moderate-02 | surface | Card/tile → side-panel/tearsheet — shared-element morph. |
| surface-invoke | moderate-02 | surface | Button → modal/menu/popover — shared-element morph from the trigger. |
Motion Tokens DTCG (17)
Last built on 2026-08-31T15:10:56.763Z