Rud Pedersen Germany

Overview

Rud Pedersen Germany is a strategic public affairs and institutional communications firm operating at the intersection of politics, regulation, and corporate strategy. The brand embodies 'Institutional Clarity'—a design aesthetic that combines authoritative minimalism with precise, data-driven visual communication. The interface prioritises legibility and professional credibility, using a restrained palette of deep navy (#040331), crisp white (#ffffff), and a signature cyan accent (#73d4ff) that signals actionable intelligence and forward momentum. The emotional response is one of confidence tempered by accessibility: users feel they are engaging with expert counsel, not corporate opacity.

The brand voice is direct, measured, and substantive. Vocabulary favours concrete institutional language ('federal decision-makers', 'regulatory processes', 'coalition dynamics') over marketing abstractions. Tone is consultative rather than prescriptive—the copy educates and contextualises before recommending. Example sentence in brand voice: 'Germany's operating environment is shaped by coalition politics, federalism, strong ministerial influence and the close interaction between Berlin and Brussels.'

Colors

The color system operates on a principle of 'institutional contrast with precision accents.' The primary surface is pure white (#ffffff) with a light grey container stack (#f5f5f5 → #e2e2e2 → #cecece) for layering and depth. The dominant text colour is near-black (#1c1c1c), ensuring WCAG AAA contrast (21:1) on all surfaces. The secondary brand colour is a deep navy (#040331), used for hero sections, footer, and high-authority contexts where institutional weight is required.

The signature accent is a bright cyan (#73d4ff), applied exclusively to interactive elements: primary CTAs, link text, accordion icons, and focus states. This colour creates visual hierarchy without aggression—it reads as 'actionable' rather than 'urgent.' Supporting greys (#999999 for outlines, #424242 for tertiary el

Typography

The type system uses TT Hoves Pro as the primary typeface—a geometric sans-serif that conveys precision and institutional authority—paired with Open Sans for secondary labels and UI microcopy. The hierarchy spans from display (60px, 400 weight) down to label-sm (12px, 700 weight), with deliberate use of weight variation rather than size alone to signal importance. Headlines use 400 weight (not 600 or 700) to maintain elegance and avoid visual heaviness; body text sits at 18px with 28px line-height (1.56x), providing generous breathing room for dense policy content. Labels use Open Sans at 12px, 700 weight with 0.02em letter-spacing to create visual separation from body prose. Apply text-shadow: none on all text; instead, rely on colour contrast and whitespace for readability. On small labe

Layout

The page grid uses a 12-column responsive system with a maximum container width of 1280px. The layout philosophy is 'split-screen asymmetry': hero sections and accordion blocks divide the viewport into 50/50 image-and-content layouts on desktop (1618px+), collapsing to full-width stacked on tablet (768px) and mobile. Vertical rhythm is governed by a semantic spacing scale: section padding uses lg (40px) for desktop, md (24px) for tablet, and sm (12px) for mobile. Horizontal gutters are fixed at 24px on desktop, reducing to 12px on mobile. Accordion items use 20px vertical padding (1.25rem) with 1px solid #cecece borders between items. The container max-width of 1280px ensures text lines never exceed ~75 characters, maintaining readability for institutional content. Whitespace is generous—s

Elevation & Depth

Depth is achieved through a restrained shadow system and layered backgrounds, not through blur or glassmorphism. Level 1 (Base): white or light-grey surface with no shadow. Level 2 (Cards, Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background: {colors.surface-container-low} (#f5f5f5). Level 3 (Modals, Elevated Cards): box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.2), background: {colors.surface} (#ffffff). Hover states increase shadow depth to lg (1px 2px 8px rgba(0, 0, 0, 0.2)) and shift background to {colors.surface-container-high} (#e2e2e2), signalling interactivity without animation. Al

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used sparingly and consistently to signal interaction, never decoration. Buttons and primary CTAs use {rounded.lg} (16px), creating a subtle softness that distinguishes them from sharp-cornered text. Input fields and secondary containers use {rounded.DEFAULT} (8px), a compromise between sharpness and approachability. Accordion headers and list items use {rounded.DEFAULT} (8px) or no rounding at all (0px), maintaining the document-like, institutional feel. The full-radius badge uses {rounded.full} (9999px) for maximum visual dist

Components

Action Elements Buttons use a two-tier system: primary (background: {colors.primary} #73d4ff, text: {colors.on-primary} #040331, padding: 12px 24px, height: 48px, rounded: {rounded.lg} 16px) for main CTAs, and secondary (background: transparent, border: 1px solid {colors.outline}, text: {colors.on-surface}, padding: 8px 16px, height: 40px, rounded: {rounded.xl} 20px) for alternative actions. Primary buttons transition to {colors.primary-fixed-dim} (#6ac4eb) on hover with a 200ms ease-in-out timing. Links use {colors.primary} (#73d4ff) with no underline by default; on hover, apply text-decoration: underline and shift to {colors.primary-fixed-dim}. All interactive elements must have a visible focus state: box-shadow: 0 0 0 3px rgba(115, 212, 255, 0.1) on focus.

Containers & Surfaces

Do's and Don'ts

**Do**

• Do use {colors.primary} (#73d4ff) exclusively for interactive elements—links, buttons, focus states, and icons—to create a consistent 'actionable' visual language.
• Do maintain 1.56x line-height (28px on 18px body) for dense policy and regulatory content; generous vertical rhythm improves scannability.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to all elevated surfaces; this subtle shadow maintains the institutional, document-like aesthetic.
• Do use TT Hoves Pro at 400 weight for headlines; avoid bold (700) weights, which create visual heaviness incompatible with the brand's measured tone.
• Do ensure all text meets WCAG AAA contrast (7:1 minimum); on white backgrounds, use {colors.on-surface} (#1c1c1c) or {colors.secondary} (#040331).

**Don't**

• Don't use gradients, blur effects, or glassmorphism; the brand aesthetic is flat, precise, and document-like, not atmospheric or decorative.
• Don't apply {colors.primary} (#73d4ff) to non-interactive elements (backgrounds, borders, decorative shapes); reserve it exclusively for CTAs and focus states.
• Don't use border-radius greater than {rounded.xl} (20px) on buttons or cards; excessive rounding undermines the geometric precision and institutional authority.
• Don't mix typefaces; use TT Hoves Pro for body and headlines, Open Sans only for secondary labels and UI microcopy.
• Don't apply shadows greater than lg (1px 2px 8px rgba(0, 0, 0, 0.2)); heavy shadows create visual clutter and conflict with the minimalist, institutional aesthetic.