Zurich Insurance brand colors, fonts & UI tokens
The palette, type, corner geometry and surface tones behind Zurich Insurance’s website, with contrast ratios and tokens you can paste into Tailwind, CSS or Figma.
Typography
- Headings
- Zurich Sans
- Body
- Zurich Sans
- Monospace
- SF Mono
- Free stand-in
- Source Sans 3 / JetBrains Mono
Zurich Sans is a proprietary typeface; Ogg (Sharp Type, commercial) is reserved for display headlines. Source Sans 3 is a free substitute.
Geometry & surface
- Radius style
- Pill · 16 px+
- Controls
- pill (9999px)
- Cards
- 28px
- Scale
- 16px · 24px · 40px
Design language
- Zurich Blue (#2167AE) fills buttons and clickable elements, and the logo appears only in Zurich Blue or white.
- Headlines and body copy use Blue Dark (#23366F) instead of black, with pill-shaped buttons.
- Light-weight Zurich Sans headlines on white, with lime, teal and sand panels adding warmth to the insurer's blue.
Live UI preview
Zurich Insurance’s palette, type and corner geometry on a navbar, hero, pricing table, form field and toast. Switch to the WCAG-fixed palette or dark mode to compare.
Plan, track and release work with your team in one place. Start free and upgrade when you grow.
Your team can sign in now. Invite links expire in 7 days.
Every plan includes the core workspace.
For individuals
- 3 projects
- Basic reporting
- Community support
For growing teams
- Unlimited projects
- Advanced reporting
- Priority support
For larger organizations
- SSO and audit log
- Custom roles
- Dedicated manager
Sample content. Colors, type and corners come from the Zurich Insurance profile.
Technical SEO snapshot
www.zurich.com · scanned 11 Nov 2026www.zurich.com refuses automated requests (bot challenge page), so no SEO metrics are published for it. The tokens on this page are a reference snapshot.
WCAG contrast ratios
| Pairing | Colors | Ratio | WCAG AA |
|---|---|---|---|
| Body text on surface | #23366F / #FFFFFF | 11.48:1 | Pass |
| Secondary text on surface | #5D6162 / #FFFFFF | 6.27:1 | Pass |
| Primary as link/text on surface | #2167AE / #FFFFFF | 5.81:1 | Pass |
| Button label on primary | #FFFFFF / #2167AE | 5.81:1 | Pass |
| Accent on surface | #E1EE92 / #FFFFFF | 1.25:1 | Fail |
| White on secondary | #FFFFFF / #23366F | 11.48:1 | Pass |
| Dark mode: text on canvas | #F5F5F7 / #0B0D12 | 17.85:1 | Pass |
| Dark mode: primary on canvas | #287DD2 / #0B0D12 | 4.59:1 | Pass |
Use the Zurich Insurance system in SuiteAnvil
Each tool opens with Zurich Insurance preloaded as the active BrandProfile.
Zurich Insurance tokens for Tailwind CSS v4
Paste into your global stylesheet, or open StyleExtract for CSS variables, Figma tokens, DESIGN.md and .cursorrules.
/* Zurich Insurance design tokens, extracted from https://www.zurich.com
Generated by SuiteAnvil StyleExtract · https://suiteanvil.com */
@import "tailwindcss";
@theme {
/* Brand roles */
--color-brand: #2167AE;
--color-brand-foreground: #FFFFFF;
--color-secondary: #23366F;
--color-accent: #E1EE92;
--color-surface: #FFFFFF;
--color-ink: #23366F;
--color-ink-muted: #5D6162;
--color-line: #DDE4E3;
/* Surfaces (UI vibe: Neutral white) */
--color-canvas: #FFFFFF;
--color-card: #FFFFFF;
--color-hairline: #DDE4E3;
/* Primary tonal scale */
--color-brand-50: #F4F7FB;
--color-brand-100: #E4EDF5;
--color-brand-200: #C8D9EB;
--color-brand-300: #9BBBDB;
--color-brand-400: #6495C6;
--color-brand-500: #2167AE;
--color-brand-600: #1E5996;
--color-brand-700: #1A497A;
--color-brand-800: #16395D;
--color-brand-900: #122B45;
--color-brand-950: #0F1E30;
/* Typography: brand family first, free stand-in second */
--font-heading: "Zurich Sans", "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-sans: "Zurich Sans", "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--font-mono: "SF Mono", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
/* Shape (UI vibe: Pill · 16 px+) */
--radius-sm: 16px;
--radius-md: 24px;
--radius-lg: 40px;
--radius-button: 9999px;
--radius-control: 9999px;
--radius-card: 28px;
}
/* Dark mode overrides (toggle with <html data-theme="dark">) */
@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
[data-theme="dark"] {
--color-brand: #287DD2;
--color-brand-foreground: #111113;
--color-accent: #E1EE92;
--color-surface: #0B0D12;
--color-canvas: #0B0D12;
--color-card: #13161D;
--color-hairline: #23252A;
--color-ink: #F5F5F7;
--color-ink-muted: #A1A1AA;
--color-line: #23252A;
}
SuiteAnvil extracts publicly visible design tokens, logos, and font references for workflow automation. You are responsible for ensuring you hold valid commercial rights or client authorization for any proprietary fonts, trademarks, and brand assets before commercial publication. Licensing notice
FAQ
What is Zurich Insurance’s primary brand color?
Zurich Insurance’s primary color is #2167AE (rgb(33, 103, 174)), used for primary actions and emphasis. Text is set in #23366F on a #FFFFFF surface.
What font does Zurich Insurance use?
Zurich Insurance uses Zurich Sans for headings, with SF Mono for code. Zurich Sans is a proprietary typeface; Ogg (Sharp Type, commercial) is reserved for display headlines. Source Sans 3 is a free substitute.
What is a free alternative to Zurich Insurance’s font?
Source Sans 3 is a close free alternative for headings, and JetBrains Mono works for monospace.
What corner radius does Zurich Insurance use?
Zurich Insurance reads as pill · 16 px+: controls use fully rounded pill shapes, cards about 28px, on a neutral white canvas (#FFFFFF).
Do Zurich Insurance’s brand colors meet WCAG contrast?
7 of 8 key pairings pass WCAG 2.1 AA. Accent on surface is 1.25:1
More in Swiss & European
Reference snapshot of Zurich Insurance’s public website styling for educational and interoperability purposes, scanned 11 Nov 2026. Zurich Insurance and its logo are trademarks of their owner, shown for identification only; SuiteAnvil is not affiliated with or endorsed by Zurich Insurance.
Compare your website with Zurich Insurance
Scan your own site and see its palette, fonts, corner radius, WCAG contrast and SEO score next to Zurich Insurance's, side by side.