ASK Berlin

Overview

ASK Berlin is a full-service political and social communication agency founded in 2001, serving political parties, unions, foundations, and civil society organizations across Germany. The design system embodies **Political Directness**—an aesthetic rooted in German political communication's tradition of bold, uncompromising visual language. The brand personality is authoritative yet accessible, speaking with precision and conviction. The UI prioritizes clarity over decoration: a striking red accent (#e3000f) commands attention on call-to-action elements, while a warm beige-and-black palette (#100f0d, #d7d2cb, #650714) grounds the interface in institutional credibility. The emotional response is one of trust and urgency—users feel the weight of consequential communication.

Voice and vocabulary are direct, professional, and German-inflected: sentences are declarative, never hedged. Example: "Wir schaffen Zustimmung durch Kampagnen, Events, Design, Text, Podcast und Video." (We create consent through campaigns, events, design, text, podcast, and video.) The brand avoids soft language, corporate jargon, and decorative flourishes. Typography is bold and confident; spacing is generous but purposeful; color is used sparingly and strategically to signal action and hierarchy.

Colors

The color system is built on a **high-contrast political palette** designed to command attention and convey institutional authority. Primary (#e3000f) is the signature accent—a vivid, slightly warm red used exclusively on call-to-action buttons, active navigation states, and critical messaging. It appears sparingly but decisively, ensuring every use carries weight. The primary container (#650714) is a deep burgundy used for hover states and secondary emphasis, creating a two-tier red system that maintains visual hierarchy without introducing competing accents.

The surface stack is anchored in white (#ffffff) and warm neutrals: surface-dim (#f5f5f5), surface-container (#eeeeee), and surface-container-highest (#dddddd) provide subtle layering for cards, inputs, and background sections. On-s

Typography

The type system uses two custom Barlow variants—Barlow Semi Bold-ASK for headlines and Barlow-ASK for body—creating a cohesive, German-influenced typographic voice. Display (60px, 700 weight, -0.04em tracking) is reserved for hero statements and campaign messaging; headline-lg (40px, 600 weight) anchors section introductions; body-md (16px, 400 weight, 0.01em tracking) is the workhorse for paragraphs and descriptions. The weight hierarchy is deliberate: semi-bold (600) is used for all interactive labels and headlines to signal actionability, while regular (400) recedes for supporting copy.

Line-height is set generously (1.5x font size for body, 1.2x for headlines) to ensure readability at the fluid font-size scale (which ranges from 0.75rem to 1.25rem depending on viewport). Letter-spacin

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, centered with margin-auto. Container padding is 24px (gutter) on desktop, reducing to 16px on tablet (991px breakpoint) and 12px on mobile (479px breakpoint). Section spacing follows a lg (40px) rhythm for major section breaks (e.g., hero to project gallery), md (24px) for subsection separation, and sm (12px) for component-level spacing. The fluid font-size scale (calculated via CSS calc() with viewport-width coefficients) ensures typography scales smoothly across breakpoints without jarring jumps.

White-space philosophy is **generous and purposeful**: hero sections occupy 600px minimum height with 80px vertical padding; card grids use 24px gaps; form inputs have 12px padding with 24px margin-bottom. This breathing room re

Elevation & Depth

Depth is conveyed through subtle shadows and background color shifts rather than dramatic layering. The elevation system uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for cards and inputs at rest, md (0 4px 12px rgba(0, 0, 0, 0.08)) for hovered cards and modals, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for floating elements like dropdowns and overlays. Shadows are soft and warm-tinted (using rgba(0, 0, 0, ...) with low opacity) to avoid harsh contrast against the warm beige palette.

The layer stack is flat-to-minimal: Level 1 (Base) is white surface (#ffffff) with no shadow. Level 2 (C

Shapes

The shape philosophy is **Institutional Minimalism**—sharp corners on most elements, full-radius only on buttons and badges. Buttons use border-radius: 9999px (full) to create pill-shaped CTAs that signal interactivity and stand out against the rectilinear card grid. Cards and containers use border-radius: 0.5rem (8px, DEFAULT) for subtle softness without compromising institutional formality. Inputs use the same 8px radius, creating visual consistency across interactive surfaces.

The reasoning: full-radius buttons are a deliberate departure from the grid, making them unmissable as action elem

Components

Action Elements Buttons are the primary interactive element and use a two-state system: button-primary (background: #e3000f, color: #ffffff, border-radius: 9999px, padding: 8px 32px, height: 48px, font-weight: 600) and button-primary-hover (background: #650714, color: #ffffff). The transition is background-color 200ms ease, with no scale or shadow change—the color shift alone signals interaction. Secondary buttons (button-secondary) use a transparent background with a 2px solid #e3000f border, inverting to filled on hover. All buttons use label-md typography (14px, 600 weight, 0.02em tracking) and are vertically centered with 8px top/bottom padding. Never use button text smaller than 14px or larger than 18px.

Containers & Surfaces Cards (card component) use background-color: #fafa

Do's and Don'ts

**Do**

• Do use primary red (#e3000f) exclusively for CTAs, active navigation, and critical messaging—never dilute its impact with overuse.
• Do maintain 24px gutter spacing on desktop and reduce proportionally on mobile; never collapse to less than 12px.
• Do apply text-shadow 0 1px 2px rgba(0, 0, 0, 0.06) to body text over colored backgrounds to ensure 4.5:1 contrast.
• Do use Barlow Semi Bold-ASK (600 weight) for all interactive labels and headlines; reserve Barlow-ASK (400 weight) for body copy.
• Do transition button and card states over 200ms using ease timing; never use instant color changes.
• Do keep button height at 48px minimum for touch targets; never reduce below 44px on mobile.

**Don't**

• Don't use primary red (#e3000f) for body text, backgrounds, or decorative elements—reserve it for action and urgency.
• Don't apply border-radius greater than 8px to cards or inputs; full-radius is reserved for buttons and badges only.
• Don't use shadows darker than rgba(0, 0, 0, 0.12) or spread greater than 40px; the aesthetic is clean and institutional, not dramatic.
• Don't mix Barlow variants with system fonts (Arial, sans-serif) in the same component; always load custom fonts via @font-face.
• Don't reduce font-size below 14px for interactive elements or below 12px for labels; maintain legibility at all scales.
• Don't use more than two accent colors (primary red and tertiary burgundy); secondary beige is for neutrals only, never for emphasis.