Collective Design und UI-System

Diese Seite beschreibt nicht nur Farben, sondern das gesamte Collective Design der Kampagne: visülle Hierarchie, Interaktionslogik, Textführung und Vertraünsaufbau. Das Design soll kollektiv anschlussfähig sein: klar für Erstleser:innen, robust für redaktionelle Mitarbeit und konsistent für Partnerkommunikation.

Theme-Architektur: Was das Layout bewusst leistet

Seitenhintergrund mit weichem Verlauf: #FAFAF7 zu #F1F8E9 beruhigt lange Leseflächen und reduziert harte Kontrastkanten.
Transparente Sticky-Topbar: Der halbtransparente Header mit Blur hält Navigation sichtbar, ohne den Inhalt visüll zu blockieren.
Priorisierte Navigation: 4 direkte Aktionen (Petition, Offener Brief, Hintergrund, FAQ) plus “Mehr” für Sekundärpfade.
Karten- und Rasterlogik: Inhalt wird in modularen Blöcken präsentiert, damit Team-Updates schnell austauschbar bleiben.
Konseqünte CTA-Logik: Der primäre Petition-Button ist farblich und semantisch als dringlichste Aktion markiert.

Palette als System (Tabelle)

Farbwert	Beschreibung	Zweck	Beispielanwendung
`#F9A825`	Urgency	Dringlichkeit und Aktivierung	Primärer CTA „Petition unterschreiben“
`#1B5E20`	Primary Green	Markenkonsistenz	Buttons, Linkfokus, Headlines
`#2E7D32`	Primary Light	Interaktionsfeedback	Hover- und Aktivzustände
`#66BB6A`	Accent Green	Positive Markierung	Statusmarker, visülle Mikrostruktur
`#102027`	Dark Text	Lesbarkeit und Kontrast	Fliesstext, Navigationsschrift
`#F1F8E9`	Light Background	Sanfte Informationsflächen	Hero-/Kontextboxen
`#FAFAF7`	Neutral Background	Ruhige Grundfläche	Seitencanvas und Topbar-Basis

Examples (Color-name: Application)

Urgency: Hintergrund des primären CTA
Die dringlichste Handlung (Petition) wird durch #F9A825 priorisiert und sofort sichtbar gemacht.
Primary Green: Hintergrund von Buttons
Standard-CTA und wiederkehrende Handlungslinks nutzen #1B5E20 für Markenstabilität.
Primary Light: Hover-/Aktiv-Zustände
#2E7D32 zeigt Interaktion ohne Bruch im Farbsystem.
Light Background: Hintergrund von Kontextboxen
#F1F8E9 rahmt erklärende Inhalte sanft und reduziert visülle Härte.
Neutral Background: Seitenbasis für lange Texte
#FAFAF7 stabilisiert die Lesefläche und verhindert grelles Vollweiss.
Dark Text: Lesetext und Headline-Kontrast
#102027 sorgt für belastbaren Kontrast in langen Abschnitten.
Accent Green: Positive Marker
#66BB6A eignet sich für Statusindikatoren, Mikroakzente und supportive Hinweise.
Gradient Background: Stimmungs- und Tiefenebene
Der Grundverlauf schafft einen ruhigen Hintergrundteppich, damit CTA und Inhaltskarten klar hervorstehen.

UI-Beispiele im Einsatz

Urgency: Petition-Button

Hauptaktion für Mobilisierung.

Petition unterschreiben

Primary Green: Sekundärer CTA

Vertiefung für inhaltlich interessierte Nutzer:innen.

Offenen Brief lesen

Light Background: Kontextbox

Fläche für Einordnung, Zahlen oder Kurzupdates.

Topbar-Pattern

Direkte Kernpfade + kompaktes “Mehr” für Sekundär- und Rechtstexte.

Palette-Grafik (Referenz)

Die Grafik steht bewusst am Ende: Erst wird die Anwendung im echten UI erklärt, dann folgt die visülle Referenz zur Abstimmung im Team.