Safe space ​

Overview

The Safe Space is a new completely flexible branding device that works particularly well holding photography and is at its best when fully animated and holding moving imagery.

We want Zurich to be part of people's lives so as the core graphic element of the Zurich brand, it can now expand to create a window that shows the relationship that we see with our customers, businesses and other brands.

UX/UI Guidelines

Check the design documentation of the component in ZeroHeight.

Specifications ​

Anatomy ​

  1. Background: Can contain an image, solid Zurich Blue color or moving material
  2. Smiling Z

In static media, film, social and digital, the Safe Space offers a space to help people think, grow and imagine 'what can go right?” In the Safe Space window, we show positive experiences.

Static ​

Two static Safe Space variants are available: Solid and Image

The Safe Space logo works best in static formats when it joins forces with other tools from the brand inventory.

Let's not forget that variety and playfulness are also two important creative tools.

Motion ​

For moving digital formats and film you can use the fully animated version.

The Safe Space works particularly well as a soft branding device for introductions to stories in moving formats.

The device doesn't just flex in scale, it can also maintain its shape and size when used as a container for displaying moving content.

Animation ​

Our Safe Space is living and breathing.

To reflect the humanity and optimism of the content of the Safe Space, the motion behavior it exhibits should be a smooth flow, like the rhythm of calm, easy breathing. Therefore we never animate the Safe pace in a linear way, but always ease in and out.

Animation templates for the Safe Space can be found on BlueRoom to help you get started.

Animation Template

Sizes and Proportions ​

Safe Space can be displayed in Small, Medium, Large and Extra Large proportions of the circle compared to the size of the smiling Z.

Sizes and Proportions

In addition, in Figma we provide seven standard sizes in which to display the Safe Space, expressed in rem dimensions. Not all combinations of Z proportion and safe space size are available, since some of them would make the Z too big or too small to properly display:

SizeDimension2345
Size-20320 px✔✔--
Size-25400 px✔✔✔-
Size-30480 px✔✔✔-
Size-35560 px✔✔✔✔
Size-40640 px-✔✔✔
Size-45720 px-✔✔✔
Size-50800 px--✔✔

Smiling Z ​

In static formats, there's a clear relationship between the size at which the image is cropped within the Safe Space logo and the size at which the 'Z' is used.

Proportion Large (Fits 4x Smiling Z)
Proportion Large (Fits 4x Smiling Z): The further away the background image, the smaller the 'Z' used within the safe space will need to be.
Proportion Small (Fits 2x Smiling Z)
Proportion Small (Fits 2x Smiling Z): Images cropped tighter and more confidently within the Safe Space logo can hold a larger size of 'Z'.

Guidance ​

For more information on how to use the Safe Space, see the Zurich Brand Manual in the corresponding section on BlueRoom.

A title overlap helps to create a positive relationship with the subject.
The Z” of the Safe Space should never get directly in the way of a beautiful portrait.
To use the Safe Space dynamically, use the power of negative space.
Never let the Safe Space “Z” get in the way of the story being told.
Neutral backgrounds suit the visual strength of this device really well.
Complex patterns and shapes will interrupt the visibility of the “Z”
Siple & iconic is often best

From Figma to code ​

...

Customization ​

INFO

Check everything about the customization mechanics in the "How it works" documentation.

...