Colors

Primary Colors

Blue is Zurich’s primary brand color. On our website, it’s used for text, navigation elements and floods of color. White is the website’s primary background color. It’s also used for text on dark backgrounds.
‍

#003399

#02296A

#FFFFFF

Secondary Colors

While white is the website’s overall background color, most of a given page’s primary content is displayed on a tan background. This breaks up the white background and creates a layered effect that is central to the overall design system.
‍

#ff5252

#D5CEB5 70%

Overlay Colors

Blue and white are used as overlay colors to contain text that sits on top of imagery. Blue should be used for most overlays, with white reserved for overlays on full-width imagery.
‍

#02296A 80%

#FFFFFF 80%

Shades of Gray

Gray is only to be used for text in photo captions.
‍

#575757

Typography

Primary Typeface

Frutiger is Zurich’s primary brand typeface and should be used across our website. See below for the full list of Frutiger styles, weights and applications in our website design system.

Frutiger Specimen

A B C D E F G H I J K L M N O P Q R S T UV WX Y Z a b c d e f g h i j k l m n o p q r s t u v w x y z 1 2 3 4 5 6 7 8 9 0! @#$%^&* ( )

Styles

Light
Light Italic
Regular
Bold

Hierarchy / dark scheme

H1 36 PT/42 Bold

Usage: Page title

H2 36PT / 42 Light

Usage: Main headline, leading graph body text.

H3 26PT / 31 Light

Usage: Event card headline, Zurich history card headline

Function Nav 18 PT / 24 Bold

Usage: Functional navigation bar

Body1 23PT / 25 Regular

Usage: Page intro body copy

Body2 16PT / 19 Bold

Usage: Card body copy on light background, Card inline link

Body3 21PT / 33 Light

Usage: Article page main body copy, inline links

Callout/Number 42 PT/ 47 Bold

Usage: number callouts

Callout/Text 40PT / 48 Light Italic

Usage: Article page callout copy

Label1 18PT / 20 Bold ALL CAPS

Usage: Page callout number description (see construction page example)

Label3 14PT /16 Bold

Usage: article page byline

Photo Caption 16PT / 20 55 Roman Italic

Usage: photo captions

Hierarchy / Light scheme

H2 36PT / 42 Light

Usage: Main headline, leading graph body text.

H3 26PT / 31 Light

Usage: Event card headline, Zurich history card headline

Function Nav 18 PT / 24 Bold

Usage: Functional navigation bar

H4 16PT / 23 Regular ALL CAPS

Usage: Overlay cards headline

Body2 16PT / 19 Bold

Usage: Card body copy on light background, Card inline link

Label1 18PT / 20 Bold ALL CAPS

Usage: Main navigation items

Label2 14PT /16 Regular ALL CAPS

Usage: Overlay cards label, CTA button copy

Imagery

Image Guidelines

In keeping with Zurich’s mission to humanize the brand and become a customer-led organization, photography on our website should feature people prominently. Images should feel natural and depict real-life scenes. Avoid overly posed, low-quality stock photography, as well as heavily processed images and illustrations – anything that undermines authenticity and transparency in our imagery.

Article Byline Pictures

When depicting the author of a thought leadership piece (see the “To the Moon and Back” example provided in the Sketch file), crop the image such that the subject’s head is centered within the circular portrait, as shown below.

Module States Guide

This is some text inside of a div block.

Components

Below is a sampling of navigation and content components used in our design system. Reference the Sketch files to see how they fit together across different pages on the website.

Component samples