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
- Sticky Navigation
- Floating Bars (e.g. Credit Cards Compare Bar)
These are low level foundation styles that must be used consistently throughout the product.
- Assign a shadow 0-3 to all surfaces
|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);|
Create visual hierarchy with shadows
Shadows help create a visual hierarchy between overlapping surfaces.