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

Do use a maximum of 2 shadowed layers on each other.

Don’t

Shadows-DoDont-1-Dont

Don’t use more than 2 shadowed layers on each other.

Do

Shadows-DoDont-2-Do

Do apply z1, z2, z3 or z4 respectively.

Don’t

Shadows-DoDont-2-Dont

Don’t use a larger shadow behind a smaller shadow.

Do

Shadows-DoDont-3-Do

Do apply z1 to elements closest to the background (cards) and z2+ for everything else.

Don’t

Shadows-DoDont-3-Dont

Don’t apply z2+ to cards or z1 to any component other than cards. Don’t apply shadows to every component, like text inputs and toggle switches.

Do

Shadows-DoDont-4-Do

Do apply z1 to cards that contain interactions.

Don’t

Shadows-DoDont-4-Dont

Don’t remove shadows on cards with interactions.

Do

Shadows-DoDont-5-Do

Do remove shadows from non-interactive cards. You can also just put content directly on the background, avoiding cards altogether.

Don’t

Shadows-DoDont-5-Dont

Don’t add shadows to non-interactive cards.

Examples

Z1

Shadows-Example-Z1

Z2

Shadows-Example-Z2

Z3

Shadows-Example-Z3

Z4

Shadows-Example-Z4