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.

yarn add @workday/canvas-kit-react
Web Install
yarn add @workday/canvas-kit-react

Usage Guidance

Spacing is defined by “T-shirt sizes” varying from XXXS to XXXL with numbers divisible by 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.

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 space.zero

The table below displays all the current space token names for your reference, along with their equivalent pixel values. Space variables are in a "t-shirt size" format. Space values are in px format (space object) or number format (spaceNumbers object).

Token NameSize (px)Size (number)Space
zero0px0
xxxs'4px'4
xxs'8px'8
xs'12px'12
s Base Value'16px'16
m'24px'24
l'32px'32
xl'40px'40
xxl'64px'64
xxxl'80px'80

The following space types are also provided: CanvasSpace, CanvasSpaceValues, CanvasSpaceNumbers, and CanvasSpaceNumberValues.

Below are descriptions of these types:

NameDescription
CanvasSpacespace object with string px values
CanvasSpaceValuesstring px values for CanvasSpace
CanvasSpaceNumbersspaceNumbers object with numeric px values
CanvasSpaceNumberValuesnumeric px values for CanvasSpaceNumbers

Web Examples

import {space, spaceNumbers} from '@workday/canvas-kit-react/tokens';
const iconSize = 20;
const buttonSyles = {
paddingTop: space.xs,
paddingRight: space.s,
paddingBottom: space.xs,
paddingLeft: spaceNumbers.s + iconSize,
};

Can't Find What You Need?

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

FAQ Section