--- version: alpha name: Workday description: Canvas Design System — enterprise human capital management through deep navy authority, Workday Blue as the singular interactive accent, Acid Grotesk weight contrast, pill-shaped CTAs on a clean white canvas, and purposeful soft-shadow depth. colors: # Canvas + surfaces background: "#f5f6f8" # light off-white app shell surface: "#ffffff" # white cards, panels, modals surface-navy: "#022043" # deep navy — footer, reversed hero surfaces # Ink / text ink: "#022043" # primary text — Workday's deep navy doubles as body ink ink-secondary: "#3d4f61" # subdued labels, secondary copy ink-tertiary: "#6b7d8f" # meta text, captions, muted state on-primary: "#ffffff" # text on Workday Blue CTA buttons # Brand accent — Workday Blue primary: "#0057ae" # Canvas primary interactive — buttons, links, focus rings primary-hover: "#0068d1" # lighter on hover — from dembrandt palette primary-dark: "#022043" # deep navy variant for reversed contexts primary-container: "#dde9f7" # tinted blue bg for selected/highlighted states # Semantic success: "#1d7a40" # green for positive status success-bg: "#d4f0df" # tinted success container warning: "#8a5a00" # amber for cautionary states warning-bg: "#feecc8" # tinted warning container error: "#c93333" # red for error/destructive error-bg: "#fde8e8" # tinted error container # Borders / dividers border: "#b6c1cc" # card border, input border — cool blue-gray border-subtle: "#dfe2e6" # lighter dividers, separator lines # Shadow tints (opaque approximations — Google format requires hex) shadow-soft: "#c8cbd0" # was rgba(0,0,0,0.12) — card drop shadow flattened shadow-medium: "#b0b4bb" # was rgba(0,0,0,0.2) — elevated panel shadow flattened shadow-focus: "#0057ae" # focus glow ring color — matches primary typography: display-hero: fontFamily: "'Acid Grotesk', Arial, Helvetica, sans-serif" fontSize: 56px fontWeight: 800 lineHeight: 1.14 letterSpacing: -1.12px display: fontFamily: "'Acid Grotesk', Arial, Helvetica, sans-serif" fontSize: 48px fontWeight: 800 lineHeight: 1.17 letterSpacing: -0.96px heading-section: fontFamily: "'Acid Grotesk', Arial, Helvetica, sans-serif" fontSize: 40px fontWeight: 800 lineHeight: 1.20 letterSpacing: -0.4px heading-sub: fontFamily: "'Acid Grotesk', Arial, Helvetica, sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.33 letterSpacing: 0px body-large: fontFamily: "'Acid Grotesk', Arial, Helvetica, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.40 letterSpacing: 0px body: fontFamily: "'Acid Grotesk', Arial, Helvetica, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0px nav-link: fontFamily: "'Acid Grotesk', Arial, Helvetica, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.50 letterSpacing: 0px button-ui: fontFamily: "'Acid Grotesk', Arial, Helvetica, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.50 letterSpacing: 0px label-uppercase: fontFamily: "'Acid Grotesk', Arial, Helvetica, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.43 letterSpacing: 1.12px caption: fontFamily: "'Acid Grotesk', Arial, Helvetica, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.43 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 32px 3xl: 48px 4xl: 64px rounded: none: 0px sm: 4px md: 8px lg: 12px pill: 24px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 20px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-primary-active: backgroundColor: "{colors.primary-dark}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.primary-dark}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 20px borderColor: "{colors.primary-dark}" borderWidth: 0px button-secondary-hover: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" button-ghost: backgroundColor: "transparent" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 12px 20px button-ghost-hover: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary-hover}" card: backgroundColor: "{colors.surface}" rounded: "{rounded.md}" padding: 24px borderColor: "{colors.border}" borderWidth: 1px card-hover: borderColor: "{colors.primary}" input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 10px 12px borderColor: "{colors.border}" borderWidth: 1px input-focus: borderColor: "{colors.primary}" outlineWidth: 2px outlineColor: "{colors.shadow-focus}" badge: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px badge-success: backgroundColor: "{colors.success-bg}" textColor: "{colors.success}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px badge-error: backgroundColor: "{colors.error-bg}" textColor: "{colors.error}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px nav-header: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 0px 20px nav-footer: backgroundColor: "{colors.surface-navy}" textColor: "{colors.on-primary}" typography: "{typography.caption}" padding: 48px 64px tooltip: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.caption}" rounded: "{rounded.md}" padding: 6px 12px --- # Workday Design System ## Overview Workday's Canvas Design System is enterprise UI at its most authoritative: a system built to make complex HR, finance, and operations software feel trustworthy, accessible, and calm. The canvas opens on a clean white `{colors.surface}` with `{colors.background}` shell — a barely-there tint that layers content panels without leaning on shadow. The deep navy `{colors.primary-dark}` anchors both the page ink and the reversed footer, giving Workday's surfaces a sense of institutional weight that competitors in the space rarely achieve through color alone. The brand accent is precise and intentional. `{colors.primary}` — Workday Blue at `#0057ae` — serves every interactive moment: primary CTAs, text links, focus rings, selected states. It lives in a pill-shaped button at 24px border-radius, a deliberately rounded form that softens the enterprise edge and signals approachability without feeling playful. The hover state shifts subtly toward `{colors.primary-hover}`, while the deep navy reserved for nav and footer creates a moody, dimensional contrast that anchors the experience. Typography is set entirely in Acid Grotesk, a custom geometric sans-serif from FFF (Future Fonts) that Workday commissions for its Canvas system. The extreme weight contrast is the story: 800 weight display text at up to 56px carries section-level authority, while 400-weight body copy at 16px reads easily across dense data interfaces. There is no middle register — the system jumps from heavy display to readable body without a semi-bold crutch. A tracked uppercase label variant at 700 weight and 1.12px spacing handles the category labels and metadata callouts that enterprise UI relies on for scannable hierarchy. **Key Characteristics:** - White-first canvas — `{colors.surface}` primary, `{colors.background}` shell — surfaces read as active documents without competing gray levels - Workday Blue `{colors.primary}` as the singular interactive accent — every affordance, every focus ring, every link anchors to this accessible azure - Deep navy `{colors.primary-dark}` (`#022043`) doubles as primary ink AND reversed surface — one palette token does two jobs - Pill-shaped CTAs — `{rounded.pill}` at 24px radius on all primary and secondary buttons, balancing authority with accessibility - Acid Grotesk at extreme weight contrast — 800 for all display type, 400 for body, 700 only for UI labels - 8px spacing base — `{spacing.sm}` as the atom; the densest elements start at 4px (`{spacing.xs}`) only for border corrections - Cool blue-gray border system — `{colors.border}` at `#b6c1cc` aligns with the brand's blue-tinted neutrals - Soft shadow depth — `0 4px 8px {colors.shadow-soft}` for cards; elevation is functional, not decorative - Full semantic color system — success, warning, error each with text and tinted container variants - Canvas uppercase labels — tracked `{typography.label-uppercase}` for category headers, status columns, filter chips - Focus glow ring using `{colors.shadow-focus}` matching `{colors.primary}` — accessible and brand-coherent ## Colors ### Primary - **App Shell** (`{colors.background}`): `#f5f6f8` — a cool blue-tinted off-white for the application shell; keeps content panels legible without harsh gray contrast. - **Surface** (`{colors.surface}`): Pure white for cards, forms, modals — the active content layer. - **Primary Ink** (`{colors.ink}`): Workday's deep navy `#022043` used for all body text; authoritative, readable, and consistent with the brand's navy identity. ### Brand Accent - **Workday Blue** (`{colors.primary}`): `#0057ae` — the singular interactive accent applied to all buttons, links, checkboxes, toggles, and focus states. - **Hover Blue** (`{colors.primary-hover}`): `#0068d1` — a lighter, more vivid blue for hover states; the shift is perceptible and responsive without being dramatic. - **Tinted Container** (`{colors.primary-container}`): `#dde9f7` — pale blue background for selected table rows, active chips, and input focus halos. ### Reversed Surfaces - **Deep Navy Surface** (`{colors.surface-navy}`): `#022043` — the reversed footer and occasional hero overlays; the brand's dark anchor. ### Semantic - **Success** (`{colors.success}`): `#1d7a40` on `{colors.success-bg}` `#d4f0df` — green pair for positive status indicators and confirmation states. - **Warning** (`{colors.warning}`): `#8a5a00` on `{colors.warning-bg}` `#feecc8` — amber pair for cautionary messages. - **Error** (`{colors.error}`): `#c93333` on `{colors.error-bg}` `#fde8e8` — high-contrast red pair for destructive actions and validation errors. ### Borders and Shadows - **Border** (`{colors.border}`): `#b6c1cc` — a cool blue-gray shared across cards, inputs, and dividers; consistent with the brand's blue-tinted neutral family. - **Border Subtle** (`{colors.border-subtle}`): `#dfe2e6` — lighter separator for section dividers. - **Shadow Soft** (`{colors.shadow-soft}`): was `rgba(0,0,0,0.12)` — flattened to `#c8cbd0` in Google hex format. Used for card drop shadows at `0 4px 8px`. ## Typography ### Font Family - **Primary**: `Acid Grotesk` (FFF-AcidGrotesk, self-hosted) — a custom geometric sans-serif commissioned by Workday for the Canvas system. Characterized by wide apertures, high x-height, and strong weight differentiation across the 400/700/800 axis. Full stack: `'Acid Grotesk', Arial, Helvetica, sans-serif`. ### Hierarchy The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference rather than restating values. | Token | Use | |---|---| | `display-hero` | Hero headlines, campaign titles at 56px weight 800 | | `display` | Page-level section headers, feature callout titles | | `heading-section` | Major section titles, product area headers | | `heading-sub` | Card titles, modal headers, sub-section labels | | `body-large` | Lead paragraphs, feature descriptions, intro copy | | `body` | All primary content, form help text, data cell text | | `nav-link` | Header navigation items, tab labels at 500 weight | | `button-ui` | All button labels at 700 weight | | `label-uppercase` | Category labels, column headers, filter chips — uppercase with 1.12px tracking | | `caption` | Metadata, timestamps, badge text, secondary UI labels | ### Principles - Weight is tripartite: 800 for all display headings, 700 for UI labels and buttons, 400 for all body — no 500 or 600 weights in prose contexts. - 16px base (`{typography.body}`) is the minimum for body text; `{typography.caption}` at 14px is strictly for data-dense metadata. - Display type carries tight negative tracking (-1.12px at 56px, -0.96px at 48px) — billboard compress without feeling cramped. - The uppercase label (`{typography.label-uppercase}`) at 1.12px spacing is the system's scannable column-header signature — never applied to body or interactive labels. - No italic roles in the base system; emphasis is weight and color. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 8px (`{spacing.sm}`). Workday's Canvas is calibrated for information-dense enterprise views where users spend full days inside the interface. Spacing is generous enough to prevent data fatigue but not so airy that it wastes screen real estate on high-density dashboards. ### Grid and Container - Max content width: ~1440px for marketing pages; app pages use fluid grids within the platform shell - 12-column grid with 24px gutters for feature sections - Platform shell: persistent left navigation rail at 240px expanded, 64px icon mode - Record and dashboard views use responsive column sets defined by viewport breakpoints: 1440px, 1200px, 1024px, 768px, 480px ### Whitespace Philosophy - Generous section gaps (48–64px, `{spacing.3xl}`–`{spacing.4xl}`) on marketing surfaces contrast with compact 12px–16px interior component padding. - Platform UIs adopt 8px and 12px inner spacing to maximize information density while preserving visual rhythm. - Cards default to 24px (`{spacing.xl}`) padding — enough breathing room for multi-field record views. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow; `{colors.border}` 1px | Page-level cards, form panels, record fields | | Subtle (Level 1) | `0 2px 4px {colors.shadow-soft}` | Inline hover states, dropdowns at rest | | Card (Level 2) | `0 4px 8px {colors.shadow-soft}` | Standard cards, product feature tiles | | Elevated (Level 3) | `0 4px 16px {colors.shadow-medium}, 0 8px 32px {colors.shadow-medium}` | Expanded panels, announcement modals | | Dialog (Level 4+) | `0 8px 24px {colors.shadow-medium}` | Modals, full-screen dialogs | | Focus Ring | `0 0 0 2px {colors.shadow-focus}` | Keyboard focus on all interactive elements | **Shadow Philosophy**: Canvas shadows are functional, not decorative. Cards at rest use 1px borders and sit flat; a soft `0 4px 8px` drop shadow only appears when an element truly floats above the document. The focus ring uses `{colors.shadow-focus}` — the same hue as `{colors.primary}` — creating accessible glow rings that reinforce the brand color rather than defaulting to browser chrome. ## Shapes The complete radius scale is in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | Data table rows, inline dividers | | `sm` | 4px | Input fields, small interactive controls | | `md` | 8px | Cards, dropdowns, menus, comboboxes | | `lg` | 12px | Dialogs, notification panels, modal containers | | `pill` | 24px | All primary and secondary buttons — the signature Canvas CTA shape | The 24px pill is Workday's most distinctive shape decision. Where most enterprise systems use conservative 4px–8px buttons, Canvas commits to a fully rounded pill that softens the interface's institutional authority. This radius is reserved strictly for CTAs — cards and inputs use `{rounded.md}` to preserve legibility in data-dense contexts. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them. ### Button Variants - **`button-primary`** — solid `{colors.primary}` fill, white label, pill radius (24px), 12px 20px padding. The primary CTA across all surfaces. - **`button-secondary`** — white fill, deep navy label, pill radius. Used alongside the primary for secondary actions; hover fills with `{colors.primary-container}`. - **`button-ghost`** — transparent fill, `{colors.primary}` text only. Used within card headers, inline toolbars, and contexts where adding a border would create excessive chrome. ### Cards Standard `{components.card}` is a white panel with `{colors.border}` 1px rule, 8px corners, and 24px padding. Hover state elevates the border to `{colors.primary}` to signal interactivity. Product feature cards typically pair a media element above the border with a text section below. ### Inputs `{components.input}` uses white background with `{colors.border}` 1px rule and 4px corners. On focus, a 2px `{colors.primary}` outline ring appears — accessible and brand-coherent. Error state replaces both with `{colors.error}`. ### Badges and Tags `{components.badge}` uses `{colors.primary-container}` fill with `{colors.primary}` text — a tinted pill resting beside record metadata. Semantic variants (`{components.badge-success}`, `{components.badge-error}`) apply the matching semantic ink/container pairs. ### Navigation `{components.nav-header}` renders on white with deep navy text and `{typography.nav-link}` at 16px weight 500. The footer reversal (`{components.nav-footer}`) switches to `{colors.surface-navy}` with white text — the sole dark surface in the system and the brand's deepest expression. ## Do's and Don'ts ### Do - Use `{colors.primary}` for all interactive states — every actionable element, link, toggle, and focus ring; preserve its singularity. - Apply `{rounded.pill}` (24px) to all CTAs; don't introduce intermediate values like 12px or 16px on buttons. - Use deep navy `{colors.primary-dark}` for body ink — it's the system's dual-purpose token that keeps brand color in every text character. - Pair semantic colors together: `{colors.success}` text always on `{colors.success-bg}`, never on raw white, to preserve the band-coded association. - Apply `{typography.label-uppercase}` (tracked 700 weight, uppercase) strictly for column headers and category metadata — never for body copy or button labels. - Use `{rounded.md}` (8px) for cards and dropdown menus; `{rounded.lg}` (12px) for modal containers only. - Include a 2px `{colors.shadow-focus}` focus ring on all interactive elements for keyboard navigation and accessibility compliance. - Default to 1px `{colors.border}` on cards rather than shadow — shadow reserved for floating elements only. ### Don't - Don't introduce mid-weight typography (500 or 600) in prose contexts — the system's power lies in its 400/700/800 weight triad. - Don't use `{colors.primary-dark}` (navy) as a standalone accent color on white surfaces — it's body ink and reversed-surface background, not a CTA color. - Don't round buttons below 24px or above 24px — `{rounded.pill}` is the canonical CTA shape; deviations read as component drift. - Don't apply box-shadow to cards that sit in the flat application shell — use 1px `{colors.border}` for those; shadow implies floating status. - Don't use `{colors.ink-tertiary}` (`#6b7d8f`) for meaningful body text — it may fail WCAG AA on `{colors.background}`; reserve it for timestamps and ghost labels. - Don't apply `{typography.label-uppercase}` with letter-spacing to interactive controls — uppercase tracked labels are for metadata scanning, not affordance communication. - Don't reintroduce the deep navy (`{colors.surface-navy}`) as a content-area background — it belongs exclusively to the footer and reversed hero panels; misuse collapses the system's brightness hierarchy. - Don't mix the semantic color pairs — `{colors.success}` text on `{colors.warning-bg}` destroys the meaning of the badge system. --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <480px | Single-column layout; navigation collapses to hamburger menu | | Mobile | 480–767px | Stacked card layout; nav rail hidden; bottom tab bar optional | | Tablet | 768–1024px | Two-column content; sidebar collapses to icon mode | | Desktop | 1024–1200px | Full three-column layout; nav rail at 240px expanded | | Large Desktop | >1200px | Max-width content container; expanded data views | ### Touch Targets - Minimum 44×44px effective touch target on all interactive elements - Pill-shaped buttons naturally expand touch area through generous padding - Focus rings expand to 3px offset on touch devices for finger precision ### Collapsing Strategy - Left navigation rail collapses from 240px to 64px icon mode at 1024px, hidden below 768px - Marketing hero headlines scale progressively: 56px → 40px → 30px across breakpoints - Data tables switch to card-stack layout on mobile with inline field labels - Feature grids collapse from 4-column → 2-column → 1-column at breakpoint boundaries ### Image Behavior - Hero images use aspect-ratio constrained containers with object-fit: cover - Product screenshots maintain minimum legibility width; crop rather than distort - Workday GO and product logos are served in 1x/2x/3x and both light/dark variants --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` (`#f5f6f8` cool blue-tinted shell) - Surface: `{colors.surface}` (white cards) - Text: `{colors.ink}` (`#022043` deep navy) - Brand accent: `{colors.primary}` (`#0057ae` Workday Blue) - Border: `{colors.border}` (`#b6c1cc` cool blue-gray) - Hover: `{colors.primary-hover}` (`#0068d1`) - Reversed: `{colors.surface-navy}` (`#022043`) ### Example Component Prompts - "Build a Workday Canvas–style enterprise card using `{colors.surface}` white background, `{colors.border}` 1px border, `{rounded.md}` corners, 24px padding. Header text: `{colors.ink}` `{typography.heading-sub}` at weight 700. Body: `{colors.ink}` `{typography.body}` at weight 400. Category label above header: `{typography.label-uppercase}` in `{colors.ink-secondary}` — uppercase tracked. Hover: border transitions to `{colors.primary}`." - "Create a Workday Canvas primary CTA button: `{colors.primary}` background, `{colors.on-primary}` white text, `{typography.button-ui}` (700 weight, 16px), `{rounded.pill}` 24px radius, 12px 20px padding. Hover: `{colors.primary-hover}`. Active: `{colors.primary-dark}`. Focus: `0 0 0 2px {colors.shadow-focus}` ring." - "Design a Workday-style data table with `{colors.background}` header row, `{colors.border}` 1px row dividers, `{typography.label-uppercase}` column headers in `{colors.ink-secondary}`, and `{typography.body}` cell text in `{colors.ink}`. Selected row: `{colors.primary-container}` background. Row hover: `{colors.border-subtle}` background." - "Build a Workday-style status badge system: `{components.badge}` for neutral (blue-tinted pill), `{components.badge-success}` for completed, `{components.badge-error}` for failed. All use `{rounded.pill}`, `{typography.caption}` at 14px, 4px 10px padding." - "Create a Workday Canvas navigation header: white `{colors.surface}` background, deep navy `{colors.ink}` wordmark, `{typography.nav-link}` at 16px weight 500 for nav items. Primary CTA in top right: `{components.button-primary}` pill shape. On scroll: add `0 4px 8px {colors.shadow-soft}` drop shadow to the header bar." - "Build a Workday footer reversal: `{colors.surface-navy}` (`#022043`) full-width background, white `{colors.on-primary}` text in `{typography.caption}`, column headers in `{typography.label-uppercase}` (uppercase tracked), 48px 64px padding. Workday Blue `{colors.primary}` for hover link underlines only." ### Iteration Guide 1. Start with the white/shell split: `{colors.surface}` (white) for content panels over `{colors.background}` shell — the depth hierarchy lives here, not in aggressive shadow. 2. Use `{colors.ink}` (deep navy `#022043`) for all body text — it functions as both brand color and readable ink; treat it as the backbone. 3. Apply `{colors.primary}` exclusively to interactive elements — if an element is clickable, it gets Workday Blue. Nothing else should approach this hue. 4. Pill radius (`{rounded.pill}`) on all CTA buttons; `{rounded.md}` (8px) for cards and dropdowns; never mix radius tiers on the same element type. 5. Weight contrast is the typography signal: 800 for display, 700 for UI/button labels, 400 for all reading text. No 500 or 600 in prose. 6. Shadow only for floating elements (dropdowns, modals, sticky headers on scroll) — use `{colors.border}` 1px for static cards. 7. `{colors.surface-navy}` is the sole dark surface — footer and reversed heroes only; keep product UI surfaces consistently light. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Workday. Brand names and trademarks belong to their respective owners.