Zürcher Kantonalbank

Overview

Zürcher Kantonalbank is a heritage Swiss universal bank that has served the Zurich region for over 150 years. The design system embodies 'Institutional Clarity'—a philosophy that marries the gravitas of traditional banking with the accessibility of modern digital interfaces. The brand personality is trustworthy yet approachable, precise yet human. The visual language uses a deep navy foundation (#080f5e) paired with vibrant primary blues (#1264f3) and accent teals (#00bec8) to create a sense of stability anchored by moments of digital energy. The UI evokes confidence without coldness: every interaction feels deliberate, every surface intentional.

The tone is direct, professional, and locally rooted. ZKB speaks in clear, unadorned Swiss German—no marketing hyperbole, no false intimacy. Example: 'Im Private Banking zählt Vertrauen' (In private banking, trust matters). The vocabulary avoids jargon where possible; when technical terms are necessary, they are explained with precision. The brand personality is that of a seasoned advisor who listens first, advises second, and never oversells.

Colors

The color system is anchored in a dual-layer strategy: institutional depth and digital clarity. The primary surface is pure white (#ffffff), ensuring legibility and a sense of openness. The header and hero sections employ a deep navy (#080f5e, rgb(8, 15, 94)) that conveys institutional authority and stability—this is the 'Zürcher DNA' made visual. Primary actions and interactive elements use a bright, saturated blue (#1264f3, rgb(18, 100, 243)) that reads as trustworthy and modern; this is the signature accent that users click on. Secondary blues (#0970a4) support hierarchy in navigation and secondary CTAs. The tertiary accent—a vibrant teal (#00bec8)—is reserved for highlights, success states, and moments of digital optimism. Error states use a bold red (#f40b0b) for immediate recognition

Typography

The type system uses FrutigerLTPro as the primary typeface, a Swiss humanist sans-serif that embodies precision and approachability—fitting for a Zurich-based institution. The hierarchy spans from Display (60px, 700 weight) for hero headlines down to Label-sm (12px, 500 weight) for metadata and badges. Headlines (40px–28px) use 600 weight to command attention without aggression; body text (18px–16px) sits at 400 weight for maximum readability. Letter-spacing is minimal (–0.04em on display, –0.02em on headlines) to maintain Swiss typographic tightness; body and labels use 0em to 0.02em for breathing room. Line-height follows a 1.4–1.5 ratio for body text (24px–28px) to ensure comfortable reading on screens. All interactive labels (buttons, badges) use 600–700 weight to signal clickability.

Layout

The layout system uses a 12-column grid with a max-width of 1280px, allowing flexible content arrangement while maintaining visual discipline. The gutter is 24px on desktop, scaling down to 16px on tablet and 12px on mobile. White-space is generous: section separation uses lg spacing (40px) to create breathing room between content blocks, while internal card padding uses md spacing (24px). The hero section spans full-width with a 40px vertical padding (lg spacing) on each side, creating a prominent entry point. Container widths vary by content type (896px for narrow text, 1024px for standard layouts, 1325px for full-bleed imagery), but all respect the 1280px max-width constraint. The spacing scale is semantic: xs (4px) for micro-interactions and icon spacing, sm (12px) for form field paddi

Elevation & Depth

Depth is achieved through a restrained shadow system that respects the Swiss minimalist aesthetic. The base layer (Level 1) is the white surface with no shadow—this is the default state for most content. Level 2 (Standard Cards) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a subtle lift that distinguishes cards from the background without visual drama. Level 3 (Elevated/Modals) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a softer, more diffuse shadow that suggests greater distance. Interactive elements (buttons, inputs) do not cast shadows in their default state; on hover,

Shapes

The shape philosophy is 'Technical Precision'—rounded corners are minimal and intentional, never decorative. Buttons and inputs use a 3px border-radius (rounded.DEFAULT), just enough to soften hard edges without appearing playful or organic. Cards use the same 3px radius for consistency. Larger containers (modals, expanded panels) may use 10px (rounded.lg) to signal increased importance. Badges and pills use 50% border-radius (rounded.full) to create a distinct visual category for metadata and status indicators. The rationale: sharp 90° corners would feel cold and institutional; excessive roun

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses {colors.primary} (#1264f3) with white text, 44px height, 11px 22px padding, and 3px border-radius. On hover, the background shifts to #003cb4 (button-primary-hover), maintaining the blue family while signaling interactivity. On active/pressed, the color deepens to #001d5c (button-primary-active). The transition is instantaneous (no animation delay) to feel responsive. Button-secondary uses a transparent background with a 2px solid border in {colors.primary}, allowing secondary actions to coexist without visual dominance. Button-tertiary is a ghost variant with no border, used for tertiary navigation or low-priority actions; on hover, it receives a subtle background fill ({colors.surface-con

Do's and Don'ts

**Do**

• Do use {colors.primary} (#1264f3) exclusively for primary CTAs and interactive focus states—it is the signature brand accent and must remain visually distinct.
• Do maintain the 3px border-radius default across buttons, inputs, and cards to preserve the 'Technical Precision' aesthetic; avoid rounding corners to 8px or higher unless explicitly signaling a modal or elevated container.
• Do apply the full-width header (#080f5e) with white text as the top anchor on every page; it is the visual signature of institutional authority.
• Do use the spacing scale semantically: lg (40px) for section breaks, md (24px) for card padding, sm (12px) for form fields—never hardcode arbitrary pixel values.
• Do ensure all interactive elements (buttons, inputs, list items) have a clear hover state that shifts color or background within the blue family to signal interactivity without introducing new hues.
• Do use FrutigerLTPro as the primary typeface; if unavailable, fall back to Helvetica, then system sans-serif—never use serif fonts or script typefaces.

**Don't**

• Don't use the tertiary teal (#00bec8) for primary CTAs or interactive elements; it is reserved for highlights, success states, and accent moments only.
• Don't apply shadows to buttons or inputs in their default state; shadows are reserved for cards and elevated containers to maintain visual hierarchy.
• Don't round corners to more than 10px on any component except badges (which use 50%); excessive rounding undermines the precision and trustworthiness of the brand.
• Don't mix typefaces or weights arbitrarily; use the defined typography scale (Display, Headline-lg/md, Title-lg, Body-lg/md, Label-md/sm) to maintain consistency.
• Don't use the error red (#f40b0b) for non-error states or decorative purposes; it must signal problems or critical information only.
• Don't hardcode colors inside component definitions; always use token references like {colors.primary} so the system remains maintainable and themeable.