Beispielinhalt – Demo der Plattform PatriotConnect. Personen, Orte und Inhalte der „AfD Musterstadt“ sind frei erfunden.
Alle Module · Templates · Gestaltung · Plattform · Handbuch · Kontakt aufnehmen
Hell- oder Dunkel-Ansicht: Schalter oben in der Kopfleiste. Formulare laufen im Demo-Modus – es werden keine Daten übertragen.
Gestaltung
Schriften, Farben, Buttons, Badges, Karten, Formularelemente – hell und dunkel
Schriften
Zwei Schriften, beide vom eigenen Server ausgeliefert (keine Verbindung zu Google): Bitter für Überschriften (Token --font-title) und Barlow für Fließtext und Bedienelemente (--font-sans). Die Größen folgen einer festen Skala von 12 bis 60 Pixel.
Titelschrift · Bitter
Musterstadt
Überschrift Ebene 2
Überschrift Ebene 3
Textschrift · Barlow
Fließtext groß (18 px) für Einleitungen.
Fließtext (16 px) mit fetter und kursiver Auszeichnung sowie einem Link.
Kleintext (14 px) für Metadaten und Hinweise.
- text-6xlGemeinsam für Musterstadt
- text-5xlGemeinsam für Musterstadt
- text-4xlGemeinsam für Musterstadt
- text-3xlGemeinsam für Musterstadt
- text-2xlGemeinsam für Musterstadt
- text-xlGemeinsam für Musterstadt
- text-lgGemeinsam für Musterstadt
- text-baseGemeinsam für Musterstadt
- text-smGemeinsam für Musterstadt
- text-xsGemeinsam für Musterstadt
Farben und Tokens
Alle Farben sind Design-Tokens (CSS-Variablen). Jede Gliederung setzt im Parteimanager nur Marken- und Akzentfarbe sowie Logos; die Plattform leitet daraus die übrigen Töne ab und prüft die Kontraste nach WCAG 2.1 AA.
Markenfarbe
Aus dem Theme der Gliederung (Feld „Markenfarbe“). Buttons, Links, Verläufe, Kopfleiste.
- brand-50
- brand-100
- brand-200
- brand-300
- brand-400
- brand-500
- brand-600
- brand-700
- brand-800
- brand-900
Aktionsfarbe
Feld „Akzentfarbe“: Handlungsaufrufe (Mitglied werden, Spenden), Termin-Daten, Hinweise.
- cta-50
- cta-100
- cta-200
- cta-300
- cta-400
- cta-500
- cta-600
- cta-700
- cta-800
- cta-900
Neutral
Grauskala für Text und Flächen. Im Dunkelmodus kehrt sie sich um – Kontraste bleiben erhalten.
- neutral-50
- neutral-100
- neutral-200
- neutral-300
- neutral-400
- neutral-500
- neutral-600
- neutral-700
- neutral-800
- neutral-900
Flächen
Hintergründe der Abschnitte (Weiß, Grau, dunkler Marken-Ton).
- section-white
- section-gray
- section-dark
Radien und Schatten
- --radius-card · --shadow-card
- --radius-badge
Buttons
Acht Varianten in drei Größen. „Primär“ für die Hauptaktion, „Aktion“ (rot) für Handlungsaufrufe, „Hell“ auf dunklen Flächen. Alle Buttons haben einen sichtbaren Tastaturfokus.
| Variante | Größe sm | Größe md | Größe lg |
|---|---|---|---|
| primary | |||
| cta | |||
| outline | |||
| outline-cta | |||
| secondary | |||
| ghost | |||
| link |
Variante „light“ auf dunklem Verlauf:
Badges und Hinweise
Badges kennzeichnen Kategorien, Status und Inhaltstypen; Hinweise melden Ergebnisse von Aktionen.
- default
- cta
- secondary
- outline
- success
- warning
- danger
Karten
Die Karten-Grundform trägt Termine, Meldungen, Personen und Büros – mit Bildbereich, Inhalt und Fußzeile.
- Neuigkeit
Karte ohne Bild
Fehlt ein Titelbild, rückt der Text nach oben.
Einfache Karte
Rahmen, Radius und Schatten aus den Tokens.
Formularelemente
Beschriftete Felder mit Pflichtfeld-Kennzeichnung und Hilfetext. Dieses Formular ist nur ein Muster und sendet nichts ab.
Tabellen
Tabellen mit Kopfzeile für Sprechzeiten, Abstimmungsergebnisse oder Gremien.
| Tag | Uhrzeit | Hinweis |
|---|---|---|
| Montag | 10–13 Uhr | Beispielwert |
| Mittwoch | 14–18 Uhr | Beispielwert |
Abschnitte und Verläufe
Jeder Block sitzt in einem Abschnitt mit einem dieser Hintergründe.
Abschnitt „white“
Abschnitt „gray“
Abschnitt „dark“
Abschnitt „gradient-blue“
Abschnitt „gradient-red“
Abschnitt „gradient-dark“
Abschnitt „gradient-de“
Hell und Dunkel
Jede Website folgt der Einstellung des Geräts und lässt sich über den Schalter in der Kopfleiste umstellen. Die Wahl bleibt im Browser gespeichert (Eintrag „pc-theme“, kein Cookie). Im Dunkelmodus kehren sich Neutral- und Flächenfarben um; Marke und Flaggenfarben bleiben.