Depth

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.

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.

Recommended Usage

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

Dos and Don'ts

Web Examples

Javascript / Typescript

// styles.ts
import {system} from '@workday/canvas-tokens-web';

const styles = {
  boxShadow: `var(${system.depth[2]})`,
};

CSS

// styles.css
@import '@workday/canvas-tokens-web/css/system/_variables.css';
.card {
  background-color: var(--cnvs-sys-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