Shadows
Shadows illustrate the depth and edge of an elevated component. The shadow we apply to a component is determined by its elevation and its relationship to other components. Our system has five levels of elevation; as the elevation increases, so too does the shadow’s intensity.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/60d4d934d55b54a77bc28ff6_shadows_intro.png)
The Formula
To make shadows consistent and easier to implement, all of our shadows were generated with following formula, where X is the number of the shadow defined in the Shadow Scale section.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/60d4d96106ba6b82ee104b63_shadows_formula.png)
Shadow Scale
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/60d4d990a81056f22c37a49e_shadows_scale.png)
Direction
A shadow direction can also be applied to the top, bottom, left, right, or center of the component. You can also add one of the following combinations: top-left, top-right, bottom-left, or bottom-right.
Below, you’ll see Shadow-2 displayed in all possible directions.
Below, you’ll see Shadow-2 displayed in all possible directions.
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/60d4db54bf9ba6574ede22ff_shadows_direction.png)
Application
Read Page
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/60d4dc40f9a19a41fcc452fb_shadows_read.png)
Header and Menus
![](https://assets-global.website-files.com/5f5298baab4c43a7f0640b67/60d4dc561fcd63289b726df1_shadows_header.png)