Shadow and elevation
Shadows and elevation on a surface indicate depth and direction. Together they create visual hierarchy through surface qualities that suggest their position on the z-axis relative to other surfaces.
- Surface: any solid background element that can be stacked or attached to each other, but can not pass through. They can be transparent, cast shadows, and reflect light.
- Elevation: the distance between surfaces.
Product use cases
- Tooltips
- Modals
- Cards
- Sticky Navigation
- Floating Bars (e.g. Credit Cards Compare Bar)
Usage
These are low level foundation styles that must be used consistently throughout the product.
- Assign a shadow 0-3 to all surfaces
Shadows
| Hierarchy | Box-Shadow |
|---|---|
| 0 | None |
| 1 | 0 4px 8px 0 rgba(100,102,106,0.1), 0 1px 4px 0 rgba(100,102,106,0.36); |
| 2 | 0 4px 8px 0 rgba(100,102,106,0.15), 0 8px 16px 0 rgba(100,102,106,0.33); |
| 3 | 0 32px 40px 0 rgba(100,102,106,0.33), 0 8px 16px 0 rgba(100,102,106,0.15); |
Design Guidelines
Create visual hierarchy with shadows
Shadows help create a visual hierarchy between overlapping surfaces.
Do
Use shadows available in the foundation for overlapping surfaces.
Don't
Go completely flat.Use elevation to create the right sense of depth
Do
Create a sense of depth by increasing the shadows as the surface elevation increases.