Light and shadows are utilized to indicate a sense of depth. This establishes hierarchy and provides predictability within the Canvas user interface.

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

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.

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

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.

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

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

Do's and Don'ts


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


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

Web Examples

import {depth} from '@workday/canvas-kit-react/tokens';

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