SPD Niedersachsen

Overview

SPD Niedersachsen represents the digital voice of a major German political party, serving constituents, activists, and the general public with news, policy information, and engagement opportunities. The design aesthetic is 'Political Directness'—a bold, uncompromising visual language that prioritizes clarity and action over decoration. The brand personality is authoritative yet approachable: the striking red (#e3000f) commands attention on every CTA and headline, while generous white space and clean typography ensure information remains scannable and trustworthy. The emotional response is one of confidence and civic purpose: users should feel empowered to engage, informed by facts, and motivated to participate. Voice: direct, factual, never patronizing. Example: 'Unsere 10-Punkte-Programm für bessere Bildung und Betreuung in Niedersachsen—jetzt weiterlesen.'

Colors

The color system is anchored by a single, unmissable primary accent: SPD Red (#e3000f), deployed on all primary CTAs, hero headlines, and interactive focus states. This red is not merely decorative—it is the party's signature and must appear at least once per viewport to maintain brand presence. Secondary accent orange (#ff6900) supports campaigns and highlights; tertiary blue (#0693e3) is reserved for links and secondary information hierarchies. The surface stack is deliberately minimal: pure white (#ffffff) as the dominant background, with subtle grays (#f0f0f0, #e9ecef, #eeeeee) used only for container differentiation and disabled states. Text on white is always dark (#222222 for primary, #6c757d for secondary), ensuring WCAG AAA contrast (19:1 and 8:1 respectively). The outline color (

Typography

The type system pairs Karla (a geometric sans-serif with strong personality) for all headlines and display text with Archivo Narrow (a condensed, utilitarian sans-serif) for body copy and UI labels. This pairing communicates both authority (Karla's bold weights at 700–800) and efficiency (Archivo Narrow's tight tracking). Display text uses Karla at 60px, 800 weight, with -0.04em letter-spacing to create visual impact on hero sections; headlines scale down to 40px (headline-lg), 28px (headline-md), and 20px (title-lg), all at 700 weight. Body copy is set in Archivo Narrow at 16px (body-md) or 18px (body-lg), 400 weight, with 24px or 28px line-height respectively, ensuring readability at all sizes. Labels and UI text use Archivo Narrow at 13–14px, 600 weight, with 0.01–0.02em letter-spacing

Layout

The page grid is a 12-column fluid layout with a maximum container width of 1280px, centered with equal margins on desktop. The spacing scale is semantic: unit (8px) is the baseline; xs (4px) for micro-spacing; sm (12px) for tight grouping; md (24px) for standard padding and component gaps; lg (40px) for section separation; xl (64px) for major layout breaks. Hero sections occupy full width with 40px vertical padding (md spacing on sides, lg on top/bottom). Content cards use md (24px) padding internally. Gutters between columns are 24px (gutter token). The white-space philosophy is 'breathing room'—sections are separated by lg (40px) gaps minimum, and no two text blocks should be closer than md (24px) vertically. On mobile (< 768px), reduce container padding to sm (12px) and section gaps to

Elevation & Depth

Depth is achieved through subtle shadows and layering, never through color darkening. The elevation system uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on flat elements; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdowns; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and floating panels. Cards at rest have no shadow; on hover, they elevate to md shadow and shift background to surface-container-low (#f0f0f0). Modals use lg shadow and a semi-transparent dark overlay (rgba(0, 0, 0, 0.5)) with a 4px blur backdrop-filter. Buttons have no shadow at rest; on

Shapes

The shape philosophy is 'Functional Minimalism'—rounded corners are used sparingly and purposefully, never as decoration. Buttons and inputs use sm (4px / 0.25rem) border-radius, a subtle softening that feels modern without appearing playful. Cards use DEFAULT (8px / 0.5rem) for a slightly more pronounced corner. Modals and floating panels use lg (16px / 1rem) to signal elevation and importance. The full (9999px) radius is reserved for badges and pill-shaped elements only. Hero sections and full-width blocks have 0px radius (sharp corners) to anchor the layout and convey authority. This gradua

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use #e3000f background, white text, 13px Archivo Narrow 600 weight, 13px vertical × 22px horizontal padding, 4px border-radius, and 44px height. On hover (button-primary-hover), the background shifts to #990000 with no shadow change. On active (button-primary-active), the background becomes #790000. Secondary buttons (button-secondary) use surface-container-high (#e9ecef) background with primary text (#e3000f), same padding and sizing. Ghost buttons (button-ghost) have transparent background, primary text, a 1px primary border, and on hover (button-ghost-hover) shift to primary-container (#ffcccc) background. All buttons must use transition: background-color 150ms ease-out to smooth state chan

Do's and Don'ts

**Do**

• Do use primary red (#e3000f) on every major CTA and at least once per viewport to maintain brand presence and guide user attention.
• Do maintain generous white space (lg spacing, 40px minimum) between sections to create breathing room and signal importance.
• Do apply Karla 700–800 weight for all headlines to convey authority; reserve Archivo Narrow for body copy and UI labels.
• Do use the three-tier shadow system (sm/md/lg) consistently; never add custom shadows outside the elevation tokens.
• Do test all color combinations for WCAG AAA contrast; primary text on white must achieve 19:1 minimum.
• Do use the full (9999px) border-radius only for badges and pills; keep buttons and cards at sm/DEFAULT for functional clarity.

**Don't**

• Don't use secondary colors (orange #ff6900, blue #0693e3) as primary CTAs; reserve them for supporting accents and secondary information.
• Don't hardcode hex values in component definitions; always reference color, typography, spacing, and rounded tokens.
• Don't apply shadows to buttons at rest; elevate only on hover or active states to maintain visual hierarchy.
• Don't mix Karla and Archivo Narrow weights arbitrarily; use Karla 700+ for headlines only, Archivo Narrow 400 for body.
• Don't reduce spacing below md (24px) between major sections; cramped layouts undermine the brand's authoritative presence.
• Don't use rounded corners on full-width hero sections or structural blocks; reserve rounding for interactive and floating elements.