| Token |
Value |
Use |
motion.duration.fast |
120ms |
Feedback to a press or hover: must feel instant. |
motion.duration.normal |
200ms |
Something appearing or changing place. |
motion.duration.slow |
320ms |
Large surfaces: sheets, full panels. |
motion.easing.standard |
cubic-bezier(0.2, 0, 0, 1) |
Moving between two places on screen. |
motion.easing.enter |
cubic-bezier(0, 0, 0, 1) |
Arriving: starts fast, settles. |
motion.easing.exit |
cubic-bezier(0.3, 0, 1, 1) |
Leaving: starts slow, gets out of the way. |
motion.press-scale |
0.97 |
How far a button shrinks while it is pressed. Feedback that does not depend on color. |
motion.spring.default.stiffness |
700 |
|
motion.spring.default.damping |
0.9 |
|
motion.spring.fast.stiffness |
1400 |
|
motion.spring.fast.damping |
0.9 |
|
A shadow is written as offset x, offset y, blur, spread, then its color.
| Token |
Value |
Use |
shadow.subtle |
0px 1px 2px 0px, #000000 at 6% |
Cards and outlined controls: just enough to lift them off the page. Drawn together with a hairline border. |
shadow.raised |
0px 4px 16px 0px, #000000 at 12% |
Menus and dialogs. Paired with background.raised, which carries the elevation in dark mode. |
shadow.overlay |
0px 12px 32px 0px, #000000 at 35% |
Dialogs and sheets, which sit above everything else on the screen. |