Europa-Union Düsseldorf-Neuss

Overview

Europa-Union Düsseldorf-Neuss is a civic engagement platform serving Germany's largest citizen initiative for European integration. The design system embodies **Institutional Clarity**—a modernist aesthetic that prioritizes transparent information hierarchy, accessible navigation, and trustworthy visual language. The interface uses a clean white canvas (rgb(255, 255, 255)) paired with a confident primary blue (#007bff) and institutional green accent (#007846), creating a professional yet approachable digital presence. The emotional response is one of civic confidence: users feel empowered to engage with European policy and local activism through a straightforward, uncluttered interface.

The brand voice is direct, informative, and community-focused. Vocabulary emphasizes participation ("Mitglied werden", "mitdiskutieren"), clarity ("Wer wir sind", "Kontaktdaten"), and collective action ("Europa vor Ort gestalten"). The tone avoids corporate jargon; instead, it speaks to citizens as peers. Example sentence in brand voice: "Rund 17.000 Mitglieder in 16 Landesverbänden gestalten Europa aktiv mit—treten Sie bei."

Colors

The color system is rooted in institutional trust and civic engagement. **Primary (#007bff)** is the signature action color, applied to all CTAs ("Mitglied werden", "Jetzt mitdiskutieren"), navigation links, and focus states. It conveys authority and invites interaction. **Secondary (#6c757d)** is a neutral gray used for supporting text, disabled states, and secondary UI elements; it ensures visual hierarchy without distraction. **Tertiary (#007846)** is the institutional green from the logo, reserved for badges, success states, and brand-specific accents. **Error (#dc3545)** signals warnings and validation failures with high contrast against the white surface.

The surface stack progresses from pure white (surface: #ffffff) through subtle grays (surface-container: #e9ecef, surface-contain

Typography

The type system uses Roboto across all scales, a humanist sans-serif that balances institutional formality with approachability. **Display (56px, 700 weight, -0.02em letter-spacing)** anchors hero sections and major page titles. **Headline-lg (36px, 600 weight)** introduces content sections; **Headline-md (28px, 600 weight)** breaks up subsections. **Body-lg (18px, 400 weight, 28px line-height)** is used for introductory paragraphs and rich content; **Body-md (16px, 400 weight, 24px line-height)** is the default paragraph text, applied to the main content area. **Label-md (14px, 600 weight, 0.01em letter-spacing)** is reserved for button text, form labels, and navigation items. **Label-sm (12px, 500 weight, 0.04em letter-spacing)** is used for badges, captions, and helper text.

When small

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport. The navbar spans full-width with 8px vertical padding and white background (rgb(255, 255, 255)), containing the logo (201×60px SVG), navigation items (Startseite, Über uns, Kontakt), and a search form aligned right. The hero slider occupies full-width below the navbar with a 33.35% aspect ratio (padding-bottom: 33.352941176471%), displaying responsive images and semi-transparent text overlays.

Content sections use 24px (md spacing) for horizontal gutters and 40px (lg spacing) for vertical separation between major sections. The main content area has a max-width of 1280px with 24px side margins on mobile, expanding to 40px on tablet and desktop. Cards and content blocks use 24px internal padding (md

Elevation & Depth

Depth is achieved through subtle shadows and layering rather than color darkening. **Level 1 (Base)**: No shadow; white surface (rgb(255, 255, 255)) with 1px border at rgba(0, 0, 0, 0.1) for definition. **Level 2 (Standard Cards)**: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, dropdowns, and modals. This 3px blur with 8px spread creates a soft, readable lift. **Level 3 (Elevated/Hover)**: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), used on card-hover and modal overlays to signal interaction. The slider text overlay uses a semi-transparent white background (rgba(255, 255, 255, 0

Shapes

The shape philosophy is **Institutional Softness**—rounded corners that humanize formal structures without sacrificing clarity. **Buttons and inputs** use 0.5rem (8px) border-radius, a subtle rounding that feels modern yet professional. **Cards and containers** use 0.75rem (12px) border-radius for slightly more visual warmth. **Badges and pills** use 9999px (full) border-radius to create circular or fully-rounded shapes, signaling secondary information. **Modals and overlays** use 1rem (16px) border-radius for a more prominent, contained feel.

The rationale: sharp 0px corners feel institution

Components

Action Elements **Button-primary** (44px height, 12px 24px padding, 0.5rem border-radius, #007bff background, white text, label-md typography) is the primary CTA for membership signup, event registration, and external links. On hover, the background shifts to #0056b3 (a 20% darkening) with a 150ms ease-in-out transition. On focus, a 0.2rem rgba(0, 123, 255, 0.25) outline appears for keyboard accessibility. **Button-secondary** uses a transparent background with a 1px outline-variant border (#adb5bd), white text on hover background (#dee2e6), and the same 150ms transition. Both buttons use label-md (14px, 600 weight) for crisp, scannable text.

Containers & Surfaces **Card** (24px padding, 0.75rem border-radius, white background, 1px outline-variant border, 0 3px 8px rgba(0, 0, 0, 0

Do's and Don'ts

**Do**

• Do use primary (#007bff) exclusively for interactive elements (buttons, links, focus states) to maintain clear affordance and avoid color confusion.
• Do maintain 24px (md spacing) as the default padding and margin unit; use 12px (sm spacing) for compact layouts and 40px (lg spacing) for major section breaks.
• Do apply 0 3px 8px rgba(0, 0, 0, 0.15) shadow to cards and 0 8px 24px rgba(0, 0, 0, 0.12) to elevated states; avoid flat design or heavy shadows (>16px blur).
• Do use Roboto 16px / 400 weight / 24px line-height for body text; ensure all text meets WCAG AA contrast (4.5:1 minimum for body, 3:1 for large text).
• Do apply 0.5rem (8px) border-radius to buttons and inputs, 0.75rem (12px) to cards, and 9999px to badges; never use 0px or >2rem for standard components.

**Don't**

• Don't use secondary (#6c757d) or tertiary (#007846) for primary CTAs; reserve them for supporting text, disabled states, and brand accents only.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12) or use multiple layered shadows; excessive depth undermines the clean, institutional aesthetic.
• Don't mix font families; Roboto is the sole typeface across all scales. Avoid system fonts or serif alternatives.
• Don't use color alone to convey state (e.g., disabled buttons); always pair color changes with opacity reduction (e.g., 0.5 opacity) and cursor: not-allowed.
• Don't exceed 1280px container max-width or use asymmetric padding; maintain the 8px unit grid and 12-column layout for predictable, scalable spacing.