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.

General Brand Colors

From backgrounds, to selection, to icons, these brand colors apply to most pages in the Workday product.

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

From backgrounds, to selection, to icons, these general colors apply to most pages in the Workday product.

View our background color tokens

Text

Use these color tokens to color text such as body, label, or heading. For more information on how typography is used in Workday, check out Type token page.

View our text color tokens

Icon

Use these color tokens for System Icons only. Accent and Applet Icons are considered illustrations and could use either Background or Static Color Tokens.

View our icon color tokens

Foreground

Use foreground color or “fg” for short when both text and icon in a component must change color value together. They’re currently used in buttons, segmented controls, table cells, status indicators, banners, and tabs components.

Some of our Canvas components, such as menu, search input, prompt inputs, toasts, and pills, use separate colors for text and icons.

View our foreground color tokens

Border

These are used for border colors only.

View our border color tokens

Shadow

The default color for drop-shadows.

View our shadow color tokens

Static

Use the following colors 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.

Note: These colors are intended for decorative purposes only. Use these when the Brand and System Colors are not sufficient. Be careful using these for text, as some colors do not pass contrast ratio guidelines.

View our static color tokens

Brand Color Tokens

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.

View our brand color tokens

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);
}

All Colors

Hover over a color or use your keyboard to tab to it to access a button which can be pressed to copy the hexadecimal code for that color to your clipboard.