Motion
State changes answer in 60 to 180ms on one standard ease.
Timing
State change
Dialog or sheet in
Running, a turning arc
Running
By job
| Job | Time | Curve | What moves |
|---|---|---|---|
| Hover | --dur-fast 120ms | --ease-step | Color, wash and edge on every interactive element |
| Press | --dur-press 60ms | --ease-step | A button or chip settles at --scale-press |
| Enter | --dur-base 160ms | --ease-step | A menu, popover, select, tooltip or toast appears: opacity only, it never grows |
| Exit | --dur-fast 120ms | --ease-step | Any overlay leaves faster than it came |
| Overlay | --dur-slow 180ms | --ease-step | A dialog appears; a sheet adds an 8px slide (--sheet-shift) from its edge; the backdrop fades |
| Collapse | 0ms | --ease-step | Panels open and close with a cut; no height moves |
| Running | --dur-spin 800ms | --ease-spin | The status arc turns |
Tokens
24 tokens
--dur-press- 60ms
--dur-fast- 120ms
--dur-base- 160ms
--dur-slow- 180ms
--dur-spin- 800ms
--dur-run- 1000ms
--dur-slide- 1200ms
--ease-spin- linear
--thumb-lift- 0%
--thumb-ring-alpha- 0
--skeleton-step- 0%
--dur-skeleton-delay- 150ms
--dur-skeleton-hold- 400ms
--toast-read-base- 3000ms
--toast-read-char- 60ms
--toast-read-action- 3000ms
--toast-read-min- 4000ms
--toast-read-max- 12000ms
--scale-press- 0.98
--ease-step- cubic-bezier(0.2, 0, 0, 1)
--sheet-shift- 8px
--surface-skeleton- color-mix(in oklch, oklch(var(--grey-c)), oklch(var(--ink-c)) var(--skeleton-step))
--stale-opacity- 0.6
--dim-opacity- 0.4