Common terms used in the Canvas ecosystem.
Accent Icons are presentational icons used to add meaning, clarity, and visual interest to a page. They should generally not be actionable.
Applet Icons convey entry points, categories of actions, or information sources on the Workday homepage.
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.
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 (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.
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 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.
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”
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.
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.
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
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
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 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
- Shared model (optional)
- Behavior hooks (optional)
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.
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.
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 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).
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
Modality refers to how a user interacts with a device. Checking modality implies the system is checking if a user is using a mouse and keyboard, or using their fingers to swipe, touch, and zoom. This can also check if they are using a stylus, voice control, or other accessible devices. Knowing modality can help Canvas build more custom or natural experiences for users based on how they’re interacting with our components.
Native Mobile is a term used when referencing the building of apps or screens using development languages exclusive or “native” to mobile devices. For example with iOS, this would be a page built using Swift, a language specific to building applications for Apple hardware. This term applies to any instance where the language used to build an application or component is specific to that software or platform in mobile operating systems, hence a “native mobile” component.
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.
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.
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
Responsive Web refers to monitoring the width of the screen and adjusts the page view accordingly. For example, cards can be displayed in a row or a column to accommodate a user's viewport size. If a user is on a desktop viewport size, the cards will be displayed in a row. However, when the user's viewport width reaches a point where it is too small to accommodate the cards in a row, those cards will be displayed in a column. Responsive Web is when the display adjusts according to the user’s view. Responsive Web designs are dynamic (not static or fixed) views of a page or application.
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.
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
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.
WebView refers to the instances when native mobile devices are browsing apps or pages built using web development tools such as React. WebView for Canvas usually implies building mobile friendly React components that work for both mobile and desktop devices.
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for.FAQ Section