Index ​

Zurich Design System

Find the resources to create meaningful and engaging customer experiences following the best practices of user interface design. Guidelines, design assets and component libraries for building a consistent and accessible digital brand.

Let's start!

Disclaimer

This Design System is still in a Beta phase. This means that some changes can occur between versions, but we will try to minimize them as much as possible and inform when this changes require some action to ensure compatibility or modify some behavior of the component or the general use of the libraries.

We will do bi-weekly releases with new components, fixes, and more features. Check the release notes for specific information.

Also, it's is possible that the components have bugs or the packages present some issues. If you find some trouble, please contact us. But in general terms, the components that appear in this documentation can de used in production environments. In case of a bug reported, we will try to sole it in the next bi-weekly release or even sooner with a patch.

How to start ​

Let's start with the basics:

Learn the basic concepts to understand ZDS DevKitHave a look to the basic concepts of Devkit and the technical concepts underneathCheck the different available packages that form ZDS Devkit

Foundations ​

Foundations are the visual elements needed to create engaging layouts and end-to-end user experiences.

Key element used to create meaning & consistency.When designing a website or app use the variations of the Zurich Sans & Ogg Font correctly for contentIcons play an important role in Zurich digital assets. Icons are used to illustrate simple, usually single ideas.Pictograms are a great way to capture simple ideas visually to ease the navigation.We provide an easy way of using the images provided by BlueRoom.

Components ​

Here are the basic categories of components, ready to be used:

Small and simple elements that encapsulate common componentsElements that allow the information input from the user in our apps.Components that wrap or use other components, apply functionality or place themComponents that combine or use other componentsRenderless components that provide JavaScript functionalities

Examples ​

ZDS example templates to check how to use the DevKit:

Showcases a vibrant greeting, streamlined sign up and log in options and user friendly navigation elements, all using a collection of components from ZDSA clean and intuitive design with fields for email, password entry and a "Remember me" option, the layout is easy to navigate and uses the input components of the design systemSeveral components of ZDS combined to create a variety of layouts where content is displayed in a visually engaging mannerA reference on how several components from ZDS have been combined to create an engaging and easy to follow web pageIt can be used for inputting data for requesting a service. In the above example a selection of components from ZDS have been put together to create a smooth, brand-compliant user experience.

Integrations ​

We offer some StackBlitz project to exemplify the use of the ZDS DevKit with various setups:

Development ​

ZDS has associating tooling to improve the developer experience:

There's no actual code without documentation and we took care of ours.The main design tool, that allow us design, prototype, and iterate our appsZDS DEvKit is not just styles and component, we provide TS and SCSS utils to help with developmentOne of the most popular IDEs and the one we recommend to use when using ZDS.

Resources ​

Check our resources page

This documentation is created using Vitepress 💚.