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-3 displayed in all possible directions.

Application

Read Page

Header and Menus