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.
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.
Let's start with the basics:
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 content
Icons 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.
Here are the basic categories of components, ready to be used:
Small and simple elements that encapsulate common components
Elements that allow the information input from the user in our apps.
Components that wrap or use other components, apply functionality or place them
Components that combine or use other components
Renderless components that provide JavaScript functionalities
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 ZDS
A 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 system
Several components of ZDS combined to create a variety of layouts where content is displayed in a visually engaging manner
A reference on how several components from ZDS have been combined to create an engaging and easy to follow web page
It 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.
We offer some StackBlitz project to exemplify the use of the ZDS DevKit with various setups:
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 apps
ZDS DEvKit is not just styles and component, we provide TS and SCSS utils to help with development
One of the most popular IDEs and the one we recommend to use when using ZDS.
Check our resources page
This documentation is created using Vitepress 💚.
'%20d='M61.1%2031.4H141L123.4.7H78.7zm53.7%2031.9H159l-15.9-26.8H98.8'%20opacity='.9'/%3e%3cpath%20fill='url(%23b)'%20d='M141.3%20100.3H61l17.6%2030.5h45zm-26.5-31.9H159l-15.9%2026.8H98.8'%20opacity='.9'/%3e%3cpath%20fill='%23010101'%20d='M78.6%20130.8%2041%2065.8%2079.1.8H37.9L.4%2065.8l37.5%2065z'/%3e%3c/g%3e%3c/svg%3e)
'/%3e%3cellipse%20rx='11'%20ry='4.2'%20transform='rotate(120)'/%3e%3c/g%3e%3c/svg%3e)
