Depth

Usage Guidance

Shadows help explain the difference in elevation between multiple objects. The closer an object is to a surface the closer and harder the shadow becomes. As that object moves away from the surface the shadow will grow and become softer.

We use shadows in our UI to help create contrast, spatial awareness, and hierarchy. Shadows create contrast and help define shapes. By using shadows, we can help create focus and draw the user’s eye to items with more contrast.

We can help users understand the relation between multiple objects by creating hierarchy with depth. We can use this to our advantage by placing more critical or important objects closer to the user.

Multiple Shadows

Our depth styles utilize two different shadows to create a harder shadow and a softer shadow with more depth. The harder shadow is indicative of a sharper, more realistic direct light. While the softer shadow could be from a softer, farther away, or reflected light.

Depth Values

Our depth styles utilizes two different shadows to create a more realistic shadow and a softer shadow with more depth.

Zero Depth

Not every piece of our UI needs to have depth. It is okay to use zero depth for most of the UI. Depth should be used intentionally to help create hierarchy and spatial awareness.

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 maybe applied to create definition if depth is not necessary

Do's and Don'ts

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