Elevation
Our elevation system creates visual hierarchy and depth using shadows, guiding user attention and indicating interactivity.
Elevation System
Our elevation system creates visual hierarchy and depth using shadows. Each level serves specific UI purposes and helps users understand the spatial relationships between elements.
Level 0
Surface
Base surface, no elevation
Level 1
Raised
Cards, buttons at rest
Level 2
Elevated
Hover states, selected items
Level 3
Floating
Dropdowns, tooltips
Level 4
Overlay
Modals, dialogs
Level 6
Navigation
Navigation drawers, app bars
Shadow Tokens
These are the predefined shadow tokens used to achieve consistent elevation levels.
| Level | Token | CSS Class | Box Shadow Value |
|---|---|---|---|
| 0 | elevation-0 | shadow-none | none |
| 1 | elevation-1 | shadow-sm | 0 1px 2px 0 rgb(0 0 0 / 0.05) |
| 2 | elevation-2 | shadow-md | 0 4px 6px -1px rgb(0 0 0 / 0.1) |
| 3 | elevation-3 | shadow-lg | 0 10px 15px -3px rgb(0 0 0 / 0.1) |
| 4 | elevation-4 | shadow-xl | 0 20px 25px -5px rgb(0 0 0 / 0.1) |
| 6 | elevation-6 | shadow-2xl | 0 25px 50px -12px rgb(0 0 0 / 0.25) |
Usage Guidelines
Follow these guidelines to effectively use elevation for visual hierarchy and user experience.
Do's
- ✓Use elevation to create visual hierarchy
- ✓Apply consistent elevation levels across similar components
- ✓Use higher elevation for interactive elements on hover
- ✓Consider dark mode when designing with shadows
Don'ts
- ✗Don't use too many elevation levels on one screen
- ✗Don't apply elevation to every element
- ✗Don't use elevation levels inconsistently
- ✗Don't create custom shadow values outside the system
Interactive Examples
See how different elevation levels are applied in interactive components.
Button States
Card Examples
Basic Card
Level 1 elevation
Elevated Card
Level 2 elevation
Floating Card
Level 3 elevation