Havas Germany

Overview

Havas Germany embodies a 'Strategic Minimalism' aesthetic—clean, purposeful, and data-driven. The brand serves global enterprises and ambitious mid-market clients seeking to build authentic, culturally resonant brands in an era of skepticism. The UI evokes clarity and confidence through a refined palette of bright primary blue (#007bff), neutral grays (#212529, #6c757d), and strategic accent yellows (#ffc107), creating an interface that feels both corporate-trustworthy and creatively energized. The emotional response is one of professional competence paired with human warmth: users feel they're working with strategists who understand both business rigor and cultural nuance.

Havas speaks in the language of insight and authenticity. The tone is direct, evidence-based, and occasionally playful—never corporate-speak, never breathless. Vocabulary favors concrete nouns (data, insight, meaning, impact) over abstract adjectives. Brand personality: intellectually curious, operationally excellent, culturally aware. Example sentence in brand voice: 'We surveyed 91,000 people across 10 markets—and they told us something uncomfortable: most brands are lying about caring.'

Colors

The color system is rooted in Bootstrap's proven palette, optimized for clarity and accessibility across digital and print. Primary (#007bff) is the signature action color—used exclusively on CTAs, active navigation states, and focus indicators. It commands attention without aggression, signaling trust and forward momentum. Secondary (#6c757d) provides neutral support for disabled states, secondary text, and metadata. Tertiary (#ffc107) serves as a highlight accent for warnings, achievements, and emphasis—deployed sparingly to avoid visual chaos. Error (#dc3545) communicates destructive actions and validation failures with unmistakable urgency.

The surface stack creates visual hierarchy through luminosity: surface-container-lowest (#f8f9fa) for subtle backgrounds, surface-container (#e9ec

Typography

The type system pairs NHaasGroteskDSPro—a geometric sans-serif with humanist warmth—across three weights: 55Rg (regular, 400) for body text, 65Md (medium, 600) for labels and subheadings, and 75Bd (bold, 700) for display and headlines. Display (80px, 700, -0.04em letter-spacing) commands hero sections with authority; Headline-lg (48px, 700) anchors major sections; Headline-md (32px, 600) introduces subsections; Body-lg (18px, 400, 28px line-height) ensures readability in long-form content; Body-md (16px, 400, 24px line-height) is the default paragraph size; Label-md (14px, 600, 0.01em tracking) emphasizes UI labels and buttons. The pairing communicates 'precision meets personality'—geometric clarity without sterility. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) to white text over photo

Layout

The layout follows Bootstrap's 12-column grid with a fixed container max-width of 1140px and responsive breakpoints at 576px (sm), 768px (md), 992px (lg), and 1200px (xl). Gutter width is 15px per side (30px total column gap), creating breathing room without excess whitespace. Section separation uses lg spacing (40px) for major content blocks, md spacing (24px) for subsections, and sm spacing (12px) for component-level grouping. The page rhythm alternates between full-width hero sections (800px height minimum) and contained content zones, preventing monotony. Container padding is consistently 25px on mobile, scaling to 40px on desktop. White-space is treated as a design element, not a void—negative space around headlines (40px below h2, 24px below h3) creates visual rest and improves scann

Elevation & Depth

Depth is conveyed through a three-tier shadow system that mimics physical layering without glassmorphism. Level 1 (Base): no shadow; surface-container-lowest (#f8f9fa) backgrounds establish the foundation. Level 2 (Cards & Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) lifts interactive elements 4-8dp above the base, creating subtle separation. Level 3 (Modals & Dropdowns): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) elevates overlays and popovers, ensuring they float above all other content. Focus states add a 0.2rem outline in rgba(0, 123, 255, 0.25) without additional shadow, maintaining

Shapes

The shape philosophy is 'Functional Softness'—rounded corners are applied strategically to humanize the interface without sacrificing legibility or hierarchy. Buttons use rounded: DEFAULT (0.5rem / 8px) for a subtle, approachable feel that avoids the harshness of sharp corners while maintaining professional restraint. Cards and containers use rounded: DEFAULT (0.5rem) for consistency with buttons, creating a cohesive visual language. Input fields and form elements also use rounded: DEFAULT (0.5rem) to signal they belong to the same interaction family. Modals and elevated surfaces use rounded:

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses backgroundColor: #007bff, textColor: #ffffff, padding: 12px 24px, height: 48px, rounded: 0.5rem, with box-shadow: 0 3px 8px rgba(0, 123, 255, 0.25). On hover, the background darkens to #0056b3 and the shadow expands to 0 0 0 0.2rem rgba(0, 123, 255, 0.25), creating a focus ring effect. Active state (#004085) indicates pressed state. button-secondary is transparent with a 1px border in #007bff and text color #007bff; on hover, it fills with backgroundColor: #cfe2ff (primary-container) and text shifts to #002366 (on-primary-container). All buttons use transition: background-color 150ms ease-in-out, box-shadow 150ms ease-in-out to smooth state changes.

Containers & Surfaces Cards are the primary conten

Do's and Don'ts

**Do**

• Do use primary (#007bff) exclusively for CTAs, active states, and focus indicators—it's the brand's signature accent and must remain distinctive.
• Do maintain 40px lg spacing between major sections and 24px md spacing between subsections to create visual rhythm and improve scannability.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to all elevated surfaces (cards, dropdowns, modals) to establish clear depth hierarchy.
• Do use NHaasGroteskDSPro-75Bd (700 weight) for display and headlines to command attention; reserve 55Rg (400) for body text to ensure readability.
• Do include a 0.2rem focus outline in rgba(0, 123, 255, 0.25) on all interactive elements for WCAG AA keyboard navigation compliance.

**Don't**

• Don't use secondary (#6c757d) or tertiary (#ffc107) as primary action colors—they dilute the brand's visual identity and confuse users about what to click.
• Don't apply border-radius: 0 to any interactive element; minimum 0.25rem (4px) is required to maintain the 'Functional Softness' aesthetic.
• Don't exceed 24px blur radius on box-shadows; larger blurs reduce contrast and make the interface feel unfocused.
• Don't mix typefaces; NHaasGroteskDSPro is the exclusive brand typeface across all weights—system fonts are fallbacks only.
• Don't use color alone to communicate state (e.g., red text for errors); always pair with an icon, border, or shadow to ensure accessibility for color-blind users.