House of Communication

Overview

House of Communication is Europe's largest independent agency group, delivering holistic brand campaigns that transform complex strategic challenges into compelling visual and narrative experiences. The design system embodies 'Architectural Minimalism'—a disciplined, grid-based aesthetic that prioritizes clarity, hierarchy, and purposeful restraint. The brand personality is authoritative yet approachable: confident in its expertise, direct in its communication, and unafraid of bold accent colors (particularly the signature coral-red #ff4b4f) to punctuate moments of call-to-action and brand emphasis. The UI evokes a sense of professional sophistication through generous whitespace, precise typography, and a neutral palette anchored by light grays (#efefef, #d8d8d8) and deep charcoals (#363636, #1e1e1e), allowing the brand's red accent to command attention without visual noise.

The tone is precise, strategic, and solution-oriented. Vocabulary patterns favor active verbs ('Build', 'Stage', 'Create', 'Connect') and avoid marketing hyperbole. Example sentence in brand voice: 'We stage brands holistically—connecting strategy, creativity, and media to drive measurable impact.' The design system reinforces this voice through clean typography (Avenir Next LT Pro for body, service-30 for display), minimal ornamentation, and a component library that prioritizes functional clarity over decorative flourish.

Colors

The color system operates on a principle of 'Purposeful Contrast': a neutral, light-dominant surface palette (#efefef background, #ffffff containers) is punctuated by a single, high-saturation accent color—the brand's signature coral-red (#ff4b4f, rgb(255, 75, 79))—which appears exclusively on primary CTAs, interactive states, and brand-defining moments. This red is never used for body text or passive elements; it is reserved for moments that demand user action. Secondary colors include a deep charcoal (#363636) for secondary CTAs and structural elements, and a corporate blue (#3860be) for tertiary accents and data visualization. The surface stack progresses from #efefef (base) through #d8d8d8 (container) to #cccccc (container-high), creating subtle depth without relying on shadows. On-sur

Typography

The type system is hierarchical and restrained, built on two primary typefaces: Avenir Next LT Pro (body, labels, and UI text) and service-30 (display headlines only). Display (118px, 400 weight, -0.04em letter-spacing) is reserved for hero headlines and sets an aspirational, spacious tone; headline-lg (48px, 700 weight) anchors section introductions; headline-md (32px, 700 weight) and title-lg (24px, 700 weight) organize content hierarchy. Body text operates at 16px (400 weight, 24px line-height) for optimal readability on light backgrounds; body-lg (18px) is used for introductory paragraphs and callouts. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to buttons, form labels, and UI controls; label-sm (12px, 500 weight, 0.05em letter-spacing) is reserved for secondary label

Layout

The layout system uses a 12-column fluid grid with a maximum container width of 1200px, ensuring responsive scaling from mobile (single column) to desktop (full 12 columns). The spacing scale is semantic: unit (8px) is the base increment; xs (4px) and sm (12px) are used for tight component spacing; md (24px) is the standard gutter for section separation and card padding; lg (40px) separates major content blocks; xl (64px) is reserved for hero sections and full-width spacing. Whitespace is treated as a design element, not a residual: sections are separated by lg (40px) vertical spacing, creating a rhythm that mirrors the brand's deliberate, measured communication style. Container max-width is 1200px, with 24px horizontal gutters on desktop, collapsing to 12px on tablet and 8px on mobile. Th

Elevation & Depth

Depth in this system is achieved through subtle layering and precise shadow application, avoiding the heavy drop-shadows common in contemporary design. The elevation scale consists of three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minor UI elements like form inputs and small cards; md (0 3px 8px rgba(0, 0, 0, 0.15)) for primary cards, buttons on hover, and modal content; lg (inset 0 0 6px rgba(0, 0, 0, 0.3)) for deep, inset shadows used sparingly on dialog overlays or embedded content. Flat design is the default: most components (buttons, inputs, list items) have no shadow until hover or

Shapes

The shape philosophy is 'Minimal Geometry'—border-radius is kept small and consistent, avoiding the rounded-corner excess that dilutes visual authority. The rounded scale progresses from sm (2px, used on small UI elements like badges and form inputs) through DEFAULT (3px, the standard for buttons and cards) to lg (8px, for larger containers and modals) and xl (12px, reserved for hero sections and full-width containers). Full (9999px) is used exclusively for pill-shaped buttons and circular avatars. The reasoning is functional: 2–3px radius maintains a technical, professional appearance aligned

Components

Action Elements Buttons are the primary interaction pattern and must always use the primary red (#ff4b4f) for primary CTAs. Button-primary has a height of 48px, padding of 16px 24px, and uses label-md typography (14px, 600 weight). The background is solid #ff4b4f with black text (#000000); on hover, the background shifts to #ff7a7e with a 200ms ease-in-out transition. Button-secondary is transparent with a 1px border in #ff4b4f and the same text color; on hover, the background fills with #ffcccc (primary-container) and text becomes #330000 (on-primary-container). Button-ghost is transparent with no border; on hover, it gains a #cccccc background and the text color shifts to #ff4b4f. All buttons have border-radius: 3px (DEFAULT) and no box-shadow in the default state.

Containers &

Do's and Don'ts

**Do**

• Do use the primary red (#ff4b4f) exclusively for CTAs, interactive states, and moments requiring user attention—never for passive content or backgrounds.
• Do maintain 24px (md spacing) gutters between major sections and 12px (sm spacing) between components to create visual rhythm and reduce cognitive load.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) to small labels (12px) overlaid on images or busy backgrounds to ensure legibility.
• Do use Avenir Next LT Pro for all body and UI text; reserve service-30 exclusively for display headlines (118px+).
• Do transition all interactive state changes (hover, focus, active) over 150–200ms using ease-in-out timing to maintain the brand's measured, professional tone.

**Don't**

• Don't use border-radius > 12px except for full-circle elements; the brand's architectural minimalism requires sharp, disciplined geometry.
• Don't apply shadows to buttons or inputs in their default state; shadows are reserved for hover/active states and elevated containers (cards, modals).
• Don't use the primary red (#ff4b4f) for body text, disabled states, or secondary UI elements; it must remain a high-contrast accent.
• Don't exceed 1200px container max-width or reduce horizontal gutters below 8px on mobile; whitespace is a core design principle.
• Don't mix typefaces within a single component; Avenir Next LT Pro and service-30 are the only approved fonts, and each has a specific role.