Color is a key element in our design system used to create meaning and consistency. Our color palette helps to unify our brand's experiences, from product interfaces to marketing. Zurich has a distinctive way of using color to represent the Brand.
This is the palette we use with consistency across all brand communications to ensure a stable and solid foundation across our entire visual world. Cleaner, fresher, more friendly and approachable. Variations in tone and saturation have been carefully curated to make a harmonious overall set.
These colors have been chosen to offer a range of uses and meet or exceed standards in supporting accessibility and contrast for low vision users. The guidelines indicate how colors should be applied, noting where some should be utilized sparingly and with a purpose for specific components like errors or messaging.
Our range of blues builds trust and depth. It provides stability and confidence. Our non-blues provide warmth, variety and a little spontaneity to help counterbalance our cooler colors. Use these colors together in playful combinations across the brand to bring subtle variation to the tone of the message or the story being told.
Zurich Blue must be used with consistent visibility across all brand communications. Just like the sky and the ocean form the constants of our natural world, Zurich Blue has been specifically chosen to be a consistent foundation for our entire visual creative world.
Use tints of the secondary color palette to achieve the right level of energy for your communication while also ensuring harmony with all the main brand colors.
Note
Do not mix more than three background colors on the same page in order to keep a clean, simple and classy look and feel.
White & Black are colors that also serve important functional roles. On screen, "True White" can be used in contrast to Zurich White as a background color to help differentiate between different spaces of content.
We only use black for long sections of small body copy to improve legibility. For on-screen purposes, please note a tint of black will be easier on the eye, while in print, black serves a particularly functional role. Don`t forget that in most instances, blue is our black.
Error: Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action such as removing a user from your team.
Warning: Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users' attention.
Success: Success colors communicate a positive action, positive trend or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.
Information: Information colors communicate a neutral information, without a negative o positive connotation.
