Color

Usage Guidance

Our color choices promote visual clarity, making it easy for users to find what they need. We use a consistent palette to create a seamless and intuitive experience across all sections of the application.

To learn more about tokens in general, go to Tokens Overview page.

Brand Colors

Brand tokens are themed variables designated for brand / tenant-level customization. They are not connected to system tokens, which are intended to be application-wide. Brand tokens are used for our buttons, focus rings, errors, inputs, and banners.

Note: Action tokens don’t have a color associated with them. They are meant to be used when you need a primary action to differ from the rest of the default theme. In the table below, no action token has been defined, therefore the color is blank.

System Color Tokens

System tokens are themed variables intended to provide application-wide theming. They are not connected to Brand tokens, which are tenant-specific theming.

View our system color tokens

Background

Colors with the prefix bg are page-level background colors. Use bg/default for most pages. Use bg/alt to emphasize primary content containers, such as cards.

View our background color tokens

Surface

Surfaces are visual containers that hold content that sit on top of the page or other surfaces. Use surface colors on cards, modals, panels, dropdowns, sheets, etc.

View our surface color tokens

Surface colors may be nested within each other to create a visual hierarchy. When nesting surfaces, alternate between the default and alt surface colors.

Use surface/alt to suppress less important content and draw attention to primary surfaces. Muted surfaces visually recede, pushing focus towards main content while still creating a clear boundary without the use of shadows or colors.

Accent

Accent colors are high-emphasis background colors used to draw attention to main actions and statuses.

View our accent color tokens

Interaction

State layers are overlays placed between or in front of background and foreground during user interaction. surface and accent colors use different tokens to create this effect (surfaces are lighter, accents are darker).

View our surface color tokens

Foreground

Use foreground colors (or fg) to set the color of text and icons.

All fg colors except fg/inverse can be used on surface/default, bg/default, surface/alt, and bg/alt.

Match fg colors to the modifier of their background or surface color. bg/default and surface/default use fg/default. surface/primary uses fg/primary. surface/primary/strong uses fg/primary/strong.

Use fg/inverse on accent backgrounds (with the exception of accent/warning and accent/caution).

Use fg/contrast on accent/warning and accent/caution instead of fg/inverse.

View our foreground color tokens

Border

Border colors are used to create edges, dividers, and input field boundaries.

View our border color tokens

Shadow

Shadow colors are used on the base and ambient shadows that create Depth tokens.

View our shadow color tokens

Focus

Focus colors are used to indicate focus for keyboard navigation and accessibility. Apply to all interactive elements that receive keyboard focus.

View our focus color tokens

Status

Status colors include danger, success, and warning. These colors are not brandable. Use these to denote the status of an object, task, or flow. If you’re interested in displaying the status of something, check out the Status Indicator component.

View our accent color tokens

Using our Colors

• Use bg for page backgrounds. Use one bg color per view, unless designing a split view.
• Use surface for containers like cards, modals, and panels.
• Use accent for high-emphasis actions like primary buttons and status indicators.
• Use fg for text and icons. Match fg colors to their background or surface modifier.
• Use border for edges, dividers, and input field boundaries.
• Use shadow for depth and elevation. Always combine shadow/base and shadow/ambient together.
• Use focus for keyboard focus indicators on all interactive elements.
• Use system color tokens, not base colors or raw values.
• Use defined contrast pairs to guarantee accessibility.

Web Examples

Canvas Tokens can be consumed as either JavaScript variables or as CSS variables and class names. The JavaScript token values reference CSS variable names, so if you’re using JS tokens, you’ll also need to import the CSS variables in your application.

Javascript / Typescript

// styles.ts
import {system} from '@workday/canvas-tokens-web';
 
const styles = {
  backgroundColor: `var(${system.color.bg.default})`,
};

CSS

// styles.css
@import '@workday/canvas-tokens-web/css/system/_variables.css';
.card {
  background-color: var(--cnvs-sys-color-bg-default);
}

iOS Examples

Coming soon!

Android Examples

Coming soon!

All Colors

Deprecated Brand Colors

Deprecated Colors