Colors ​

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.

Types ​

Five different types of colors are available: Brand, Secondary, Gray, Alerts and Overlay.

Color types

Brand colors ​

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.

Secondary colors ​

Our secondary palette has more variety to reflect the same warm and optimistic values that we bring to our tone of voice and brand positioning.

Think of the secondary palette as a purposely selected list of colors to complement the brand palette, helping bring it to life and stretch its reach.

Tints ​

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.

Gray palette ​

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.

Status colors ​

  • 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.

Usage guidelines ​

When to use ​

  • Brand colors

    • Key actions such as primary call-to-action buttons
    • Highlighted content
    • Form field elements

  • Secondary colors

    • Secondary colors are used as accent colors to complement the brand palette when working with a specific theme or to highlight a specific detail.

When not to use ​

  • Secondary colors

    • Colors from the Secondary palette are not allowed to be used as background colors with photography (use a brand palette color or inclusive color).