SPD Niedersachsen

Overview

SPD Niedersachsen represents the German Social Democratic Party's digital presence in Lower Saxony, employing a bold, direct aesthetic rooted in political clarity and democratic accessibility. The design philosophy embraces 'Assertive Minimalism'—a movement that prioritizes unambiguous messaging through high-contrast color blocking, heavyweight typography, and generous white space. The brand evokes confidence, solidarity, and civic engagement, speaking directly to voters and party members without ornamental distraction. The UI personality is earnest and authoritative: the voice is direct, factual, and action-oriented, avoiding corporate softness. Example sentence: 'Die Stichtwahlen der niedersächsischen Kommunalwahlen am 27. September entscheiden über 123 kommunale Spitzenpositionen—deine Stimme zählt.'

Colors

The color system centers on the SPD's signature red (#e3000f), which dominates hero sections, primary CTAs, and all interactive focus states. This red is not merely decorative—it is the party's visual identity and must appear on every page as a signal of political authority and urgency. Secondary accents include vivid orange (#ff6900) for supporting highlights and calls-to-action, and vivid cyan-blue (#0693e3) for tertiary information and event calendars. The surface stack is deliberately neutral: pure white (#ffffff) for body backgrounds, with a shallow container hierarchy (surface-container-low at #f0f0f0, surface-container-high at #e9ecef) to avoid visual clutter. On-surface text is dark charcoal (#222222) for maximum legibility on white. The outline color (#949494) is used sparingly fo

Typography

The type system pairs Karla (a geometric sans-serif with strong, angular letterforms) for headlines and display text with Archivo Narrow (a condensed, utilitarian sans-serif) for body copy and UI labels. This pairing communicates political directness: Karla's bold weight (800) conveys authority and conviction, while Archivo Narrow's narrow proportions maximize information density on mobile devices. Headlines use 36–60px sizes with tight line-height (1.13–1.2) and negative letter-spacing (-0.04em to -0.02em) to create visual impact and reduce perceived whitespace. Body text runs at 16px with 1.5 line-height (24px) for comfortable reading. Labels and buttons use 13–14px at 600 weight with 0.01–0.02em letter-spacing to ensure clarity at small sizes. Apply text-shadow: 0 2px 4px rgba(0, 0, 0,

Layout

The page grid uses a fixed 12-column layout with a maximum container width of 840px, centered on the viewport. This constraint ensures that long-form political content (manifestos, policy statements, event descriptions) remains scannable and not overwhelming. The spacing scale follows a strict 8px unit system: gutter spacing between sections is 40px (lg), internal card padding is 24px (md), and micro-spacing within components is 12px (sm). Hero sections span full-width with 40px vertical padding, creating a bold visual anchor. Content sections are separated by 64px (xl spacing) to establish clear rhythm and allow readers to pause between topics. The grid uses 2em gaps between flex items, and all cards maintain zero border-radius (sharp corners) to reinforce the assertive, no-nonsense aesth

Elevation & Depth

Depth in this system is achieved through color blocking and strategic use of subtle shadows rather than layered glassmorphism. Level 1 (Base): white background (#ffffff) with no shadow. Level 2 (Cards and containers): 1px solid border-top in primary red (#e3000f), no drop shadow, creating a visual 'anchor' that draws the eye upward. Level 3 (Modals and overlays): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cookie consent dialogs and dropdown menus. This restrained shadow approach (8px blur, 0px offset, 15% opacity) prevents the interface from feeling heavy or dated. Interactive eleme

Shapes

The design system embraces 'Sharp-Edged Pragmatism': all primary UI elements use zero or minimal border-radius to convey directness and political clarity. Cards and containers use 0px border-radius (sharp corners), reinforcing the assertive, no-compromise aesthetic. Buttons use 3.75px (approximately 0.25rem) border-radius—just enough to soften the edges without compromising the bold, functional appearance. Input fields use 0.5rem (8px) border-radius for subtle approachability. The only exception is the full-radius (9999px) applied to pill-shaped buttons in legacy WordPress block styles, which

Components

Action Elements Primary buttons use #e3000f background with white text, 13px font-size, 600 weight, 13px vertical padding and 22px horizontal padding, and 3.75px border-radius. On hover, the background shifts to #790000 (a darker red) with a 200ms ease-in-out transition. Secondary buttons use #e9ecef background with #2d4156 text, matching the primary button dimensions but with a muted color palette to indicate lower priority. Ghost buttons (used for inline links and 'read more' actions) have transparent background, primary red text, and a 2px solid bottom border in the same red; on hover, the background becomes rgba(227, 0, 15, 0.05) and the text shifts to #790000. All buttons must have a minimum touch target of 44px height to meet WCAG accessibility standards.

Containers & Surfac

Do's and Don'ts

**Do**

• Do use primary red (#e3000f) on all primary CTAs, hero sections, and interactive focus states—it is the party's visual signature and must be immediately recognizable.
• Do maintain sharp corners (0px border-radius) on cards and containers to reinforce the assertive, no-nonsense political aesthetic.
• Do apply 40px (lg spacing) between major sections to create clear visual rhythm and allow readers to pause between topics.
• Do use Karla 800 for headlines and Archivo Narrow for body text to communicate authority and information density.
• Do ensure all interactive elements have a minimum 44px touch target height and clear focus states with 150ms transitions.
• Do use the surface container hierarchy (surface-container-low, surface-container-high) sparingly to avoid visual clutter on the white background.

**Don't**

• Don't use rounded corners (border-radius > 8px) on primary buttons or cards—this softens the political message and contradicts the assertive aesthetic.
• Don't apply drop shadows to cards or containers; instead, use the red top border and subtle background color shifts to indicate depth and interactivity.
• Don't use secondary colors (orange, cyan-blue) on primary CTAs—reserve primary red for all high-priority actions and focus states.
• Don't exceed 840px container max-width for text-heavy sections; this ensures optimal reading length (65–75 characters per line) and prevents cognitive overload.
• Don't use system fonts or generic sans-serifs; always specify Karla and Archivo Narrow to maintain the party's distinctive visual identity.
• Don't animate or transition background colors on buttons for longer than 200ms—this creates a snappy, responsive feel that matches the direct political voice.