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.
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.
Shadow Scale
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.
Application
Read Page
Header and Menus
