Elevation
Our elevation system communicates hierarchy, grouping, and interactivity through the use of shadows and depth. It helps users understand the relationship between elements and creates a more tactile, dimensional interface.
Elevation System
Our elevation system uses shadows to create a sense of depth and hierarchy in the interface. Shadow levels increase with visual importance, adding subtle or strong depth depending on context.
Purpose
- Communicate hierarchy between elements
- Indicate interactive elements
- Group related content
- Create focus on important elements
- Add visual interest and dimension
Features
- Four elevation levels for different contexts
- Consistent shadow properties across components
- Responsive adaptation for different screen sizes
- Dark mode support with adjusted opacity
- Utility classes for easy implementation
Small
Small Elevation
Subtle depth
Medium
Medium Elevation
Standard components
Large
Large Elevation
Floating elements
Extra Large
Extra Large Elevation
Modal dialogs