Shape ​

Overview of shapes

The Zurich Shape Language is our biggest arena for play and spontaneity. The Shape Language gives us the opportunity to create varied and dynamic compositions, to provide a home for our photography and Smiling Z, and to put a distinctive Zurich stamp on all our communications.

Anatomy ​

Anatomy of shape
  1. Half circle
  2. Circle

Usage guidelines ​

Default combinations ​

The ZDS provides you with six default shape combinations. These are embedded into some of our components, such as Stage (Default and Slim), Stage Banner or Promo, but can be used and modified to suit other use cases.

You'll se that there are two variants available, "Left" and "Right". Left is to be paired with images that are left-aligned, and right is for images that are aligned on the right.

Default combinations of shape

Modifying Shape language ​

Select shape layer
Replace shape instance

You can modify shape language to better suit your design in two ways:

  • Change the default color of the provided shapes depending on your choice of background color and photography (selecting the Shape layer in the left Layers panel in Figma, and replacing the colors in the right Design panel). Note that you can only use colors from the brand palette.

  • You can replace the all the shape altogether by one of your own (adding yours as a Local Component and replacing the instance as indicated above).

Attention!

In doing so, it's very important that you make sure that you follow the specifications and guidelines indicated in the Shape Language section of the Brand Manual in BlueRoom.

Don't use shapes that overlap with other elements inside the component.
To create a sense of support and stability, the Shape Language should always appear to be grounded on an element in the page, for example a change of background color that divides a section or a component to another.
Don't use shapes that are too small or too big in relation to the size of the safe space.
Make sure there is enough contrast between the background and the shapes colors.
Do not use other colors for shapes outside the brand palette.