Design System · Elevation
shadow levels
Box Shadow
level 0 — none
box-shadow: none
level 1 — subtle
0 1px 2px rgba(0,0,0,.06),
0 1px 3px rgba(0,0,0,.1)
0 1px 3px rgba(0,0,0,.1)
level 2 — low
0 2px 4px rgba(0,0,0,.06),
0 4px 8px rgba(0,0,0,.1)
0 4px 8px rgba(0,0,0,.1)
level 3 — medium
0 4px 8px rgba(0,0,0,.08),
0 8px 24px rgba(0,0,0,.12)
0 8px 24px rgba(0,0,0,.12)
level 4 — high
0 8px 16px rgba(0,0,0,.1),
0 16px 40px rgba(0,0,0,.15)
0 16px 40px rgba(0,0,0,.15)
z-index
Stacking Order
| Layer | Use case | z-index |
|---|---|---|
| base | Normal document flow | 0 |
| raised | Sticky headers, floating labels | 10 |
| dropdown | Menus, select popups, autocomplete | 100 |
| modal | Dialog backdrops and content | 200 |
| toast | Notification toasts | 300 |
| overlay | Full-screen takeovers, drawers | 400 |