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 color tokens (system.color.*) provide application-wide semantics for backgrounds, surfaces, text, borders, and states. They are separate from tenant Brand Colors above and from the base palette in All Colors.

Use the tables below to choose a token. Each row includes when to use that token.

View our system color tokens 

Background

Page-level backgrounds only. Use system.color.bg.default for most views. Use system.color.bg.alt.default to separate page sections (not for cards—use surface tokens).

Surface

Containers on top of the page: cards, modals, navigation, popovers, semantic status surfaces, and interaction overlays. Alternate surface.default and surface.alt.* when nesting containers. Use surface.overlay.scrim behind modals and sheets.

Accent

Solid, high-emphasis colors for indicators and key UI (not large backgrounds). Pair with matching fg tokens. Use accent.muted.* for secondary emphasis.

Interaction

State layers for hover and pressed states. Use surface.overlay.hover.default and surface.overlay.pressed.default on neutral surfaces. Use accent.overlay.hover and accent.overlay.pressed on accent-colored elements.

Tenant Brand (System)

Tenant-themeable system tokens (system.color.brand.*) for primary, critical, caution, and positive semantics—surfaces, accents, text, borders, and focus rings. For selected list/table/cell states, use brand.surface.selected with brand.fg.selected.

Foreground

Text and icon colors on surfaces and accents. Use fg.default / fg.strong / fg.stronger for body and headings; fg.muted.* for hints; fg.link.default and fg.link.hover for hyperlinks (not tenant-themed—use brand.fg.primary.* for branded text). Use fg.inverse on dark or accent fills except accent.warning (use fg.contrast.* there).

Border

Edges, dividers, and inputs. Use border.input.* for form fields; semantic border.danger / border.warning / border.info.default with matching surfaces.

Shadow

Shadow color tokens work with Depth tokens. Always combine shadow.base and shadow.ambient.

Focus

System focus rings (system.color.focus.*) for keyboard focus on neutral UI. Use brand.focus.* for tenant-themed focus on branded or semantic controls.

Status

Status semantics use non-brandable surface.{danger,success,warning}.*, matching fg.*, border.*, and accent.* tokens. For status UI patterns, see Status Indicator.

Using Our Colors

• Use bg for page backgrounds. One bg token per view unless designing a split view.
• Use surface for cards, modals, navigation, and panels.
• Use accent for high-emphasis indicators and key actions (not large backgrounds).
• Use brand system tokens when the experience should follow tenant theme (including selection).
• Use fg for text and icons; use fg.link for links; match semantic fg to semantic surfaces.
• Use border for edges, dividers, and inputs.
• Use shadow with depth tokens (shadow.base + shadow.ambient).
• Use focus and brand.focus for keyboard focus indicators.
• Use system color tokens, not base palette values or raw hex.
• Use defined contrast pairs to meet accessibility requirements.

Web Examples

Sana 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

Deprecated Brand Colors

Deprecated Colors