Pictogram โ
Zurich Pictograms are characterized by a consistent look using brand colors and contained within a circle. They are often used to highlight and emphasize an important aspect, making some information more compelling and memorable for the user.
Usage guidelines โ
When to use โ
- To visualize information and make it memorable for the user
- To highlight a message or important aspect
- To make messages easier to understand
- To draw attention to areas of interest
Accessibility โ
Accessibility considerations โ
Pictograms must have appropriate contrast against the surrounding background.
Specifications โ
Anatomy โ
- Illustration
- Background in circle shape: available in dark or light mode
Sizes โ
Our pictograms are designed as rounded 140x140 px elements. You can scale them to your needs, if necessary.
Styling โ
In many situations, a simple icon falls short to illustrate a certain context. This is where pictograms become useful as they have a more complex design, include more colors and give a more detailed visualization of the context they represent.
They are available in two different color sets:
- dark (with light-blue background)
- light (with Zurich-white background)
When you choose a theme, make sure the pictogram stands out from the background and complies with accessibility guidelines.
Brand palette colors must be used unless there are specific requirements. You can use an accent color from the secondary palette to replace Sandstone (dark theme) or Light Blue (light theme).
Spacing โ
Use the standard outlet spacing, with a minimum of 16 Px.
Usage Example โ
Color combination โ
Secondary colors can be used as accent or background color, when working to a theme