The shape is given by the border radius value we apply to certain UI elements for visual or functional reasons. Some common examples of elements that need rounded corners are cards, buttons and labels.

Looking for our old shape tokens?

While we still support our old tokens, we’re migrating our documentation and usage guidance to reflect our new Tokens Web. It is not currently a requirement to update all your tokens to use v11, but we strongly encourage you to begin migrating as you can. If you're an engineer looking to migrate to our new tokens, we wrote a handy migration guidefor you.

View v10 Shape Token Docs.
yarn add @workday/canvas-tokens-web
yarn add @workday/canvas-tokens-web

Usage Guidance

  • We can define the shape of an element by applying a border radius value to it. The border-radius property defines the radius of the element's corners.
  • Every Canvas elements presents a specific shape that responds to the use and/or characteristics of this element.
  • Our Canvas shape token includes five values ranging from a zero border radius for a rectangular shape with sharp corners to a 999px border radius for a circular shape.

Canvas Shapes

Canvas Shape Tokens uses multipliers with a {base.unit} of 0.25rem.

ShapeVariableSizeRecommended Usage
shape 0 zero'0rem'This is the initial shape of every new element. Use this for backgrounds screens and fixed navigation containers such as headers, and side-panels.
shape xhalf xhalf'0.125rem'Use this for subtle and small components that don’t require to group complex information like Status Indicators, Checkboxes and Color Swatches.
shape x1 x1'0.25rem'Use this for form components presenting text information or inputs: Text Inputs and Text Area, Dropdowns, Menus, and Banners.
shape x2 x2'0.5'Use this for all the containers and popups: Canvas Cards, Modals, Tooltips, and Toasts.
shape x4 x4'1rem'Mobile only: Cards.
shape x6 x6'1.5rem'Mobile only: Sheets, Modals
shape round round'62.5rem'Commonly used for our standard buttons and profile avatars: All Primary, Secondary Buttons, Radio Buttons and Notification Badges.

Using our Shapes

When working with border-radius, there are certain things we need to consider:

  • Be intentional when applying border-radius values following the usage guidelines above.
  • All corners should always have the same value applied to ensure the shape doesn’t get distorted.
  • Avoid combining border-radius values.

Web Examples

Javascript / Typescript

// styles.ts
import {system} from '@workday/canvas-tokens-web';
const styles = {
borderRadius: `var(${system.shape.x2})`,


// styles.css
.card {
border-radius: var(--cnvs-sys-shape-x2);
shape tokens
SampleCSS VariableJS VariableValueCalculated ValuePixel Value

Can't Find What You Need?

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

FAQ Section