Shadows

A natural-looking shadow makes a big impact to a design. They communicate depth to the user, helping them differentiate between the surface layer and those above it. Shadows are supported in portraying depth by borders and background colors.

Values

Shadows are available in the common “bottom” orientation, as well as top, left and right. Values below are for bottom; for top, make Y negative, and for left and right, change the Y to Z.

Shadows-Example-Values

 

Usage

Don’t overuse shadows on the UI. There should be no more than 2 shadowed layers on the Z axis at once. The shadow closest to the background (a card) should always be z1, never z2 - z4.

Do
Shadows-DoDont-1-Do
Don’t
Shadows-DoDont-1-Dont

 

Do
Shadows-DoDont-2-Do
Don’t
Shadows-DoDont-2-Dont

 

Do
Shadows-DoDont-3-Do
Don’t
Shadows-DoDont-3-Dont

 

Do
Shadows-DoDont-4-Do
Don’t
Shadows-DoDont-4-Dont

 

Do
Shadows-DoDont-5-Do
Don’t
Shadows-DoDont-5-Dont

 

 

Examples

Z1

Shadows-Example-Z1

 

Z2

Shadows-Example-Z2

 

Z3

Shadows-Example-Z3

 

Z4

Shadows-Example-Z4