This guide will help you make decisions when spacing elements in your designs using our space Tokens. Use this for onboarding or as a refresher.

Looking for our old space 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 Space Token Docs.
yarn add @workday/canvas-tokens-web
yarn add @workday/canvas-tokens-web

Usage Guidance

Spacing is defined by multipliers varying from x1 to x20 with a base number (x) of four.

Our spacing guidelines are based on the principles of visual design. We recommend using these guidelines to provide a consistent visual experience across your product.

Before making decisions on how to use our space tokens in your product it is good to know the rationale behind our spacing system. The following section outlines this.

4-unit base

Using a 4-unit base multiplier for space tokens enhances consistency, scalability, and precision. It aligns with industry standards, simplifies calculations, and reduces cognitive load, making the design and development process more efficient and adaptable.

8pt grid system

At Workday we use a systematic approach to how we decide what spacing to use in order to achieve a consistent visual experience across our products. We achieve this by using a spacing system. At Workday we follow the 8pt Grid System.

The main benefits of using an 8pt grid system are:

  • Flexible and consistent to work with while offering enough visual distinction between steps.
  • Scales well, avoiding blurred images caused by half pixel rendering on some screen densities.

Canvas Space Tokens

This section outlines the current space tokens that we support. Our space tokens include the current spacing values in Pixels. Use these space tokens when positioning Canvas components in your product.

We have aligned our base space size to our base font size (16px) to help you to space elements in your product relative to our type scale. This will help your overall layout to scale proportionality.

Choose from the space tokens below to see their recommended usage.

Space Zero

0 px

Less Common
  • Use sparingly

  • When elements are stacked and require no space between them

  • Rows of data e.g. tables

Example for

The table below displays all the current space token names for your reference, along with their equivalent pixel values. Space variables are in multiples of four. Space values are in px format (space object) or number format (spaceNumbers object).

Token NameSize (px)Size (number)Space
x4 Base Value'16px'16

Web Examples

Javascript / Typescript

// styles.ts
import {system} from '@workday/canvas-tokens-web';
const styles = {
display: 'grid',
gap: `var(${})`,
padding: `var(${})`,


// styles.css
@import '@workday/canvas-tokens-web/css/system/_variables.css';
.card {
display: grid;
gap: var(--cnvs-sys-space-x1);
padding: var(--cnvs-sys-space-x2);
space 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