Design System · V2
Pfalzfeste Styleguide
Hell, viel Weißraum, professionell. Leuchtendes Violett als Akzent, Schwarz für Aktionen, Lavendel für Flächen, Pastelltöne für Kategorien. Gilt für Startseite, Listenansicht und Event-Detail.
01 · Farben
Farbsystem
Kernfarben
Lavendel-Flächen
Text & Linien
Kategorie-Pastelle — Paar Fläche + Textfarbe
02 · Typografie
Schibsted Grotesk + Hanken Grotesk
03 · Eyebrows
Eyebrows & Auszeichnungen
Für Veranstalter
Eyebrow über Sektions-Headlines · 13px · 700 · Versalien · letter-spacing 2px · Akzent-Violett
Status-Badge im Hero · weiße Pill, 1px Rahmen, grüner Live-Punkt, violetter Text
04 · Buttons & Pills
Aktionen
05 · Filter
Filter-Chips
Default: weiß, Rahmen #E7E1F4, Text #4B4458 · Aktiv: Schwarz/Weiß, 700 · Hover: Rahmen + Text violett · Zähler immer als helle Pill (#EFE9F9) · Filterleiste klebt sticky unter dem Header
06 · Cards
Karten
Event-Karte · radius 18 · Rahmen #ECE7F6 · Datum-Kachel 56px (radius 14) · Hover: hebt 3px, violetter Soft-Schatten
07 · Shadows
Schatten
Schatten sind immer weich, violett getönt und sparsam: nur für schwebende Elemente (Nav, Sidebar, Suche) und als Hover-Feedback. Ruhende Karten haben keinen Schatten — nur den 1px-Rahmen.
08 · Spacing
Abstände
- Max. Inhaltsbreite 1100–1200px, zentriert
- Seitenpadding 32px links/rechts
- Hero-Padding 88px oben / 72px unten
- Layout immer über flex/grid mit gap, keine Einzelmargins zwischen Geschwistern
09 · Empty-State
Leerzustand
Keine Events gefunden
Für „Konzert" gibt es in der Vorderpfalz gerade nichts. Versuch eine andere Kategorie.
Filter zurücksetzen11 · Tabs
Tabs
Default 15px/600 #5D5570 · Aktiv #1C1726/700 + 2.5px violette Unterkante · Hover Text dunkel · 1px Grundlinie #ECE7F6 · für Detailseite (Chips filtern Listen)
12 · Toast
Toast
Schwarze Karte radius 14, Nav-Schatten · Status-Punkt 24px (Grün/Rot) · Aktion Hell-Violett #B79CF5 · unten zentriert, verschwindet nach 4s
13 · Formulare
Formulare
10 · Accordion
Accordion
Was ist eine Kerwe?
Sind die Veranstaltungen kostenlos?
Eigenständige Karten mit 12px Abstand · radius 16 · Frage 16.5px/700 · Geöffnet #FAF8FE · 26px-Kreis-Indikator violettes +/− · Antwort 15.5px/#5D5570 · nur ein Eintrag offen
14 · Breadcrumb
Breadcrumb
14px / 600 · Links #5D5570, Hover dunkel + unterstrichen · Trenner › #A89FBE · aktuelle Seite #1C1726 nicht klickbar · max. 3 Ebenen
15 · Pagination
Pagination
Für flache Listen (Suchergebnisse) · runde 40px-Buttons · aktiv schwarz/weiß · Hover violett · Pfeile außen, inaktiv #C9C2D8 · max. 5 Seiten + Ellipse
16 · Patterns
Hintergrund-Patterns
Vier Optionen für große Flächen. Immer sehr leise (Violett 4–8 % Deckung), nie hinter Fließtext oder Karten-Grids — nur auf Hero, CTA-Band, leeren Zuständen und Footer.
17 · Prosa
Prosa & Read-more
Die Vorderpfalz – Stadt am Rhein
Zwischen Rhein und Weinstraße liegt die Vorderpfalz mit Speyer, Frankenthal und Ludwigshafen. Das Brezelfest in Speyer gilt als größtes Volksfest am Oberrhein.
- Höchste Festdichte im Juni und Juli
- Gut erreichbar über S-Bahn RheinNeckar
Zwischenüberschrift Schibsted 700/20 · Absatz 16px/lh 1.7/#4B4458 · Strong #1C1726 · Links violett 600 unterstrichen · Listen lh 1.9
Die SEO- und Infotexte unter den Listen sind standardmäßig auf etwa vier Zeilen gekürzt. Der Verlauf blendet den Text weich aus, bevor er hart abschneidet. So bleibt die Seite kompakt, ohne Inhalte zu verstecken – wer mehr wissen will, klappt mit einem Klick auf. Zusätzlicher Text, damit der Verlauf greift und der „Mehr lesen"-Button erscheint.
Gekürzter Text mit 56px Weiß-Verlauf · Button als Text-Link 15px/700 violett + Chevron · nie als Pill
18 · Divider
Divider & Month-Divider
Standard · 1px #F1EDF9 · in Listen & Karten-Füßen (padding-top 14)
Vertikal · 1px × 26px #E5DFF0 · trennt Nav-Gruppen in der Header-Pill
Sektionsgrenze · 1px #EDE5F9 (auf #F6F1FC) bzw. #F1EDF9 auf Weiß — nie dunkler
19 · Select
Select-Dropdown
Weiße Karte radius 16 + weicher Schatten · aktiv Lavendel-Fläche + violetter Text + Häkchen · Hover helle Lavendel-Fläche · Label links, Count rechts
20 · Skeleton
Skeleton-Loader
Flächen #F1EDF9 / #F6F2FB, radius 6 · Opacity-Puls 1,5s · Struktur spiegelt die echte Karte
21 · Mehr laden
„Mehr laden"
24 von 176 Veranstaltungen angezeigt
Standard für die Monatsliste: hängt Monate an, statt sie zu ersetzen · dünner Fortschrittsbalken (5px, Violett auf #F1EDF9) + Stand darüber · Button = Sekundär-Pill
22 · Event-Detail
Detail-Kit
Datum & Zeit
23 · Listen-Zeile
Event-Listenzeile
Titel 700/17 + Meta darunter · Kategorie-Pill rechts · Hover Fläche #F8F5FD · Trennlinie #F1EDF9
24 · Monatsgruppe
Month-Divider (Listenansicht)
Juli 2026
4 EventsLinke Spalte 200px, sticky beim Scrollen · Monat Schibsted 700/24 + schwarze Zähler-Pill · Spaltenabstand 32px · Monatsgruppen vertikal 48px Abstand
25 · Icons & Regeln
Iconografie & Grundregeln
Linien-Icons, stroke 1.5–1.8, abgerundete Enden · funktional violett auf Tint-Kachel (radius 10–11) · Aktionen schwarz in runden Buttons · keine Emoji
- Radii: Karten 16–18 · Kacheln 10–14 · alles Klickbare als Pill (999)
- Schatten nur als Hover-Feedback oder für schwebende Elemente (Nav, Sidebar)
- Violett nie als Fläche für Text-Hintergründe — nur Akzent
- Max. Inhaltsbreite 1100–1200px · Sektionsabstand 64–72px
- Du-Ansprache, kurz und direkt: „Erlebe die Pfalz."