Space
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.
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-webyarn add @workday/canvas-tokens-webUsage 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.
Recommended Usage
Choose from the space tokens below to see their recommended usage.
Space Zero
0 px
Use sparingly
When elements are stacked and require no space between them
Rows of data e.g. tables
Space x1
4 px
Use sparingly
Accommodate a large amount of data on your page
Compact spacing between text or icons
Space x2
8 px
Commonly used to group compact elements like icon buttons
Accommodate a large amount of data on your page
Compact spacing between text or icons
Space x3
12 px
Use sparingly
Use when compact padding is required
Accommodate a large amount of data on your page
Space x4
16 px
Use this as your base to help you decide on relevant larger or smaller spacing sizes
Grouping Inputs with related data
Group related input fields
Space x6
24 px
Padding around card content
Related elements where more space between them can be afforded
Separate section headings or titles from body text or inputs
Space x8
32 px
Standard spacing between cards
Used to separate groups of content
Separate section headings or titles from body text or inputs
Space x10
40 px
Used for outer margins on the overall page content
Used for inner margins on large items such as page sections
Space x14
64 px
Use to de-clutter your UI when alot of space is available
Separate banner sections from page content
Use to differentiate page content like page sections
Space x20
80 px
Use sparingly
Helps to put focus on the primary element within your page
Use to de-clutter your UI when a lot of space is available
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 Name | Size (px) | Size (number) | Space |
|---|---|---|---|
zero | 0px | 0 | |
x1 | '4px' | 4 | |
x2 | '8px' | 8 | |
x3 | '12px' | 12 | |
x4 Base Value | '16px' | 16 | |
x6 | '24px' | 24 | |
x8 | '32px' | 32 | |
x10 | '40px' | 40 | |
x14 | '64px' | 64 | |
x20 | '80px' | 80 |
Web Examples
Javascript / Typescript
// styles.tsimport {system} from '@workday/canvas-tokens-web';const styles = {display: 'grid',gap: `var(${system.space.x1})`,padding: `var(${system.space.x2})`,};
CSS
// 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);}
| Sample | CSS Variable | JS Variable | Value | Calculated Value | Pixel Value |
|---|---|---|---|---|---|
| --cnvs-sys-space-zero | system. | 0rem | 0px | ||
| --cnvs-sys-space-x1 | system. | 0rem | 0px | ||
| --cnvs-sys-space-x2 | system. | 0rem | 0px | ||
| --cnvs-sys-space-x3 | system. | 0rem | 0px | ||
| --cnvs-sys-space-x4 | system. | 0rem | 0px | ||
| --cnvs-sys-space-x6 | system. | 0rem | 0px | ||
| --cnvs-sys-space-x8 | system. | 0rem | 0px | ||
| --cnvs-sys-space-x10 | system. | 0rem | 0px | ||
| --cnvs-sys-space-x16 | system. | 0rem | 0px | ||
| --cnvs-sys-space-x20 | system. | 0rem | 0px |
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for.
FAQ Section