DZ BANK

Overview

DZ BANK is Germany's central cooperative banking institution, serving as the strategic hub for over 700 cooperative banks nationwide. The design system embodies Institutional Minimalism—a philosophy that prioritizes clarity, trust, and professional authority through restrained use of a bold orange accent (#f08200) against a clean white and neutral gray palette. The aesthetic is deliberately austere: no gradients, no decorative elements, no soft shadows. Every visual decision serves institutional credibility. The brand personality is authoritative yet approachable, speaking in precise, data-driven language without jargon. Voice example: 'Der Halbjahresbericht der DZ BANK Gruppe ist jetzt live—alle Kennzahlen und Analysen finden Sie im Online-Bericht.' The tone is direct, factual, and confident.

Colors

The color system is built on a foundation of institutional neutrality with a single, unmistakable accent. Primary (#f08200, a warm orange) is reserved exclusively for calls-to-action, interactive states, and brand emphasis—it appears on buttons ('Zum Online-Bericht', 'Alles akzeptieren'), active filter tabs, and hover states. This restraint ensures the primary color retains maximum impact and never becomes decorative noise. The surface stack ranges from pure white (#ffffff) at the brightest level down through carefully calibrated grays: surface-container-low (#ebebea) for subtle backgrounds, surface-container (#dfdedd) for card containers, and surface-container-highest (#ababab) for disabled or tertiary states. On-surface text is set to #404040 (near-black) for maximum legibility on light

Typography

The type system uses Frutiger Next Com as the primary typeface, a humanist sans-serif that conveys both professionalism and approachability. Display (54px, 700 weight, -0.02em letter-spacing) is reserved for hero headlines and major announcements; it commands attention without aggression. Headline-lg (40px, 600 weight) is used for section titles and modal headers. Body-md (16px, 400 weight, 24px line-height) is the workhorse for all body copy and ensures 16px minimum font size on mobile for accessibility. Label-md (14px, 600 weight) is applied to button text and form labels, with 0.01em letter-spacing to add subtle emphasis. All typography uses unitless line-height (1.5x for body, 1.33x for headlines) to scale proportionally with font size. On small labels over busy backgrounds or within d

Layout

The layout uses a 12-column fluid grid with a maximum container width of 1280px, ensuring content remains readable on ultra-wide displays while adapting fluidly below 768px breakpoints. Horizontal gutters are set to 24px (md spacing) on desktop, reducing to 12px (sm spacing) on tablet and mobile. Vertical rhythm is governed by the lg spacing token (40px) for section separation, creating clear visual breathing room between major content blocks. The homepage hero spans full-width with a semi-transparent overlay (rgba(0, 0, 0, 0.3)) to ensure text legibility over background imagery. Card-based layouts use md spacing (24px) for internal padding and are separated by 24px gaps. The search bar and filter components use compact spacing (12px padding, 4px internal margins) to maximize information d

Elevation & Depth

Depth in this system is achieved through subtle, restrained shadows and strategic use of borders rather than dramatic layering. Level 1 (base surfaces, cards) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft shadow that lifts elements 4-8px off the background. Level 2 (modals, dropdowns, elevated cards) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), creating a more pronounced separation. Level 3 (tooltips, popovers) uses box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1). All shadows use a 0px horizontal/vertical offset and 20-40px blur radius to create a diffuse, naturalistic effect. Borders

Shapes

The shape philosophy is 'Technical Precision'—minimal rounding that respects the grid and never feels organic or playful. Buttons and inputs use 4px border-radius (DEFAULT), a subtle curve that softens hard edges without introducing visual softness. Cards use 4px as well, maintaining consistency across interactive and container elements. Modals and elevated surfaces use 8px (lg) to signal increased importance through slightly more generous rounding. Badges and pills use full (9999px) border-radius for circular emphasis on status indicators and tags. The rationale: 4px is the smallest rounding

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. Primary buttons use {colors.primary} (#f08200) background with white text, 44px height, 12px vertical padding, 24px horizontal padding, and 4px border-radius. On hover, shift the background to #d97000 (darken by ~15%) and apply a 0.2s cubic-bezier(0, 0.42, 0.04, 1.1) transition—no scale transform, no shadow change, only color. Secondary buttons use {colors.surface-container-low} background with {colors.on-surface} text and a 1px solid {colors.outline-variant} border; on hover, shift to {colors.surface-container} and change text to {colors.primary}. Ghost buttons have transparent background and {colors.primary} text; on hover, add {colors.surface-container-low} background. All buttons mus

Do's and Don'ts

**Do**

• Do use the primary orange (#f08200) exclusively for interactive elements and calls-to-action; never use it for decorative backgrounds or non-interactive text.
• Do maintain 44px minimum height for all clickable elements (buttons, list items, input fields) to ensure touch accessibility on mobile devices.
• Do apply the cubic-bezier(0, 0.42, 0.04, 1.1) easing function to all transitions (0.15s–0.3s duration) for a consistent, snappy interaction feel.
• Do use the full 12-column grid and respect the 24px gutter; never break the grid for aesthetic reasons.
• Do pair color changes with other state indicators (scale, shadow, border) rather than relying on color alone to signal interactivity.

**Don't**

• Don't use gradients, blur effects, or glassmorphism—the brand is institutional and austere, not decorative.
• Don't apply border-radius > 12px except for full-circle badges; the aesthetic is technical, not organic.
• Don't use shadows > 0.12 opacity or blur > 40px; keep shadows subtle and naturalistic.
• Don't introduce secondary colors (blue, gray) into interactive elements; primary orange is the only accent color for buttons and focus states.
• Don't use font weights below 400 or above 700; the type system is restrained and professional, never ultra-light or ultra-bold.