DESIGN.md · Analysis

House-of-communication

house-of-communication.com · 28 Oct 2026 · 47 colors · AvenirNextLTProLight, AvenirNextLTProRegular

House-of-communication

Plan.Net (House of Communication) landing page for Agentic.AI services, presenting AI coworkers and multi-agent systems as measurable business solutions. Built on a restrained Swiss-style monochrome grid with a single coral-red accent reserved for conversion actions.

Colors

surface#efefef

surface-dim#d8d8d8

surface-bright#ffffff

surface-container-lowest#ffffff

surface-container-low#f7f7f7

surface-container#e9e9e9

surface-container-high#e2e2e2

surface-container-highest#d8d8d8

on-surface#000000

on-surface-variant#363636

inverse-surface#1e1e1e

inverse-on-surface#efefef

outline#777777

outline-variant#c1c1c1

surface-tint#ff4b4f

primary#ff4b4f

on-primary#000000

primary-container#ff4b4f

on-primary-container#000000

inverse-primary#ff8c8e

secondary#3860be

on-secondary#ffffff

secondary-container#d6e0f5

on-secondary-container#1b2f5e

tertiary#363636

on-tertiary#ffffff

tertiary-container#e2e2e2

on-tertiary-container#1e1e1e

error#ba1a1a

on-error#ffffff

error-container#ffdad6

on-error-container#410002

primary-fixed#ff4b4f

primary-fixed-dim#e0393d

on-primary-fixed#000000

on-primary-fixed-variant#363636

secondary-fixed#d6e0f5

secondary-fixed-dim#b3c6ea

on-secondary-fixed#0f2148

on-secondary-fixed-variant#3860be

tertiary-fixed#e2e2e2

tertiary-fixed-dim#c7c5c7

on-tertiary-fixed#1e1e1e

on-tertiary-fixed-variant#363636

background#efefef

on-background#000000

surface-variant#e2e2e2

Typography

display: fontFamily: AvenirNextLTProLight · fontSize: 80px · fontWeight: 300 · lineHeight: 80px
headline-lg: fontFamily: AvenirNextLTProLight · fontSize: 48px · fontWeight: 300 · lineHeight: 52px
headline-md: fontFamily: AvenirNextLTProRegular · fontSize: 16px · fontWeight: 700 · lineHeight: 24px
title-lg: fontFamily: AvenirNextLTProBold · fontSize: 20px · fontWeight: 700 · lineHeight: 30px
body-lg: fontFamily: AvenirNextLTProRegular · fontSize: 18px · fontWeight: 400 · lineHeight: 28px
body-md: fontFamily: AvenirNextLTProRegular · fontSize: 16px · fontWeight: 400 · lineHeight: 24px
label-md: fontFamily: AvenirNextLTProRegular · fontSize: 20px · fontWeight: 400 · lineHeight: 30px
label-sm: fontFamily: AvenirNextLTProBold · fontSize: 14px · fontWeight: 700 · lineHeight: 20px · letterSpacing: 0.02em

Design guidance

Overview

Plan.Net is the performance and AI arm of House of Communication, and this page sells Agentic Services: ready-to-use Agentic Coworkers and individually built multi-agent systems that connect corporate knowledge, data and tools to verifiable outcomes. The aesthetic is a quiet editorial modernism: a light gray canvas (#efefef), black Light-weight display type, and a hero photograph of translucent blue-violet glass panels carrying the 'Agentic.AI' wordmark. The emotional register is calm, competent and technical, not hype-driven.

The voice is declarative and outcome-focused, favoring short imperative headlines and sentences that name the business result rather than the technology. Vocabulary leans on 'verifiable result', 'business value', 'real work done'. Example sentence: "We design, develop, and operate agentic solutions — the value is what it creates."

Colors

The brand is almost entirely neutral: canvas #efefef, pure white #ffffff for raised cards, and #000000 for all display and body type. The single brand accent is coral-red #ff4b4f, used exclusively for conversion and navigation-level CTAs (the header Connect button at 60px height, and the primary 'Develop agentic solutions' button). Never use the red for body text or decorative fills. Secondary blue #3860be appears only as a supporting data or highlight accent and must not compete with the CTA red. Use #363636 for secondary text and #777777 for outlines and captions. Hero imagery carries the only gradient-like color field (lavender-to-cobalt glass); do not add additional gradients to UI chrome.

Typography

The type system is a single humanist geometric family, Avenir Next LT Pro, used at three weights: Light (300) for display and headlines to deliver the airy editorial tone, Regular (400) for body and CTA labels, and Bold (700) reserved for uppercase eyebrow labels such as 'AGENTIC.AI'. The display level is 80px Light with an 80px line-height (1.0), which is intentionally tight; apply no letter-spacing (normal) to keep Avenir's natural rhythm. Body copy sits at 16px/24px. For small uppercase eyebrow labels, apply letter-spacing: 0.02em and an underline border-bottom: 2px solid #000000 to create the signature underlined kicker.

Layout

The layout is a fluid 12-column grid capped at a 1200px container, with a two-column hero splitting image and copy roughly 50/50 (image panel 633px wide, text column starting at x=721). Section rhythm is driven by the 22px lg and 44px 2xl spacing steps: use 44px between a headline and its supporting paragraph group and 22px between paragraph and CTA. The header is a 60px-tall white bar with 24px horizontal gutters. Whitespace is generous; never fill the canvas edge to edge with cards.

Elevation & Depth

Depth is nearly flat. The page relies on color-block contrast (white surface-container-lowest over #efefef canvas) rather than shadows. When a shadow is needed for floating panels, use the measured 0 0 12px 2px #c7c5c7 for raised cards and 0px 2px 10px -3px #999 for menus. Level 1 (canvas #efefef, no shadow), Level 2 (cards #ffffff, optional 0 0 12px 2px #c7c5c7), Level 3 (overlays, 0 0 18px rgba(0,0,0,.2)). Do not add backdrop-filter or glass effects to UI; glass exists only in the photography.

Shapes

Shape philosophy: Architectural Sharpness. The brand uses nearly square geometry: buttons and header CTAs use a 2px to 4px radius, and cards step up to 8px, consistent with the measured scale sm 2px, md 4px, lg 8px. Full pill radius (9999px) is reserved for tag badges only. Avoid rounded-corner marketing styles above 8px; they would soften the technical, engineered character.

Components

Action Elements The primary button is a solid #ff4b4f block, 64px tall on the hero CTA and 60px on the header Connect button, with 16px padding, a 2px radius and label text at 20px Regular in black (#000000), not white, which preserves contrast on coral. Include a trailing 24px-wide line icon (plus or envelope) separated by roughly 32px. On hover, shift the background to #e0393d over a 200ms ease-out transition. The secondary action is a text link at 16px with an underline offset of 4px.

Containers & Surfaces Cards sit on #ffffff with an 8px radius and 24px internal padding, separated from the #efefef canvas by tone alone. On hover, step to #e2e2e2 (surface-container-high) over 200ms ease. Do not stack more than one elevation level.

Inputs & Interaction Input fields are trans

Do's and Don'ts

**Do**

Reserve #ff4b4f strictly for primary conversion and header Connect actions.
Set display headlines in Avenir Next LT Pro Light at 80px with 80px line-height.
Use 22px and 44px spacing steps to separate paragraph, CTA and section groups.
Keep button radii at 2px and card radii at 8px to preserve the sharp, engineered feel.

**Don't**

Don't apply coral red to body copy, icons used as decoration, or section backgrounds.
Don't introduce gradients, glassmorphism or drop shadows to UI chrome; reserve atmospheric color for hero photography.
Don't use Bold weight for headlines; Light is the brand's signature display weight.
Don't round buttons beyond 4px or use pill shapes outside tag badges.

---
version: alpha
name: House-of-communication
description: >-
  Plan.Net (House of Communication) landing page for Agentic.AI services, presenting AI coworkers and multi-agent
  systems as measurable business solutions. Built on a restrained Swiss-style monochrome grid with a single coral-red
  accent reserved for conversion actions.
logo:
  src: >-
    https://house-of-communication.com/content/experience-fragments/house-of-communication-aem/de/en/site/sidebar/plannet/_jcr_content/root/sidebar/lightlogo.coreimg.svg/1776847610970/plannet-logo-black.svg
colors:
  surface: '#efefef'
  surface-dim: '#d8d8d8'
  surface-bright: '#ffffff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f7f7f7'
  surface-container: '#e9e9e9'
  surface-container-high: '#e2e2e2'
  surface-container-highest: '#d8d8d8'
  on-surface: '#000000'
  on-surface-variant: '#363636'
  inverse-surface: '#1e1e1e'
  inverse-on-surface: '#efefef'
  outline: '#777777'
  outline-variant: '#c1c1c1'
  surface-tint: '#ff4b4f'
  primary: '#ff4b4f'
  on-primary: '#000000'
  primary-container: '#ff4b4f'
  on-primary-container: '#000000'
  inverse-primary: '#ff8c8e'
  secondary: '#3860be'
  on-secondary: '#ffffff'
  secondary-container: '#d6e0f5'
  on-secondary-container: '#1b2f5e'
  tertiary: '#363636'
  on-tertiary: '#ffffff'
  tertiary-container: '#e2e2e2'
  on-tertiary-container: '#1e1e1e'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#410002'
  primary-fixed: '#ff4b4f'
  primary-fixed-dim: '#e0393d'
  on-primary-fixed: '#000000'
  on-primary-fixed-variant: '#363636'
  secondary-fixed: '#d6e0f5'
  secondary-fixed-dim: '#b3c6ea'
  on-secondary-fixed: '#0f2148'
  on-secondary-fixed-variant: '#3860be'
  tertiary-fixed: '#e2e2e2'
  tertiary-fixed-dim: '#c7c5c7'
  on-tertiary-fixed: '#1e1e1e'
  on-tertiary-fixed-variant: '#363636'
  background: '#efefef'
  on-background: '#000000'
  surface-variant: '#e2e2e2'
typography:
  display:
    fontFamily: AvenirNextLTProLight
    fontSize: 80px
    fontWeight: 300
    lineHeight: 80px
  headline-lg:
    fontFamily: AvenirNextLTProLight
    fontSize: 48px
    fontWeight: '300'
    lineHeight: 52px
  headline-md:
    fontFamily: AvenirNextLTProRegular
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
  title-lg:
    fontFamily: AvenirNextLTProBold
    fontSize: 20px
    fontWeight: '700'
    lineHeight: 30px
  body-lg:
    fontFamily: AvenirNextLTProRegular
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
  body-md:
    fontFamily: AvenirNextLTProRegular
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  label-md:
    fontFamily: AvenirNextLTProRegular
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
  label-sm:
    fontFamily: AvenirNextLTProBold
    fontSize: 14px
    fontWeight: '700'
    lineHeight: 20px
    letterSpacing: 0.02em
rounded:
  sm: 2px
  DEFAULT: 4px
  md: 4px
  lg: 8px
  xl: 8px
  full: 9999px
spacing:
  unit: 8px
  xs: 8px
  sm: 10px
  md: 16px
  lg: 22px
  xl: 24px
  2xl: 44px
  gutter: 24px
  container-max: 1200px
elevation:
  sm: '0px 2px 10px -3px #999'
  md: '0 0 12px 2px #c7c5c7'
  lg: 0 0 18px rgba(0,0,0,.2)
layout:
  containerMaxWidth: 1200px
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.sm}'
    padding: '{spacing.md}'
    height: 64px
  button-primary-hover:
    backgroundColor: '{colors.primary-fixed-dim}'
    textColor: '{colors.on-primary}'
  button-secondary:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    padding: '{spacing.md}'
    height: 48px
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '{colors.on-surface}'
  header-connect:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.xl}'
    height: 60px
  nav-link:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    padding: '{spacing.xs}'
  nav-link-hover:
    backgroundColor: transparent
    textColor: '{colors.primary}'
  eyebrow-label:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.label-sm}'
    padding: '0'
  card:
    backgroundColor: '{colors.surface-container-lowest}'
    rounded: '{rounded.lg}'
    padding: '{spacing.xl}'
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
    rounded: '{rounded.lg}'
  input-field:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: 6px 15px
  input-field-focus:
    backgroundColor: '{colors.surface-bright}'
    textColor: '{colors.on-surface}'
  badge:
    backgroundColor: '{colors.secondary-container}'
    textColor: '{colors.on-secondary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: '{spacing.xs}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
The primary button is a solid #ff4b4f block, 64px tall on the hero CTA and 60px on the header Connect button, with 16px padding, a 2px radius and label text at 20px Regular in black (#000000), not white, which preserves contrast on coral. Include a trailing 24px-wide line icon (plus or envelope) separated by roughly 32px. On hover, shift the background to #e0393d over a 200ms ease-out transition. The secondary action is a text link at 16px with an underline offset of 4px.

### Containers & Surfaces
Cards sit on #ffffff with an 8px radius and 24px internal padding, separated from the #efefef canvas by tone alone. On hover, step to #e2e2e2 (surface-container-high) over 200ms ease. Do not stack more than one elevation level.

### Inputs & Interaction
Input fields are trans

## Do's and Don'ts

**Do**
- Reserve #ff4b4f strictly for primary conversion and header Connect actions.
- Set display headlines in Avenir Next LT Pro Light at 80px with 80px line-height.
- Use 22px and 44px spacing steps to separate paragraph, CTA and section groups.
- Keep button radii at 2px and card radii at 8px to preserve the sharp, engineered feel.

**Don't**
- Don't apply coral red to body copy, icons used as decoration, or section backgrounds.
- Don't introduce gradients, glassmorphism or drop shadows to UI chrome; reserve atmospheric color for hero photography.
- Don't use Bold weight for headlines; Light is the brand's signature display weight.
- Don't round buttons beyond 4px or use pill shapes outside tag badges.

Edit, then copy or download.