Introduction ​

To create cohesive and effective user experiences, it is important to establish a set of foundational principles and guidelines that inform all design decisions. These foundations serve as the building blocks for designing consistent, intuitive and accessible interfaces across all our digital products and platforms

We cover the fundamental building blocks of our design system within this page. These include typography, color, layout, iconography, etc. By understanding and adhering to these foundations, designers and developers are able to work together more efficiently and effectively, resulting in a better overall user experience.

This page is the perfect starting point for building a solid understanding of our design principles. So let's dive in and explore the essential elements that make up Zurich Design System!

Tokens ​

...

Categories ​

  • Base tokens: ...

  • Semantic tokens: ...

  • Component tokens: ...

Naming conventions ​

The CSS variables are always prefixed with two dashes (--).

CSS variable prefixes for base tokens are:

  • zs: spacers.
  • zd: shadows.
  • zf: fonts.
  • zc: colors (with saturation).
  • zg: grey colors.
  • zi: icons.
  • zp: pictograms.

For the semantic tokens the prefix will be always --z-, followed my the corresponding name. For more info, check the semantic tokens page.

For component tokens the prefix will be always --z-, as for the semantic ones, followed by the name of the component in kebab case and two other dashes before the name of the attribute, also in kebab case. Most of the attributes will follow the names of the attribute in CSS, a emmet-based shortcut of it, or a rename for better specification.

For example, SafeSpace tokens will start with --z-safe-space-- and then the name of the attribute, having as an example result: --z-safe-space--color.

We provide intellisense mechanisms for all the CSS variables available. Just check the VSCode page for more information.

Contextual use of tokens ​

One of the great advantages of using CSS variables as design tokens is, as we previously mentioned, is that these are evaluated at runtime (not like SCSS vars), and they can be scoped and propagated.