Serviceplan Group – House of Communication

Overview

Serviceplan Group – House of Communication is Europe's largest independent agency collective, serving as a strategic partner for brands navigating complex media and cultural landscapes. The design system embodies 'Corporate Minimalism with Accent Clarity'—a philosophy that prioritizes clean, light surfaces (rgb(239, 239, 239) background, white headers) punctuated by a bold, action-oriented red accent (rgb(255, 75, 79)) that commands attention on CTAs, links, and key interactive moments. The aesthetic is deliberately restrained: generous whitespace, a neutral gray hierarchy (#666666 for secondary text, #222222 for primary), and a measured use of the secondary blue (#3860be) for supporting information. This restraint creates psychological breathing room, allowing the brand's strategic messaging to dominate without visual noise.

The brand voice is authoritative yet approachable, speaking in clear German and English with precision and warmth. Tone: 'We solve complex problems through creative clarity.' Vocabulary favors concrete nouns (campaigns, brands, solutions) over abstract adjectives. Example sentence in brand voice: 'Wir erschaffen bewegende Kampagnen, mit denen Marken nachhaltig erfolgreich werden'—notice the emphasis on tangible outcomes (success, movement) rather than aesthetic flourish. The UI reinforces this by using sans-serif typography (Avenir Next) at generous sizes (body text at 16px, headlines at 32–118px) to ensure legibility and confidence.

Colors

The color system operates on a principle of 'Neutral Foundation + Accent Punctuation.' The surface stack—from #efefef (surface) through #d8d8d8 (surface-dim) to #b2b2b2 (surface-container-highest)—provides a cool, professional backdrop that reads as 'corporate' without coldness. Primary text (#222222) maintains high contrast (WCAG AAA) against all surfaces. The secondary text color (#666666) is used for supporting copy, metadata, and disabled states, creating a clear visual hierarchy without resorting to pure black or pure white.

The primary accent is #ff4b4f (rgb(255, 75, 79))—a warm, energetic red-coral that appears on all primary CTAs, active states, and brand-critical interactions. This color is never used for body text or large surface areas; it is reserved for moments of user action

Typography

The typography system is anchored in Avenir Next (AvenirNextLTProLight, AvenirNextLTProRegular), a humanist sans-serif that conveys both professionalism and approachability. Display text (118px, fontWeight 300) is used sparingly for hero headlines and major section breaks, creating visual anchors. Headline-lg (48px, fontWeight 400) and headline-md (32px, fontWeight 400) establish section hierarchy without excessive weight variation—the system relies on size, not boldness, to differentiate. Body text is set at 16px with 24px line-height (1.5), ensuring comfortable reading at arm's length on desktop and mobile. Labels and UI text use 14px (label-md) with 0.02em letter-spacing to add subtle sophistication to buttons and form fields. When small labels appear over busy backgrounds (e.g., badges

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, providing flexibility for both desktop and responsive breakpoints. Page rhythm is established through consistent spacing: lg spacing (40px) separates major sections (hero from content, content from footer), md spacing (24px) is used for card padding and component margins, and sm spacing (12px) for internal component spacing. The gutter width is 24px, creating breathing room between grid columns. Whitespace is treated as a first-class design element—sections are never packed; instead, they float in generous negative space, creating a sense of editorial calm. The body background (#efefef) is slightly warmer than pure white, reducing eye strain while maintaining the 'light and clean' aesthetic. Container max-wid

Elevation & Depth

Depth in this system is achieved through a combination of subtle shadows and border treatments, avoiding the 'floating card' aesthetic in favor of a more grounded, architectural approach. Level 1 (Base): The body background (#efefef) is the foundation; no shadow is applied. Level 2 (Standard Card/Container): Cards use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) and a 1px border in #aaaaaa, creating a gentle lift without drama. Level 3 (Elevated/Modal): Modals and overlays use box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) with a 1px border, signaling importance and focus. Input fields are recessed us

Shapes

The shape philosophy is 'Architectural Precision'—minimal rounding that suggests structure and intentionality rather than softness or playfulness. Border-radius values are: sm (2px) for subtle definition on small elements like badges, DEFAULT (3px) for standard buttons and inputs, md (4px) for slightly larger interactive elements, lg (8px) for cards and modals, and xl (12px) for hero sections and large containers. Full (9999px) is reserved for circular avatars and pill-shaped badges. The reasoning: 2–3px rounding feels contemporary and technical, avoiding the 'rounded' look of consumer apps; 8

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use #ff4b4f background with black text, 48px height, 16px padding (vertical/horizontal), and 3px border-radius. On hover (button-primary-hover), the background shifts to #ff6b6f with a 200ms ease-out transition. Secondary buttons (button-secondary) are transparent with a 1px #ff4b4f border and black text; on hover, they fill with #cccccc background. Tertiary buttons are text-only, using #222222 text on transparent background; on hover, they gain a #d0d0d0 background. All buttons use label-md typography (14px, 600 weight, 0.02em letter-spacing) for consistency.

Containers & Surfaces Cards (card component) use #ffffff background, 8px border-radius, 24px padding, and box-shadow: 0 3px 8px

Do's and Don'ts

**Do**

• Do use the primary red (#ff4b4f) exclusively for CTAs, active states, and brand-critical moments—never for body text or large surfaces.
• Do maintain minimum 24px padding in cards and 40px spacing between major sections to preserve the 'breathing room' aesthetic.
• Do apply 3px border-radius to buttons and inputs, and 8px to cards, to maintain the architectural precision of the system.
• Do use Avenir Next at 16px body size with 24px line-height (1.5) for comfortable reading; never drop below 14px for UI labels.
• Do transition all interactive states (hover, focus, active) over 150–200ms with ease-out timing to feel responsive and intentional.
• Do use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) for standard cards and 0 8px 32px rgba(0, 0, 0, 0.2) for modals to create subtle depth hierarchy.

**Don't**

• Don't use the primary red for body text, backgrounds, or large surface areas—it is reserved for interactive moments only.
• Don't apply border-radius greater than 8px to standard components; the system uses sharp, architectural rounding, not soft, rounded corners.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; use #222222 (on-surface) and #efefef (surface) instead.
• Don't apply multiple shadows or blur effects simultaneously; use either a single shadow OR a border, never both on the same element.
• Don't use font weights heavier than 600 (Semibold); the system relies on size and spacing for hierarchy, not weight variation.
• Don't reduce padding below 12px (sm spacing) or line-height below 1.5 (24px for 16px body text); legibility and breathing room are non-negotiable.