Tokens Explained

Tokens are the smallest pieces of our Design System with the primary function of storing UI information. They enable building components and patterns with consistency across our platforms.

Everything created in Canvas uses tokens, which represent preset values like hex values or rem. They are like the DNA of the Workday product family. So it’s important to utilize tokens instead of hardcoded values when creating and building with Canvas. It will make the job of the designer, engineer and quality assurance person much easier by removing room for error as things are designed and built.

Certain tokens are semantic and named for their intended purpose (ex: color.bg.status.success sets a background color for success elements). This allows the application of tokens to be consistent, even if the core value they point to, like a hex code, changes.

Benefits Of Canvas Tokens

• Enable scalable visual changes at the core token level that flows across all Canvas components
• Increase cohesion across Canvas components by standardizing token usage with semantic tokens
• Empower product teams to build custom components using semantic tokens that can evolve with Canvas tokens

Tokens make decision making much easier and the output more accurate. When designing and building, always use Canvas Tokens to inform the design decisions you make, such as:

Token Structure

There are three level of Canvas tokens, which includes:

1. Base Tokens: tokens that represent hard coded values like a hex code or rem value. These tokens are maintained by the Canvas Design System team and should rarely be used by product teams.
2. System Tokens: tokens that are intended to be used by product teams. They are semantic, meaning that they are named according to how they should be used (ex: color.bg.status.success sets a background color for success elements). These tokens are the most similar to what is available in Canvas today (ex: type, depth).
3. Brand Tokens: tokens that are used to set key brand colors and can be used by tenants to theme certain components to reflect their brand color.

Canvas tokens use rem as the standard unit of measurement, except for color tokens which are represented as hex values.

Token Naming Convention

Canvas tokens follow a standard naming convention that contains four core parts:

1. Namespace: used to indicate where the token is coming from, like Canvas or another design system / product team
2. Level: used to indicate the token level (ex: base, system)
3. Property: used to indicate the type, concept, or category of the token (ex: color, type, shape)
4. Modifier: used to indicate the variant, state, or mode of the token (ex: lightest, hover)

Base Tokens

Base tokens are tokens that are tied to hard coded values like a hex code or rem value. These tokens are maintained by the Canas Design System team and are subject to change. Base tokens include: color, letter spacing, font size, box shadow, etc. These tokens are used by the Canvas Design System team to build and support system level tokens.

Base Color Token Example

System Tokens

System tokens exist one layer above of base level tokens. They can alias base tokens, but are meant to be more semantic and contextual for their intended use cases. These tokens are the most similar to what is available in Canvas today and include the following types: color, type, depth, shape, space, opacity

Product teams should use system tokens when customizing Canvas components or building their custom components.

System Color Token Example

Note: Figma Color Styles are used for color tokens.

System Type Token Example

Note: Figma Text Styles are used as type tokens. Color tokens are applied seperately.

Brand Tokens

Brand tokens are a subset of system tokens. These tokens are used to set key brand colors and can be used by tenants to theme certain components to reflect their brand color. Brand tokens can be used to set key color categories like primary, success, and alert. Product teams will typically not need to use brand tokens unless they are setting tenant level theming or are creating new custom components that are meant to be themable.

Brand Color Token Example