Space

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:

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

Less Common

• Use sparingly

• When elements are stacked and require no space between them

• Rows of data e.g. tables

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).

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

Below are descriptions of these types:

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,
};