Material Design 3 "Motion" tokens: All tokens
Browse tokens
Color
State opacities
| Token | Value |
|---|---|
Disabled state layer opacitymd.sys.state.disabled.state-layer-opacity | 38% md.sys.state.disabled.state-layer-opacity |
Dragged state layer opacitymd.sys.state.dragged.state-layer-opacity | 16% md.sys.state.dragged.state-layer-opacity |
Focus state layer opacitymd.sys.state.focus.state-layer-opacity | 10% md.sys.state.focus.state-layer-opacity |
Hover state layer opacitymd.sys.state.hover.state-layer-opacity | 8% md.sys.state.hover.state-layer-opacity |
Pressed state layer opacitymd.sys.state.pressed.state-layer-opacity | 10% md.sys.state.pressed.state-layer-opacity |
Motion
| Token | Value |
|---|---|
Motion spring default effects md.sys.motion.spring.default.effects | — md.sys.motion.spring.default.effects |
Motion spring default spatialmd.sys.motion.spring.default.spatial | — md.sys.motion.spring.default.spatial |
Motion spring fast effects md.sys.motion.spring.fast.effects | — md.sys.motion.spring.fast.effects |
Motion spring fast spatialmd.sys.motion.spring.fast.spatial | — md.sys.motion.spring.fast.spatial |
Motion spring slow effects md.sys.motion.spring.slow.effects | — md.sys.motion.spring.slow.effects |
Motion spring slow spatialmd.sys.motion.spring.slow.spatial | — md.sys.motion.spring.slow.spatial |
Spring
| Token | Value |
|---|---|
Motion spring default effects dampingmd.sys.motion.spring.default.effects.damping | Numeric: 1 md.sys.motion.spring.default.effects.damping |
Motion spring default effects stiffnessmd.sys.motion.spring.default.effects.stiffness | Numeric: 1600 md.sys.motion.spring.default.effects.stiffness |
Motion spring default spatial dampingmd.sys.motion.spring.default.spatial.damping | Numeric: 0.8 md.sys.motion.spring.default.spatial.damping |
Motion spring default spatial stiffnessmd.sys.motion.spring.default.spatial.stiffness | Numeric: 380 md.sys.motion.spring.default.spatial.stiffness |
Motion spring fast effects dampingmd.sys.motion.spring.fast.effects.damping | Numeric: 1 md.sys.motion.spring.fast.effects.damping |
Motion spring fast effects stiffnessmd.sys.motion.spring.fast.effects.stiffness | Numeric: 3800 md.sys.motion.spring.fast.effects.stiffness |
Motion spring fast spatial dampingmd.sys.motion.spring.fast.spatial.damping | Numeric: 0.6 md.sys.motion.spring.fast.spatial.damping |
Motion spring fast spatial stiffnessmd.sys.motion.spring.fast.spatial.stiffness | Numeric: 800 md.sys.motion.spring.fast.spatial.stiffness |
Motion spring slow effects dampingmd.sys.motion.spring.slow.effects.damping | Numeric: 1 md.sys.motion.spring.slow.effects.damping |
Motion spring slow effects stiffnessmd.sys.motion.spring.slow.effects.stiffness | Numeric: 800 md.sys.motion.spring.slow.effects.stiffness |
Motion spring slow spatial dampingmd.sys.motion.spring.slow.spatial.damping | Numeric: 0.8 md.sys.motion.spring.slow.spatial.damping |
Motion spring slow spatial stiffnessmd.sys.motion.spring.slow.spatial.stiffness | Numeric: 200 md.sys.motion.spring.slow.spatial.stiffness |
Easing
| Token | Value |
|---|---|
Emphasizedmd.sys.motion.easing.emphasized | CubicBezier: X0: 0.2 · Y1: 1 md.sys.motion.easing.emphasized
|
Emphasized acceleratemd.sys.motion.easing.emphasized.accelerate | CubicBezier: X0: 0.3 · X1: 0.8 · Y1: 0.15 md.sys.motion.easing.emphasized.accelerate |
Emphasized deceleratemd.sys.motion.easing.emphasized.decelerate | CubicBezier: X0: 0.05 · X1: 0.1 · Y0: 0.7 · Y1: 1 md.sys.motion.easing.emphasized.decelerate |
Legacymd.sys.motion.easing.legacy | CubicBezier: X0: 0.4 · X1: 0.2 · Y1: 1 md.sys.motion.easing.legacy |
Legacy acceleratemd.sys.motion.easing.legacy.accelerate | CubicBezier: X0: 0.4 · X1: 1 · Y1: 1 md.sys.motion.easing.legacy.accelerate |
Legacy deceleratemd.sys.motion.easing.legacy.decelerate | CubicBezier: X1: 0.2 · Y1: 1 md.sys.motion.easing.legacy.decelerate |
Linearmd.sys.motion.easing.linear | CubicBezier: X1: 1 · Y1: 1 md.sys.motion.easing.linear |
Standardmd.sys.motion.easing.standard | CubicBezier: X0: 0.2 · Y1: 1 md.sys.motion.easing.standard |
Standard acceleratemd.sys.motion.easing.standard.accelerate | CubicBezier: X0: 0.3 · X1: 1 · Y1: 1 md.sys.motion.easing.standard.accelerate |
Standard deceleratemd.sys.motion.easing.standard.decelerate | CubicBezier: Y1: 1 md.sys.motion.easing.standard.decelerate |
Duration
| Token | Value |
|---|---|
Extra long 1md.sys.motion.duration.extra-long1 | DurationMs: 700 md.sys.motion.duration.extra-long1 |
Extra long 2md.sys.motion.duration.extra-long2 | DurationMs: 800 md.sys.motion.duration.extra-long2 |
Extra long 3md.sys.motion.duration.extra-long3 | DurationMs: 900 md.sys.motion.duration.extra-long3 |
Extra long 4md.sys.motion.duration.extra-long4 | DurationMs: 1000 md.sys.motion.duration.extra-long4 |
Long 1md.sys.motion.duration.long1 | DurationMs: 450 md.sys.motion.duration.long1 |
Long 2md.sys.motion.duration.long2 | DurationMs: 500 md.sys.motion.duration.long2 |
Long 3md.sys.motion.duration.long3 | DurationMs: 550 md.sys.motion.duration.long3 |
Long 4md.sys.motion.duration.long4 | DurationMs: 600 md.sys.motion.duration.long4 |
Medium 1md.sys.motion.duration.medium1 | DurationMs: 250 md.sys.motion.duration.medium1 |
Medium 2md.sys.motion.duration.medium2 | DurationMs: 300 md.sys.motion.duration.medium2 |
Medium 3md.sys.motion.duration.medium3 | DurationMs: 350 md.sys.motion.duration.medium3 |
Medium 4md.sys.motion.duration.medium4 | DurationMs: 400 md.sys.motion.duration.medium4 |
Short 1md.sys.motion.duration.short1 | DurationMs: 50 md.sys.motion.duration.short1 |
Short 2md.sys.motion.duration.short2 | DurationMs: 100 md.sys.motion.duration.short2 |
Short 3md.sys.motion.duration.short3 | DurationMs: 150 md.sys.motion.duration.short3 |
Short 4md.sys.motion.duration.short4 | DurationMs: 200 md.sys.motion.duration.short4 |
Style
| Token | Value |
|---|---|
Motion pathmd.sys.motion.path | MotionPath: StandardPath: LINEAR md.sys.motion.path |