Shadow tokens encompass their colors and various shadow level types.
Level
Shadow levels go up from shallow to deeper.
0 1px 2px 0 rgba(0,0,0,0.2), 0 0 1px 0 rgba(0,0,0,0.15)
box / shadow / level-1
Used for:
- Tabs
0 2px 6px 0 rgba(0,0,0,0.1), 0 0.25px 0.75px 0 rgba(0,0,0,0.05)
box / shadow / level-2
Used for:
- Cards
0 3px 12px 0 rgba(0,0,0,0.1), 0 0.375px 1.5px 0 rgba(0,0,0,0.05)
box / shadow / level-3
Used for:
- Modals
- Panels
- Prompts
0 4px 16px 0 rgba(0,0,0,0.1), 0 0.5px 2px 0 rgba(0,0,0,0.05)
box / shadow / level-4
Used for:
- Cards on hover
Color
Two shadows are layered for every level in order to create a more realistic casting.
There are no shadows in high contrast mode
Level 1 shadows
Level 2 shadows
Level 3 shadows
Level 4 shadows