ASK Berlin

Overview

ASK Berlin is a full-service agency for political and social communication, transforming complex civic narratives into compelling campaigns, events, design, and multimedia content. The brand serves political parties, unions, foundations, and social institutions across Germany. The aesthetic is **Architectural Minimalism with Bold Conviction**—a design language that pairs austere, high-contrast typography with a signature vivid red accent (#e3000f), creating visual authority without ornamentation. The UI evokes clarity, directness, and democratic purpose: every element earns its place through function, not decoration.

The brand voice is precise, confident, and unapologetically German: direct without coldness, sophisticated without pretension. ASK speaks in declarative statements and active verbs. Example: "Wir schaffen Zustimmung"—we create consent, not permission. The vocabulary favors concrete nouns (Kampagne, Botschaft, Haltung) over abstractions. Tone is never breathless or hyperbolic; it is the voice of strategists who have won elections and shaped public opinion.

Colors

The color system is built on a **high-contrast, politically-charged palette** that reflects German design tradition and the agency's uncompromising stance. Primary (#e3000f) is the signature accent—a vivid, slightly warm red deployed on all CTAs, headlines, and interactive states. It commands attention without aggression, appearing frequently enough to dominate visual hierarchy but sparingly enough to maintain impact. Secondary (#650714), a deep burgundy, provides container and hover states, creating depth through desaturation rather than lightening. The surface stack is anchored in off-white (#eae8e5) and pure white (#ffffff), with carefully calibrated grays (#d7d2cb, #a7a096, #837a6e) for secondary text and dividers. This palette rejects the false neutrality of pure black (#000000) and p

Typography

The type system uses **Barlow-ASK** (regular weight, 400) for body and UI text, paired with **Barlow Semi Bold-ASK** (weight 600) for all headings and labels. This pairing creates a clear hierarchy through weight alone, not size inflation. Display (64px, 600 weight, -0.03em tracking) is reserved for hero statements and section openers; it sets the tone with generous line-height (72px) and negative letter-spacing to tighten the visual mass. Headline-lg (40px, 600, -0.02em) is used for section titles and major content blocks. Body-md (16px, 400, 24px line-height) is the workhorse for all body copy, maintaining 1.5x line-height for readability. Labels (14px, 600, 20px line-height) appear on buttons and badges with 0.01em positive tracking for crispness. On small labels over busy backgrounds,

Layout

The layout uses a **12-column fluid grid** with a max-width of 1280px (991px on tablet, responsive below). The page rhythm is built on a **lg spacing (40px) section separation model**, creating breathing room between major content blocks. Gutter width is 24px (md spacing), applied consistently to all container padding. The hero section spans full-width with a deep burgundy background (#650714), establishing visual weight immediately. Card-based content uses md spacing (24px) for internal padding and lg spacing (40px) for gaps between card groups. The container-max-width of 1280px ensures readability on ultra-wide displays without creating uncomfortable line lengths. White-space is treated as a design element: generous margins around headlines (40px below display text, 24px below body parag

Elevation & Depth

Depth in this system is achieved through **subtle shadow layering and color contrast**, not dramatic drop-shadows. The elevation stack has three levels: Level 1 (Base) uses no shadow—flat surfaces on the white background. Level 2 (Standard Cards) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft separation from the background without visual drama. Level 3 (Modals, Floating Elements) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a slightly larger blur radius (24px vs 8px) to suggest greater distance. Hover states on cards transition from Level 1 to Level 2 over 300ms, signal

Shapes

The shape philosophy is **Geometric Precision with Functional Softness**—sharp where it matters, rounded where it improves usability. Buttons use full border-radius (1280px, effectively a pill shape) to soften the visual impact of high-contrast primary red and to signal clickability through form. Cards and containers use sm radius (0.125rem / 2px) for a nearly-flat appearance, maintaining the austere, editorial aesthetic. Input fields use DEFAULT radius (0.5rem / 8px), a subtle rounding that feels contemporary without being playful. Navigation elements and badges use full radius (1280px) to cr

Components

Action Elements Buttons are the primary interaction pattern. **button-primary** uses background: {colors.primary} (#e3000f), text: {colors.on-primary} (white), padding: 8px 32px, height: 48px, border-radius: 1280px (full pill). On hover, background transitions to {colors.primary-fixed-dim} (#e3000f with 200ms ease) and maintains white text. No border, no shadow on default state. **button-secondary** uses transparent background, text: {colors.primary}, border: 1px solid {colors.outline}, same padding and height. On hover, background becomes {colors.surface-container-high} (#e0dbd4) over 200ms. Both button variants use {typography.label-md} (14px, 600 weight, 0.01em tracking) for text, ensuring crisp, scannable labels.

Containers & Surfaces **card** component uses background: {color

Do's and Don'ts

**Do**

• Do use primary red (#e3000f) exclusively on CTAs, active states, and emphasis text—never on backgrounds or large surface areas.
• Do maintain 1.5x line-height (24px for 16px body text) for all body copy to ensure readability and German typographic standards.
• Do apply full border-radius (1280px) to all interactive elements (buttons, badges) to create a consistent affordance language.
• Do use the burgundy secondary (#650714) for hover states and container fills, never for text or small UI elements.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and floating elements; never use pure black shadows or glows.
• Do left-align all body text and navigation; centered text is reserved for hero headlines only.

**Don't**

• Don't use primary red on large background areas or as a fill for non-interactive containers—it dilutes the accent's impact.
• Don't apply font-weight below 400 or above 600; the system relies on weight 400 (regular) and 600 (semi-bold) for hierarchy.
• Don't round corners beyond 1280px (full pill) on buttons or 0.5rem (8px) on cards—excessive rounding conflicts with the architectural aesthetic.
• Don't use pure black (#000000) or pure white (#ffffff) for text; use #100f0d for dark text and #eae8e5 for light backgrounds.
• Don't apply multiple shadows or blur effects; stick to the three-level elevation stack (no shadow, 0 3px 8px, 0 8px 24px).
• Don't center-align body copy or use justified text; German typographic convention and readability both favor left alignment.