Zurich Insurance brand guidelines

Freedam's take

I spent time exploring the Zurich Design System, and I appreciate how systematically organized it is across both atomic foundations and functional data components. Built on zeroheight, the site lays out everything from UI building blocks to complex charts like heatmaps and waterfalls. I like that each core component comes with strict usage guidance, reminding teams to implement patterns as-is unless reviewed. The foundations section balances design tokens with thorough accessibility notes across colors, type, and icons, giving a very clear window into how digital insurance interfaces are constructed.

At a glance

Sections

Foundations · Core Components · Guidelines · Resources · Data Visualization · About ZDS

Tone

Structured, systematic, and clear technical guidance tailored for digital product design and enterprise UI development.

What I noticed

1. The portal documentation is built on the zeroheight platform.¹²³
2. Top-level navigation contains sections for Foundations, Core Components, Guidelines, Resources, Data Visualization, and About ZDS.⁴⁵⁶⁷⁸⁹
3. The Core Components documentation specifies that UI building blocks must be used as-is without visual modification unless reviewed by the design system team.¹⁰¹¹
4. Dedicated sub-navigation tabs for Accessibility appear across foundational topics including Colors, Typography, and Icons.¹²¹³¹⁴

Numbers refer to the screenshots above.

Ideas to borrow

1. Structuring data visualization components like heatmaps and line charts into standardized anatomy, configuration, and styling rules makes technical data displays consistent across applications.¹⁵¹⁶¹⁷