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.

Design guidelines

Have a look to the design guidelines in ZeroHeight about the use of colors in Zurich. This specifications are agreed and reviewed by Zurich's branding team.

Types ​

The are 6 different types or categories of colors are available:

Brand
8 colors
Tints
10 colors
Secondary
57 colors
Gray
10 colors
Status
8 colors
Overlay
3 colors

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.

Dark blue
--zc-blue-dark
Zurich blue
--zc-blue-zurich
Mid blue
--zc-blue-mid
Light blue
--zc-blue-light
Sky blue
--zc-blue-sky
Sand stone
--zc-sand-stone
Dove
--zc-dove
Zurich white
--zg-white-zurich

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.

Azure ​
Azure 100
--zc-azure-100
Azure 80
--zc-azure-80
Azure 60
--zc-azure-60
Azure 40
--zc-azure-40
Azure 20
--zc-azure-20
Moss ​
Moss AAA
--zc-moss-aaa
Moss AA
--zc-moss-aa
Moss 100
--zc-moss-100
Moss 80
--zc-moss-80
Moss 60
--zc-moss-60
Moss 40
--zc-moss-40
Moss 20
--zc-moss-20
Teal ​
Teal AA
--zc-teal-aa
Teal 100
--zc-teal-100
Teal 80
--zc-teal-80
Teal 60
--zc-teal-60
Teal 40
--zc-teal-40
Teal 20
--zc-teal-20
Mint ​
Mint 100
--zc-mint-100
Mint 80
--zc-mint-80
Mint 60
--zc-mint-60
Mint 40
--zc-mint-40
Mint 20
--zc-mint-20
Lime ​
Lime 100
--zc-lime-100
Lime 80
--zc-lime-80
Lime 60
--zc-lime-60
Lime 40
--zc-lime-40
Lime 20
--zc-lime-20
Lemon ​
Lemon AA
--zc-lemon-aa
Lemon 100
--zc-lemon-100
Lemon 80
--zc-lemon-80
Lemon 60
--zc-lemon-60
Lemon 40
--zc-lemon-40
Lemon 20
--zc-lemon-20
Peach ​
Peach AAA
--zc-peach-aaa
Peach AA
--zc-peach-aa
Peach 100
--zc-peach-100
Peach 80
--zc-peach-80
Peach 60
--zc-peach-60
Peach 40
--zc-peach-40
Peach 20
--zc-peach-20
Candy ​
Candy AA
--zc-candy-aa
Candy 100
--zc-candy-100
Candy 80
--zc-candy-80
Candy 60
--zc-candy-60
Candy 40
--zc-candy-40
Candy 20
--zc-candy-20
Powder pink ​
Powder pink 100
--zc-powder-pink-100
Powder pink 80
--zc-powder-pink-80
Powder pink 60
--zc-powder-pink-60
Powder pink 40
--zc-powder-pink-40
Powder pink 20
--zc-powder-pink-20
Lilac ​
Lilac 100
--zc-lilac-100
Lilac 80
--zc-lilac-80
Lilac 60
--zc-lilac-60
Lilac 40
--zc-lilac-40
Lilac 20
--zc-lilac-20
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.

Dark blue 90
--zc-blue-dark-90
Zurich blue 90
--zc-blue-zurich-90
Light blue 40
--zc-blue-light-40
Light blue 10
--zc-blue-light-10
Sky blue AA
--zc-blue-sky-aa
Sky blue 80
--zc-blue-sky-80
Sky blue 40
--zc-blue-sky-40
Sky blue 25
--zc-blue-sky-25
Sky blue 10
--zc-blue-sky-10
Light dove
--zc-dove-light

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.

Gray 1
--zg-1
Gray 2
--zg-2
Gray 3
--zg-3
Gray 4
--zg-4
Gray 5
--zg-5
Gray 6
--zg-6
Gray 7
--zg-7
Gray 8
--zg-8
Gray 9
--zg-9
White
--zg-white

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.

Peach AA
--zc-peach-aa
Peach 80
--zc-peach-80
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.

Lemon AA
--zc-lemon-aa
Lemon 80
--zc-lemon-80
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.

Moss AA
--zc-moss-aa
Moss 80
--zc-moss-80
Information ​

Information colors communicate a neutral information, without a negative o positive connotation.

Sky blue AA
--zc-blue-sky-aa
Sky blue 80
--zc-blue-sky-80

Overlay colors ​

...

Overlay Zurich blue
--zo-blue-zurich
Overlay white
--zo-white
Overlay black
--zo-black