Depth

Throughout Canvas, depth plays an important role in our UI by mimicking real world principles of light and shadow to help establish hierarchy and bring attention to key areas of our product.

yarn add @workday/canvas-kit-react
Web Install
yarn add @workday/canvas-kit-react

Usage Guidance

Depth helps the user understand the spatial relationship between objects by utilizing differences in shadows. The closer an object is to another surface the smaller and harder the shadow becomes. As that object moves away from the surface the shadow will grow and become softer. We can use this to our advantage by placing more critical or important objects closer to the user.

Image of two different shadows of varying depth to indicate different elevation.

We also use depth in our UI to help guide and focus the user's eye on certain elements by adding contrast or definition with various shadows. An example of this would be when we add depth to certain temporary elements, like a menu.

Depth Values

Our depth styles utilize two different shadows to create a more realistic appearing shadow. A sharper and shorter shadow that is indicative of a strong direct light. And a second softer and longer shadow resembling reflected or ambient lighting.

Do You Really Need a Shadow?

Not every piece of our UI needs to have depth. Depth should be used minimally and intentionally to help improve the experience. When used improperly, depth can lead to added visual noise and weight in the UI resulting in a crowded, ineffective, and confusing experience for our users. It is okay to use zero depth for most of our UI. If certain elements of an experience need increased definition there are alternative ways in achieving this through the use of color or borders. Typically we do not recommend combining these alternative methods with our defined depth values.

Choose from the depth tokens below to see their recommended usage.

Depth 0
  • Select drop-down

  • Objects resting on grey backgrounds

  • A stroke may be applied to create definition if depth is not necessary

Example for space.zero
Depth TokenShadow 1Shadow 2
Depth 1x:0 y:1 Blur:4 Color:#1F262E Alpha 12x:0 y:1 Blur:8 Color:#1F262E Alpha 8
Depth 2x:0 y:2 Blur:8 Color:#1F262E Alpha 12x:0 y:4 Blur:16 Color:#1F262E Alpha 8
Depth 3x:0 y:3 Blur:12 Color:#1F262E Alpha 12x:0 y:6 Blur:24 Color:#1F262E Alpha 8
Depth 4x:0 y:4 Blur:16 Color:#1F262E Alpha 12x:0 y:8 Blur:32 Color:#1F262E Alpha 8
Depth 5x:0 y:5 Blur:20 Color:#1F262E Alpha 12x:0 y:10 Blur:40 Color:#1F262E Alpha 8
Depth 6x:0 y:6 Blur:24 Color:#1F262E Alpha 12x:0 y:12 Blur:48 Color:#1F262E Alpha 8

Dos and Don'ts

Do

Do allow objects with a lower elevation to pass underneath objects with a higher elevation.

Don't

Don’t mix depth styles for similar or equal objects.

Web Examples

import {depth} from '@workday/canvas-kit-react/tokens';
depth.none;
depth['2'];

iOS Examples

Coming soon!

Android Examples

Coming soon!

Accessibility Guidelines

Make sure tooltips, overlays, and modals are visually distinct from other content through supporting icons, color usage, appropriate depth usage, and other visual elements Make sure borders of tooltips, overlays, and modals meet 3:1 contrast with their backgrounds

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section