Color Palette
The global palette is Workday's shared color palette meant for use across all Workday products and services.
Global Palette
The Canvas palette is Workday’s shared color palette meant for use across all products and platforms. It includes 11 colors and 2 neutrals, each with 13 shades.
Colors are designed in the okLCH (lightness, chroma, hue) color space to feel perceptually balanced, meaning that colors with the same step value appear similar in brightness. This uniformity makes accessible contrast ratios more predictable between steps and helps create smooth transitions when switching between different contexts, such as themes and modes.
The global palette extends Workday’s brand colors to create functional tones and tints meant for use in interface and product design. Colors are organized into color families (‘blue’, ‘red’, ‘green’) and a tonal scale from lightest (0) to darkest (1000), with each step serving a specific role in the interface.
Color scales follow a gradual progression in vibrancy, peaking at the midpoint, before decreasing again. This progression creates softer surface colors at the tailends, and more vibrant accents in the middle.
Accent Colors
Accent colors are saturated colors - like blue, red, orange, purple. Accent colors are used to draw attention towards them and should be used sparingly, and for a specific purpose.
Do
- Use accent colors to highlight important information
- Use existing color roles to inform selection
- Use accent colors sparingly
- for important actions, alerts, or states
Don’t
- Avoid decorative use of accent colors
- Avoid applying accent colors to secondary or supporting content
Neutral Colors
Neutrals are greyscale colors, used for backgrounds, foregrounds, or as a base for alpha colors. The palette includes 2 neutrals meant for different purposes.
- Slate is a tinted neutral built from Workday’s brand blue. It’s meant for secondary backgrounds, borders, and text for subtle styling that pairs well with brand accents.
- Neutral is an achromatic greyscale with no hue or chroma, from white to black. It’s meant for consistent contrast against backgrounds, such as prose text.
Do
- Use Neutral for prose and structural content - Use Slate for secondary UI elements, borders, and text
Don’t
- Use Neutral and Slate interchangeably
Alpha Colors
Alpha colors are colors with transparency that adaptive dynamically to background colors. This creates a natural layering effect on the background without requiring new color definitions for each background.
Do
- Use alpha colors when elements need to adapt to different backgrounds - Use alpha colors in a consistent way throughout the experience - Ensure sufficient contrast for underlying content
Brand Palette
Brand colors represent Workday’s core brand and identity. Reserve use for brand moments, marketing materials, and other use cases specific to the Workday brand.
For more information, see Workday’s brand guidelines.
Product Palette
The product palette is a subset of the global palette meant for use when designing Workday features and interfaces. Colors in the product palette are assigned color roles through the use of design tokens.
Color Roles
Color roles assign a purpose to colors in the palette, specifying when and how to use that color.
When building Workday interfaces, use system design tokens to ensure that color roles are
consistently applied throughout the admin. For example, the positive color role is used to
indicate success and task completion.
To learn more about color roles, see Color Roles.
Design Tokens
Design tokens represent a design decision as structured data. Tokens store visual properties like color and spacing in a platform-agnostic format, such as JSON. Those decisions are then transformed into platform specific pacakges in a format ready to be consumed by each platform.
Defining colors as tokens removes the need to redefine colors for each platform. Instead, colors are defined in a single location and distributed to each platform, enabling more consistent, maintainable, and systemic change over time.
Base Tokens
Base tokens are static colors whose values do not change. All colors in the global palette are represented as base tokens. Base colors are organized using a tonal scale, from lightest to darkest.
Brand Tokens
Brand tokens are used to enable brand/tenant level theming. This means that colors are subject to change depending on the customer’s brand.
They are not connected to system tokens, which are meant for application-wide use.
For a full list of brand tokens, see Brand Tokens.
System Tokens
System tokens applies a role to a color. For example, sys.color.bg.critical.default can be read as
“the default background color for critical elements”.
System colors are mapped to Base colors. For example, sys.color.bg.critical.default is mapped to
base.palette.red.600. This is how theming is applied. Creating a new theme means that the value of
the system color is swapping with another color.
Approaching color this way makes the process part of a larger system instead of an isolated choice. Instead of asking “what color should this be?”, the question becomes “what role does this element play in the interface?”.
For a full list of system tokens, see System Tokens.
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.