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.

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: