Shape
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.
UX/UI Guidelines
Check the design documentation of the component in ZeroHeight.
Anatomy
- Half circle
- 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.
Modifying Shape language
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.
From Figma to code
...
Customization
INFO
Check everything about the customization mechanics in the "How it works" documentation.
...