KPMG Switzerland

Overview

KPMG Switzerland's design system embodies 'Corporate Modernism'—a disciplined aesthetic that merges institutional authority with contemporary clarity. The brand serves multinational enterprises and mid-market organizations navigating complex business challenges; the UI conveys precision, trustworthiness, and forward momentum through a carefully calibrated palette of deep navy (#0c233c), electric blue (#1e49e2), and clean whites (#ffffff). The emotional response is one of competence without coldness: users feel guided by expertise, not intimidated by complexity.

The brand voice is direct, solution-oriented, and multilingual-friendly. KPMG speaks in active constructions, concrete outcomes, and measured confidence. Vocabulary favors 'excellence,' 'multidisciplinary,' 'mastery,' and 'partnership' over hyperbole. Example sentence in brand voice: 'Wir helfen Ihnen, komplexe Herausforderungen zu meistern'—we help you master complex challenges, not merely 'solve' them.

Colors

The color system is anchored in a three-tier hierarchy: **Primary (#1e49e2)** is the electric blue accent deployed on all interactive CTAs, focus states, and brand-critical links. It appears on the primary button 'Alle akzeptieren' (48px height, 12px 24px padding, border-radius 32px) and secondary button 'Alle ablehnen' (same dimensions, inverted: white background, blue text). **Secondary (#00338d)** is a deeper navy used for secondary actions and supporting UI elements, creating visual distinction without competing for attention. **Tertiary (#63ebda)** is a cyan accent reserved for highlights, success states, and data visualization accents—used sparingly to avoid visual noise.

**Surface stack**: The light mode uses #ffffff (surface) as the base, with progressive darkening through #f5f6fa

Typography

The type system uses two font families in a complementary pairing: **OpenSans_Condensed** (700 weight) for headlines and display text, delivering architectural precision and visual impact at large sizes (48px for h1, 32px for h2); **OpenSans** (400 for body, 600 for labels) for all body copy and UI labels, ensuring readability at small sizes (16px body-md, 14px label-md). This pairing communicates 'structured expertise'—the condensed headlines feel authoritative and space-efficient, while the regular body text remains warm and accessible.

Headline hierarchy is strict: display (60px, -0.04em letter-spacing) for hero statements; headline-lg (48px, -0.02em) for section titles; headline-md (32px, -0.01em) for subsections. Body copy uses 16px at 24px line-height (1.5x), with 0em letter-spacing

Layout

The layout follows a **12-column fluid grid** with a maximum container width of 1280px, centered on desktop and full-width on mobile. The hero section (visible in the screenshot) spans the full viewport width with a layered background: a deep navy gradient (#0c233c transitioning to #7213ea purple) overlaid with abstract 3D shapes, creating depth without additional DOM elements. Content is left-aligned within a 50% column width on desktop (896px observed), leaving the right half for the dynamic background imagery.

White-space philosophy prioritizes breathing room: **lg spacing (40px)** separates major sections; **md spacing (24px)** separates cards and content blocks; **sm spacing (12px)** separates inline elements. The gutter is consistently 24px on desktop, reducing to 12px on tablet and

Elevation & Depth

Depth is conveyed through a **three-level shadow system** combined with subtle background color shifts, avoiding heavy drop-shadows that would feel dated. **Level 1 (Base)**: No shadow; flat surfaces on the surface-container-lowest (#f5f6fa) or surface (#ffffff) backgrounds. **Level 2 (Elevated Cards & Inputs)**: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, input fields, and standard buttons. This 3px blur radius and 8px spread create a soft, readable separation without visual heaviness. **Level 3 (Modals & Overlays)**: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), used on modal

Shapes

The shape philosophy is **'Institutional Softness'**—sharp corners for corporate authority, rounded corners for approachability, with a clear distinction between component types. **Buttons** use border-radius: 32px (full pill shape, 2rem), creating a friendly, modern CTA that stands out against the rectangular grid. This is applied to both primary (#1e49e2 background, white text) and secondary (#1e49e2 background, white text) buttons visible in the cookie modal. **Cards and containers** use border-radius: 0px (sharp corners) for a clean, architectural feel, reinforcing institutional credibilit

Components

Action Elements **Button Primary** (48px height, 12px 24px padding, border-radius 32px, backgroundColor #1e49e2, textColor #ffffff, fontFamily OpenSans, fontSize 16px, fontWeight 600): The main CTA for high-priority actions. Hover state darkens to #1a3fb8 (10% darker blue) with no shadow change. Focus state adds a 2px solid outline in #0c233c with 2px outlineOffset for keyboard navigation. Active state uses the same color as hover. Transition: all 150ms ease-out.

**Button Secondary** (same dimensions as primary, but backgroundColor #1e49e2, textColor #ffffff): Used for secondary actions like 'Alle ablehnen' in the cookie modal. Hover behavior mirrors primary. No border; relies on color contrast for distinction.

**Button Ghost** (48px height, 12px 24px padding, border-radius 16px, bac