Elevation
M3 uses 6 elevation levels (0–5). On the web, elevation is represented with CSS box-shadow.
Level 0
Level 1
Level 2
Level 3
Level 4
Level 5
Shape
M3 defines 7 corner radius tokens, from none (0px) to full (pill). Components are assigned a default shape category.
None (0)
XS
(4px)
S (8px)
M (12px)
L (16px)
XL
(28px)
Full
Motion
Material motion uses easing curves and durations to create natural transitions.
Easing
| Token | Value | Use case |
|---|---|---|
| emphasized | cubic-bezier(0.2, 0, 0, 1) | Default transitions |
| emphasized-decelerate | cubic-bezier(0.05, 0.7, 0.1, 1) | Enter animations |
| emphasized-accelerate | cubic-bezier(0.3, 0, 0.8, 0.15) | Exit animations |
| standard | cubic-bezier(0.2, 0, 0, 1) | Simple transitions |
| linear | cubic-bezier(0, 0, 1, 1) | Color/opacity changes |
Duration
| Token | Value | Use case |
|---|---|---|
| short1 | 50ms | Micro-interactions |
| short2 | 100ms | Hover states |
| short3 | 150ms | Simple transitions |
| short4 | 200ms | Component transitions |
| medium1 | 250ms | Standard animations |
| medium2 | 300ms | Enter/exit animations |
| long1 | 450ms | Complex animations |
| long2 | 500ms | Page transitions |