Spacers

The spacing scale is designed to complement the existing components and typography throughout the system.
By using the correct spacing scale when building individual components, we maintain the proper spatial relation between elements and components.

Usage Guidelines

Spacing components can be inserted into your Figma design file as guides to properly space elements and other components.

When to use

• To set vertical and horizontal spacing between elements and components.
• To group elements or components using the same spacing.
• To connect elements or components to show the relation between them.
• To define a hierarchy

When not to use

• Don't use big spacings if you want to show a relation between elements.
• Don't use different spacings to group the same components.

Specifications

Anatomy

Spacing element: comes in sizes from 2 to 160 pixels. The 16x16 pixel component is named Spacing-100, being 100% of 1 rem, or 16px (the base line font size for ZDS). The rest of the components are named Spacing-XX, from Spacing-125 (12.5% or x1/8, 2 pixels) to Spacing-1000 (1000% or x10, 160 pixels), XX being the corresponding percentage in relation to the 100% of 16 pixels.

They have a bright color to stand out from your design elements and should be removed when completed.

Sizes

For general spacing within components (inlet) use spacings from Spacing-12 to Spacing-300, and for layout spacing between different elements (outlet) use from Spacing-50 to Spacing-1000.

Variables

Additionally, Spacings are included as Figma variables, named sp-125 to sp-1000, for ease of use within custom components.

Grid gutter

Apart from the regular spacings, there's an additional spacing variable, called #sp-grid-gutter, of 30px, the same size as the gutters between columns (see Grid foundations), to be used exclusively in horizontal auto-layout spacings of components that are based on the baseline grid.

Principles

A layout consists of UI elements and components and the space between them. Use spacing principles to help users understand the relation between elements and components.

Group by affiliation

You should use consistent spacing around elements to show a visual similarity and relation between them. Examples for this are lists and tables.

Use consistent spacings

Don't use different spacings for elements in lists

Group by proximity

If you want to show a relation between elements/components, place them close to each other.

Use consistent spacings.

Don't use different spacings for elements in lists.

Create order and hierarchy

To quickly understand the relation between elements/components, it is important to define a hierarchy so users can follow a journey or flow easier.

Root size

Almost all the sizes in the ZDS are relative (rem) for responsiveness and accessibility. The default root size (based on the 100 spacer) for web it's 16px, but this value can be adapted depending on the needs or accessibility configuration. The values recommended are the even number between 12 and 20.

You can change this value directly in the documentation to preview the sizes in here.

Code-wise, you just need to change the value of font-size in the :root element in CSS to make the scaling:

:root {
  font-size: 12px;
}

CSS tokens

These are the values provided as part of the @zurich/design-tokens NPM library:

Name	Pixels	REM	Figma variable	CSS token	Sample
12	2 px	0.125 rem	s-12	--zs-12
25	4 px	0.25 rem	s-25	--zs-25
50	8 px	0.5 rem	s-50	--zs-50
75	12 px	0.75 rem	s-75	--zs-75
100	16 px	1 rem	s-100	--zs-100
150	24 px	1.5 rem	s-150	--zs-150
200	32 px	2 rem	s-200	--zs-200
250	40 px	2.5 rem	s-250	--zs-250
300	48 px	3 rem	s-300	--zs-300
400	64 px	4 rem	s-400	--zs-400
600	96 px	6 rem	s-600	--zs-600
1000	160 px	10 rem	s-1000	--zs-1000