Canvas

# Canvas — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Workday. "Canvas" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Canvas
**Owner:** Workday
**Official documentation:** https://canvas.workday.com/
**Visual character:** HR-software approachability: food-named palette (Blueberry, Cinnamon, Soap), Roboto reliability, and enterprise forms made humane.

---

## Summary

Enterprise-B2B design system covering HR, finance, and the rest of the back-office stack.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Blueberry 400 / Primary | `#0875e1` | `--cnvs-base-palette-blueberry-400` | Primary actions and links |
| Black Pepper 400 Text | `#333333` | `--cnvs-base-palette-black-pepper-400` | Primary text |
| Licorice 300 | `#767676` | `--cnvs-base-palette-licorice-300` | Secondary text |
| French Vanilla 100 | `#ffffff` | `--cnvs-base-palette-french-vanilla-100` | Surfaces |
| Soap 200 | `#f0f1f2` | `--cnvs-base-palette-soap-200` | Subtle background |
| Soap 400 Border | `#dfe2e6` | `--cnvs-base-palette-soap-400` | Borders |
| Cinnamon 500 Error | `#de2e21` | `--cnvs-base-palette-cinnamon-500` | Errors |
| Greenapple 400 Success | `#43c463` | `--cnvs-base-palette-greenapple-400` | Success |
| Cantaloupe 400 Warning | `#ffa126` | `--cnvs-base-palette-cantaloupe-400` | Warnings |

## Typography

- **Body:** Roboto — weights 400, 500, 700 — `Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| title-large | `28px` | `36px` |
| heading-medium | `20px` | `28px` |
| body-large | `16px` | `24px` |
| body-small | `14px` | `20px` |
| subtext-medium | `12px` | `16px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px` · `40px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `2px` |
| medium | `4px` |
| large | `8px` |
| circle | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| depth-1 | `0 1px 4px rgba(31,38,46,0.12)` |

## Quick start (CSS)

```css
/* Canvas — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://canvas.workday.com/ */

:root {
  /* Color */
  --cnvs-base-palette-blueberry-400: #0875e1; /* Primary actions and links */
  --cnvs-base-palette-black-pepper-400: #333333; /* Primary text */
  --cnvs-base-palette-licorice-300: #767676; /* Secondary text */
  --cnvs-base-palette-french-vanilla-100: #ffffff; /* Surfaces */
  --cnvs-base-palette-soap-200: #f0f1f2; /* Subtle background */
  --cnvs-base-palette-soap-400: #dfe2e6; /* Borders */
  --cnvs-base-palette-cinnamon-500: #de2e21; /* Errors */
  --cnvs-base-palette-greenapple-400: #43c463; /* Success */
  --cnvs-base-palette-cantaloupe-400: #ffa126; /* Warnings */

  /* Typography */
  --font-body: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Type scale */
  --text-title-large: 28px /* line-height 36px */;
  --text-heading-medium: 20px /* line-height 28px */;
  --text-body-large: 16px /* line-height 24px */;
  --text-body-small: 14px /* line-height 20px */;
  --text-subtext-medium: 12px /* line-height 16px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;

  /* Radius */
  --radius-small: 2px;
  --radius-medium: 4px;
  --radius-large: 8px;
  --radius-circle: 9999px;

  /* Elevation */
  --shadow-depth-1: 0 1px 4px rgba(31,38,46,0.12);
}
```

## Origin

Canvas is Workday's design system, public since 2019, supporting the full Workday product surface — HCM, Financial Management, Adaptive Planning. It's open on GitHub under a permissive license and ships React, Web Components, and Figma libraries.

## Governance

Centralized design-systems team at Workday owns Canvas; component contributions follow a documented RFC process. Workday's design organization is large and the system reflects that — every component goes through formal accessibility, internationalization, and design review before shipping.

## Known for

- Enterprise data table mastery — Canvas's tables handle the kind of multi-thousand-row HR and finance data Workday's surfaces routinely render.
- Compliance-grade accessibility — Workday ships to public-sector customers and the system reflects that bar (WCAG AA throughout, AAA where feasible, formal VPAT documentation).
- Theming and white-labeling discipline — the system supports customer-tenant theming as a first-class feature, not a hack.

## Underrated

- The form-pattern library covers real HR and finance scenarios: payroll entry, benefit enrollment, expense reports — patterns most public design systems duck.
- The localization layer carries explicit treatment for currency, date, and number formatting in 30+ locales — production-grade i18n.

## Watch out for

- Visual identity is Workday-flavored and reads as enterprise; consumer products will need full retheming.
- Component breadth is large and assumes Workday-style data complexity; small product surfaces will use a thin slice.

## Components worth studying

- **Table** — Enterprise-scale data grid with virtualization, multi-column sort, sticky columns, async filtering, and bulk actions — built for thousand-row HR data.
- **Form Field** — Standardized input wrapper with label, helper text, validation state, and explicit accessible labelling — the reference for enterprise form ergonomics.
- **Page Header** — Multi-row page chrome with breadcrumbs, page title, action toolbar, and contextual sub-nav — the canonical SaaS app shell.

## When to choose Canvas

Study Canvas if you're building B2B SaaS for enterprise — HR, finance, ERP, planning. The data-table and form patterns are the reference. Don't lift the brand; the patterns are the reusable layer.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Canvas by Workday — Enterprise-B2B design system covering HR, finance, and the rest of the back-office stack. Character: HR-software approachability: food-named palette (Blueberry, Cinnamon, Soap), Roboto reliability, and enterprise forms made humane. Use a primary colour near #0875e1, the typeface "Roboto" (or a close equivalent), corner radius around 2px, a spacing rhythm on a 4px base. Lean into what it's known for: Enterprise data table mastery — Canvas's tables handle the kind of multi-thousand-row HR and finance data Workday's surfaces routinely render. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [Canvas design system](https://canvas.workday.com/)
- [Canvas Kit on GitHub](https://github.com/Workday/canvas-kit)
- [Workday accessibility](https://www.workday.com/en-us/accessibility.html)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/workday-canvas) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._