Radio Köln

Overview

Radio Köln is a bold, energetic local broadcaster serving Cologne since 1991, delivering news, music, and community engagement across 107.1 MHz, mobile apps, and web platforms. The design system embodies 'Broadcast Vitality'—a high-contrast, action-oriented aesthetic that combines striking yellow (#ffed00) as the primary accent with vivid red (#ff0000) headlines, creating immediate visual hierarchy and emotional urgency. The brand personality is direct, accessible, and community-focused: conversational without being casual, informative without being dry. Example voice: 'Stau auf der A1 — wir halten Dich auf dem Laufenden.' The UI prioritizes clarity and scannability, treating every pixel as a potential entry point to local content.

Colors

The color system is built on a principle of 'Contrast-Driven Clarity.' Primary (#ffed00) dominates call-to-action buttons, header backgrounds, and interactive focus states—its high luminance (95% lightness) ensures accessibility and draws the eye immediately. Secondary (#ff0000) is reserved for headline text (h1, h2) and critical alerts, creating a visual rhythm that guides readers through content hierarchy. Tertiary (#0045a5) supports links, secondary buttons, and data-driven UI elements (weather, traffic). The surface stack ranges from #f5f5f5 (page background) through #e5e7eb (container-low) to #ffffff (card surfaces), maintaining 4.5:1+ contrast ratios with body text (#454545) for WCAG AA compliance. Error states use #dc2626 with #fee2e2 backgrounds. All interactive elements transition

Typography

The type system pairs Futura PT (headlines: h1–h6 at 700 weight, 36px–60px) with Open Sans Variable (body: 16px–18px, 400 weight, 24px–28px line-height). This pairing communicates 'broadcast authority meets approachability'—Futura's geometric precision evokes radio-era professionalism, while Open Sans's humanist curves ensure digital readability. Headlines use -0.04em letter-spacing to tighten display sizes (60px+), while body text maintains 0em spacing for natural flow. Apply text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004) globally to reduce anti-aliasing artifacts on light backgrounds. For small labels over busy image backgrounds, layer text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to ensure legibility. All font families are loaded via Variable font declarations to reduce HTTP requests and ena

Layout

The page uses a fluid 9-column grid (max-width: 1100px) on desktop, collapsing to single-column on mobile (max-width: 1024px). Content containers use 24px horizontal padding (gutter) and 40px vertical spacing (lg) between major sections, creating a rhythm that mirrors broadcast segment breaks. The grid-template-columns: repeat(9, minmax(0, 1fr)) allows flexible card layouts: single-column cards span 1 column, featured articles span 2–3 columns, and sidebar widgets span 1–2 columns. Margin-bottom: 3rem separates ad banners from content, while margin-top: 1rem creates breathing room after page headers. Container max-width of 1100px ensures readability on ultra-wide displays without excessive line lengths. Spacing tokens are semantic: use md (24px) for card padding, lg (40px) for section sepa

Elevation & Depth

Depth is achieved through subtle shadows and layering, not darkness. Level 1 (base page): flat #f5f5f5 background with no shadow. Level 2 (cards, containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) creates a soft lift, suggesting content sits 4–8px above the page. Level 3 (modals, overlays, consent dialogs): box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5) with semi-transparent backdrop (rgba(0, 0, 0, 0.3)) creates modal prominence. Hover states on cards apply transform: scale(1.02) with transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1), creating a tactile 'lift' effect without changing shadow dep

Shapes

The shape philosophy is 'Functional Minimalism'—rounded corners are used sparingly to signal interactivity without softening the brand's directness. Buttons use border-radius: 0.5rem (4px), creating subtle roundness that feels contemporary without compromising the geometric precision of Futura headlines. Cards use the same 4px radius, maintaining visual consistency. Input fields use 0.5rem radius with a 1px solid border in surface-container-low (#e5e7eb), creating a clear affordance for text entry. Badges and pills use border-radius: 9999px (full) to denote status and non-clickable labels. No

Components

Action Elements Buttons are the primary interaction pattern. button-primary uses backgroundColor: {colors.primary} (#ffed00), textColor: {colors.on-primary} (#000000), padding: 8px 32px, height: 40px, and font-weight: 700. On hover, backgroundColor transitions to {colors.primary-fixed-dim} (#ddd) over 150ms. button-secondary uses transparent background with a 2px solid border in primary yellow, maintaining the same padding and height. Both buttons apply transition-property: color, background-color, border-color over 150ms with cubic-bezier(0.4, 0, 0.2, 1) timing. Focus states add box-shadow: 0 0 0 3px rgba(255, 237, 0, 0.1) for keyboard accessibility.

Containers & Surfaces Cards use backgroundColor: {colors.surface-bright} (#ffffff), rounded: 0.5rem, padding: 24px, and box-shadow:

Do's and Don'ts

**Do**

• Do use primary yellow (#ffed00) exclusively for CTAs, buttons, and header backgrounds—never for body text or secondary UI.
• Do apply red (#ff0000) only to h1/h2 headlines and critical alerts; it commands attention and should be rationed.
• Do maintain 4.5:1+ contrast ratios between text and background; test all color combinations with WCAG AA standards.
• Do use Futura PT for all headlines (h1–h6) at 700 weight; never substitute with Open Sans for headings.
• Do apply transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) to all interactive elements (buttons, cards, inputs) for consistent micro-interactions.
• Do use the 9-column grid layout on desktop; never force full-width layouts that exceed 1100px container max-width.

**Don't**

• Don't use primary yellow (#ffed00) for body text or backgrounds behind body text; it reduces readability below WCAG AA.
• Don't apply red (#ff0000) to non-headline text or secondary UI elements; reserve it for h1/h2 and error states only.
• Don't mix Futura PT and Open Sans weights arbitrarily; maintain 700 for headlines, 400 for body, 700 for labels.
• Don't use box-shadow values other than the three defined elevation levels (sm, md, lg); custom shadows break visual consistency.
• Don't apply transform: scale() or rotate() without a transition property; all animations must use 150ms cubic-bezier(0.4, 0, 0.2, 1).
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary radii fragment the design system.