Announcements

Canvas Tokens v4 Release

Canvas Tokens v4 brings important updates to support the Workday Brand Refresh. This release focuses on improved scalability, clearer token organization, and comprehensive semantic token coverage.

What’s Changing

For Everyone:

• Brand tokens now use numerical names (25, 50, 100…975) instead of descriptive names (darkest, darker, base, light, etc.) for better scalability across products
• Extended alpha scales (A25, A50, A100, A200) across all base color palettes for subtle layering
• Comprehensive surface tokens (system.color.surface.*) and deprecating the previous system.color.bg.* tokens
• Semantic tokens for size, space, shape, and breakpoints with clearer naming
• Typography updates using sm/md/lg instead of small/medium/large

Important: Deprecation, Not Replacement

Old tokens are deprecated, not deleted. All deprecated tokens will continue to work, they now point to their replacement values. We strongly recommend migrating to the new token names for better code clarity and future compatibility, but your existing code won’t break.

Exception - Breaking Change: > system.color.border.inverse has been renamed to system.color.border.inverse.default. You must update this token in your code.

Key Migrations

Brand Tokens:

// Before (deprecated, but still works)
brand.primary.base → brand.primary.600
brand.error.lightest → brand.critical.25
brand.common.focus-outline → brand.common.focus

Surface Tokens:

// Before (deprecated, but still works)
system.color.bg.transparent.strong → sys.color.surface.overlay.hover.default
system.color.bg.alt.softer → sys.color.surface.raised

Space & Size Tokens:

// Before (deprecated, but still works)
space.x4 → padding.md (for padding) or gap.md (for gaps) or size.sm (for dimensions)
shape.zero → shape.none
shape.round → shape.full

Typography:

// Before (deprecated, but still works)
system.type.subtext.medium → system.type.subtext.md

Breaking Change:

// Before (breaking change - must update)
system.color.border.inverse → system.color.border.inverse.default

What’s New

• AI tokens for AI-related surfaces, foregrounds, and accents
• Contrast tokens for high-emphasis areas
• Interaction overlays for hover/pressed states
• Semantic foreground colors for info, danger, warning, success states
• New large border radii (shape.xl, shape.xxl, shape.xxxl) for modern, rounded designs
• Extra-large breakpoint (breakpoints.xl at 1440px) for wide monitors

Getting Started

1. Review the full upgrade guide for complete token mappings
2. Update system.color.border.inverse to system.color.border.inverse.default
3. Start migrating deprecated tokens to their new equivalents
4. Take advantage of new semantic tokens for clearer, more maintainable code
5. Use Canvas Kit’s MCP which has resources for our v4 tokens.

6. Use Figmod to help designers migrate to the new tokens

Questions? Check the upgrade guide or reach out to the Canvas team.

Canvas v14 Release

Canvas v14 will include the first set of design system changes to align with our refreshed brand guidelines. It will be released on September 10th, 2025 with updates to Canvas Kit and the Canvas Figma libraries. Please review our Canvas v14 Upgrade Guide for detailed instructions on how to upgrade to v14.

We highly recommend you consult our v14 Visual Changes page for a quick visual reference of what’s changed.

Release Overview

The table below contains a high-level overview of the updates that will be rolled out as part of the v14 release. The impact for designers and developers are defined as follows:

• None: inapplicable to the role or no actions are required for users to adopt the change; updates will be applied automatically once users upgrade to Canvas Kit v14 and/or switch to the new v14 Canvas Web Figma library
• Low: minor changes are required for users to adopt the change
• Medium: a moderate amount of changes are required for users to adopt the change, such as switching out UI elements
• High: a large amount of changes are required for users to adopt the change, requiring product teams to make major design or development decisions

New Color Palette

We’ve overhauled our color system to align with Workday’s new brand identity, while also making improvements to our underlying colors to be more functional, accessible, and extensible. These updates remap our existing brand and system tokens to our new color palettes. We’ve also introduced new token variants that provide better cover for the use cases of Workday’s diverse products.

All changes below will be available as a new Tokens library in Figma.

Restructured Base Color Names

To reduce ambiguity over color values, Base colors have been renamed to use common terms (like red.600) that are easier to understand for everyone. Previously, colors in the palette were named after Jellybean flavors (i.e.ToastedMarshmallow). While fun, understanding which colors these names represented was often a learning curve - depending on cultural context and personal interpretation.

Brand Aligned

The color palette is built to be expressive so that brand colors may appear naturally across multiple contexts, formats and devices. Brand colors are used as anchor points to create tones and tints that feel like natural extensions of the core brand. Incorporating brand colors ensures that marketing and product teams can pull from the same palette, helping maintain a unified brand identity.

Accessible Foundation

Colors are built to pass WCAG 2.1 contrast guidelines for both text and non-text contrast at defined intervals in the scale. This makes it simpler to create accessible pairings without needing to reach for a contrast calculator.

Expanded Tonal Scale

The color scale has been increased from 5 to 13 steps. Steps in the new scale go from 0 (white) to 1000 (black), each step being designed for at least one use case. Colors are designed to feel perceptually balanced - meaning colors with the same step number (ex. red.200 and blue.200) will feel similar in brightness and saturation.

Color Roles

Colors in the base palette are assigned color roles through system tokens.

OKLCH

Colors are designed using oklch, a perceptually uniform color space. oklch ensures that two colors with the same lightness will appear equal in brightness – a longstanding issue of traditional color spaces like RGB and HSL. oklch provides the following benefits:

• More predictable contrast ratios
• Scales well with theming, modes
• Device and gamut independent

Learn more about oklch here.

Note: Switching to oklch means that colors will be perceived differently on a tonal scale.

Important: If your application lives within another application that already imports the CSS variables (v3 of our tokens), you do not need to import these again. If you need tokens for local development, add them via a plugin or directly to the environment but do not ship code to production with duplicate token imports. If you have any questions on whether this applies to your application, don’t hesitate to reach out to the team in #ask-canvas-kit.

Token Addition and Changes

The following changes will be part of tokens v3.

Brand

The following brand tokens have been added:

• brand.action.lighter
• brand.action.darker
• brand.common.alertOuter
• brand.alert.lighter
• brand.error.lighter
• brand.success.lighter
• brand.primary.lighter
• brand.neutral.lighter

System

The new shape token system.shape.x1-half has been added.

The following tokens have been changed:

• system.color.bg.transparent became system.color.bg.transparent.default.

The following background tokens have been added:

• Background AI colors (system.color.bg.ai.*): default, strong, stronger, strongest variants.
• Caution background colors (system.color.bg.*): softest, soft variants.
• Critical background colors (system.color.bg.*): softest, soft variants.
• Positive background colors (system.color.bg.positive.*): softest, soft variants.
• Primary background colors (system.color.bg.primary.*): softest, softer variants.
• Info background colors (system.color.bg.info.*): softest, softer, soft, default, strong, stronger variants.
• Transparent background colors (system.color.bg.transparent.*): strong, stronger variants.

The following foreground tokens have been added:

• Caution foreground colors (system.color.fg.caution.*): softer, soft and stronger variants.
• Critical foreground colors (system.color.fg.critical.*): softer, soft, strong and stronger variants.
• Positive background colors (system.color.fg.positive.*): soft, default, strong and stronger variants.
• Info background colors (system.color.fg.info.*): softer, soft, default, strong and stronger variants.
• Primary background colors (system.color.fg.primary.*): softer, soft and stronger variants.

The following border tokens have been added:

• AI Border color: system.color.border.ai
• Info Border color: system.color.border.info.default

The following text or icon tokens have been added:

• AI text color: system.color.text.ai
• Disabled icon color: system.color.icon.disabled
• Caution colors (system.color.text/icon.caution.*): softer, soft and stronger variants.
• Critical colors (system.color.text/icon.critical.*): softer, soft, strong and stronger variants.
• Positive background colors (system.color.text/icon.positive.*): softer, soft, default (new for text only), strong and stronger variants.
• Info text colors (system.color.text.info.*): softer, soft, default, strong and stronger variants.
• Info icon colors (system.color.icon.info.*): default, strong and stronger variants.
• Primary colors (system.color.text/icon.primary.*): softer, soft and stronger (new for icon only) variants.

The following static tokens have been added:

• Amber static colors (system.color.static.amber.*): softest, softer, soft, default, strong, stronger and strongest variants.
• Blue static colors: (system.color.static.blue.*): softest, softer, stronger and strongest variants.
• Gray static colors: (system.color.static.gray.*): softer, soft and strongest variants.
• Green static colors: (system.color.static.green.*): softest, softer, stronger and strongest variants.
• Red static colors: (system.color.static.red.*): softest, softer, stronger and strongest variants.

The following static tokens have been deleted:

• All gold static colors
• All orange colors

These updates will help ensure a more cohesive and adaptable visual language across all of our products that best aligns with Workday’s refreshed brand guidelines. Please refer to the updated documentation that will be released with v14 for detailed usage guidelines.

Updates to CanvasProvider and CanvasTheme

We’ve significantly improved our theming documentation for developers. Please consult our new Canvas Kit Theming Guide.

The CanvasTheme type will be updated to add a new lighter property to each color palette to better align with the refreshed brand guidelines.

The Canvas Provider has removed default brand tokens allowing CSS brand tokens to cascade from the root element that defines them all of the way down to our components. This change allows applications to import and define CSS variables to apply theming more easily. As part of this change, if you pass a main color via the theme prop, a palette is generated using oklch instead of the chroma.js brighten and darken methods. This may affect your palette. If you wish to still use chroma.js logic, you can directly use createCanvasTheme to do so. We strongly advise you to theme our components via CSS variables instead of the theme prop.

InputProvider Removal

InputProvider was added to determine what event triggered the focus ring around focusable elements. When IE11 was supported, this was needed to determine when to apply focus styles. After dropping support for IE11, our components use :focus-visible which uses browser heuristics to apply focus styles.

Caution State Renaming

All instances where visual states are being referred to as alert or warning will be renamed to caution. This change is intended to better align with the new color palette and create both visual and semantic consistency.

Component Updates

The following components will be updated to use the new brand tokens:

• Breadcrumbs (removed underlines)
• Buttons and Action Bar (new styles)
• Card (new default styles and new variants)
• Count Badge (new variant styles)
• Expandable (new styles)
• Hyperlink (new stand alone variant)
• Information Highlight (new styles)
• Loading Dots (new styles)
• Loading Sparkles (uses new AI color)
• Pill (new styles)
• Segmented Control (changed to use stencils only)
• Select / Main and MultiSelect (new styles for shape and error states)
• Status Indicator (new variants and styles)
• TextInput / Main (new styles for shape and error states)
• Text Area / Main (new styles for shape and error states)
• Toolbar Dropdown Button (changed to use stencils only)
• Toolbar Icon Button (changed to use stencils only)

New AI Ingress Button

A new AI Ingress Button has been added to Labs. This component is intended to trigger an AI chatbot when clicked.

New Avatar Component

A new Avatar component has been added to Preview. This component will better align with the refreshed brand by providing support for both initials and images. The Avatar in Main has been deprecated; please use the one in Preview.

If you are using Expandable or Pill these components have been updated to use the new Avatar in Preview.

Deprecated Components

The following components have been deprecated:

• Avatar (Main)
• Combobox (Labs)
• Radio (Main)
• Search Form (Labs)
• Segmented Control (Main)
• Side Panel (Main)
• SearchForm (Labs)
• canvas-kit-react legacy tokens (Main)

The old javascript based tokens from @workday/canvas-kit-react/tokens package have been deprecated. Please use this migration guide to transition to v2 tokens. V14 requires the installation of v3 of our tokens.

Reminder: If your application lives within another application that already imports the CSS variables (v3 of our tokens), you do not need to import these again.

Component Removals

The following components have been removed from the codebase and may no longer be consumed:

• DeprecatedButton (Main)
• Menu (Preview)
• TextArea (Preview)
• TextInput (Preview)

Previous Releases

• Canvas v13 Announcements
• Canvas v12 Announcements
• Canvas v11 Announcements
• Canvas v10 Announcements
• Canvas v9 Announcements
• Canvas v8 Announcements
• Canvas v7 Announcements
• Canvas v6 Announcements