Canvas Glossary

Common terms used in the Canvas ecosystem.

A-C Terms

Accent Icons

Accent Icons are presentational icons used to add meaning, clarity, and visual interest to a page. They should generally not be actionable.

View all Accent Icons

Applet Icons

Applet Icons convey entry points, categories of actions, or information sources on the Workday homepage.

View all Applet Icons

Assets

Visuals built entirely with Tokens. Types of Assets in our system include: These are illustrative elements that depict wayfinding, notifications, branding, and system feedback. Assets, such as some illustrations, are used to depict system feedback like an empty state, while others are purely visual and are meant to provide a moment of delight for a user.

View the Assets section

Canvas

Canvas is Workday's design system that is made up of reusable UI elements, design principles, and guidelines. It is composed of the following sub-products:

  • Canvas Kit Web
  • The Design Asset Repo

The Canvas Design elements (Tokens, Assets, and Components) can be copied and reused to create products and are implemented in web-based products using Canvas Kit Web, which contains code components that can be imported into applications. The Design Asset Repo contains the web code equivalent of Canvas assets (icons and illustrations) that can also be used to implement Canvas assets in code.

Canvas Kit

Canvas Kit (CK) refers to the open-source, reusable web code library for Canvas, Workday’s design system. Canvas Kit represents Canvas tokens and components in code formats, allowing product teams to simplify Web UI development with pre-built and customizable UI elements.

Canvas Kit (CK) is generally synonymous with Canvas Kit React (CKR). We also offer a CSS library (CKCSS), but it is no longer actively supported.

Canvas Kit Labs

While we iterate on a new web component's API, functionality and accessibility, sometimes we want to make it available to consumers ASAP. If we introduced the web component normally, this could result in many breaking changes to our codebase. To avoid this, we have introduced Canvas Kit Labs as a place to incubate components.

Canvas Kit Preview

Canvas Kit Preview is similar to Canvas Kit Labs; however, Canvas Kit Preview is for web components that have had a full design and a11y review, so they are approved for use in product. The API's and/or underlying architecture could still be subject to change, but not without strong communication and migration strategies. Essentially, Canvas Kit Labs is for alpha components and Canvas Kit Preview is for beta components.

Code Library

This refers to libraries of code for a particular area. Canvas Kit is an example of a code library. Many teams within Workday have their own versions of Custom Code Libraries too. This is generally synonymous with “code repository”

Components

The building blocks or UI pieces of our Design System. Components should be generic and intended for reuse in multiple applications. They are typically composed of Tokens, Assets, and/or other Components. There are four types of Components based on varying levels of complexity.

Primitive Component (Web)

Lowest-level component abstraction, rarely used on its own.

Examples: Box, Flex, Stack, SVG

  • Flexibility: High
  • Complexity: Low
  • Structure: Low
  • Size: Small

Note: These are technical entities generally not represented in Figma.

Level 1 Components (Web)

Composed entirely of Tokens and/or Assets. Only supports one type of function and interaction.

Examples: Button, Text Input, Count Badge, Status Indicator, List

  • Flexibility: High
  • Complexity: Low
  • Structure: Low
  • Size: Small

Level 2 Components (Web)

Composed of 2 or more Level 1 components. Serves 1-2 primary functions and whose interactions are considered simple.

Examples: Action Toolbar, Breadcrumbs, Tabs, Page Header, Side Panel

  • Flexibility: Medium
  • Complexity: Medium
  • Structure: Medium
  • Size: Medium

Level 3 Components (Web)

Composed of Level 1 and Level 2 components. Can support a number of interactions which can be complex and varied.

Example Rich Text Editor

  • Flexibility: Low
  • Complexity: High
  • Structure: High
  • Size: Medium-Large

Compound Components (Web)

Compound components is a pattern where higher level components are composed using smaller sub-components. This allows you to retain access to all the semantic elements of the higher level component. The paradigm makes compound components extremely flexible so they can be reused or adapted for many use cases.

A compound component contrasts with a “configuration component”, which instead is configured from a single interface. Configuration components are essentially a “black box” that offer little flexibility if the API/props do not offer the functionality you need.

Here are the parts of a compound component:

  • Container component
  • Sub-components
  • Shared model (optional)
  • Behavior hooks (optional)

Composability

We refer to this as a method of building Web UIs from individual building blocks. This method empowers developers to craft UIs without being limited by the shipped capabilities of components. Composability is the foundation of “Compound Components”. The tradeoff is that composability may require a bit more effort/code in exchange for flexibility, compared to large configuration components which either offer very specific functionality or are very complex.

Configuration

We refer to this term as a method of building Web UIs that relies on a finite number of configurable parameters. UIs can be quickly, reliably, and predictably built this way without a lot of expertise. However, the tradeoff is that new functionality relies on adding configuration options. This needs to be done by refactoring/adding to the component itself. Expanding the API surface area like this can quickly make components unwieldy.

D-G Terms

Design System

A collection of reusable UI elements (tokens, assets, components) and their code counterparts, built using a set of design principles and guidelines. The UI elements provided by a design system are flexible enough to be implemented in a variety of use cases, allowing product teams to quickly build and scale. Design systems can also include guidelines around content tone, branding and accessibility requirements to help teams build cohesive products embedded with an organization's design philosophy and strategy. Canvas is Workday's Design System.

GitHub

GitHub is a web-based version-control and collaboration platform for software developers. Canvas Kit uses GitHub.com (public) to update and maintain the Design System in a centralized and organized way. Most Workday code repositories are on GitHub Enterprise (ghe.megaleo.com).

I-R Terms

Internationalization

This refers to the design of UIs that enable it to be adapted (localization, l10n, although sometimes used interchangeably) globally. Also referred to as i18n (i with 18 letters in between followed by n).

For more information, check out our Globalization docs

NPM Module

A set of Web Components and Styles managed in a central repo that is published on NPM for many teams/files to use. This is how Canvas Kit modules are distributed for consumption.

Patterns

Abstract guidelines to classify and document reusable solutions built to respond to common user scenarios. Following these guidelines allows us to design experiences that feel consistent and natural for users as they move between applications and ensures that our approach aligns with industry standards.

React

A JavaScript library built by Facebook for building interactive UIs. This is Workday’s de facto UI library. UIs not built with GWT (i.e. new UI) are built with React.

Repository

This term is generally used to describe where code lives at Workday as a product/project. At Workday, most code repositories live internally in GitHub Enterprise, but several live in BitBucket. Canvas Kit is one of the few projects that lives publicly on GitHub.com

S-Z Terms

Storybook

The client development environment for our UI Component library, Canvas Kit. Often used as a reference for what components are available in CK, and how they can be used.

System Icons

The goal of a System Icon is to minimize the amount of text on the page, so the user can take action directly with visuals and less reading. Icons generally have multiple states, including: standard, hover, click, focus, active, and inactive. Icons shouldn’t be used to serve two purposes within the same page. They’re not configurable because each icon has a set color chosen for the environment or page where they live. View all System Icons

UI Solution

A term we use to describe a reusable solution when defining patterns. The term is often synonymous with Components. It is typically used when recommending specific Components to designers when they are curious about higher level patterns.

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section