Style Guide
Design-System & Komponenten-Referenz für Entwickler
Schriftarten
Thunder Bold
Weight 700
font-thunder-lcHamburger, Bowls & Street Food — perfekt für jedes Event.
Thunder SemiBold
Weight 600
font-thunder-lc-semiboldHamburger, Bowls & Street Food — perfekt für jedes Event.
Lato
Weight 400 / 700 / 900
font-latoProfessionelles Streetfood-Catering für Firmen, Privatfeiern und Events jeder Größe.
Typografie-Skala
H1 — Hero Headline
font-thunder-lc text-[clamp(2.5rem,6vw,5.5rem)] uppercase leading-noneHero-Headline — eine pro Seite
H2 — Section Title
font-thunder-lc text-5xl md:text-7xl uppercaseSektions-Titel
H3 — Card Title
font-thunder-lc text-4xl uppercaseCard-Titel (Pakete, Featured)
H4 — Sub-heading
font-thunder-lc-semibold text-2xl uppercaseUnter-Überschriften (Case Studies, Schritte)
H5 — Small Heading
font-thunder-lc-semibold text-lg uppercase tracking-wideKleine Überschriften (Footer-Spalten, Truck-Namen)
Body text — Professionelles Streetfood-Catering für Firmen, Privatfeiern und Events jeder Größe – in NRW und bundesweit.
font-lato text-base / text-lg leading-relaxedFließtext, Beschreibungen
Farbpalette
#FCFBFB
bg-website-warm-white
Seitenhintergrund, Card-Füllung
#e8e1da
bg-website-warm-light / bg-warm-light (CSS)
Helle Sektionshintergründe mit Papiertextur
#1a1918
text-website-shadow-grey / bg-website-shadow-grey
Text, Rahmen, dunkle Sektionen
#65ab7e
bg-website-muted-teal / text-website-muted-teal
Primär-Buttons, Akzente, Divider
#8CD0D4
bg-website-pearl-aqua / text-website-pearl-aqua
Sekundärer Akzent, Highlights
#d9627f
bg-website-vibrant-coral / text-website-vibrant-coral
CTA-Highlights, Aufmerksamkeit, Energie-Akzente
Buttons & CTAs
Auf hellem Hintergrund
Auf dunklem Hintergrund
Cards
Card Title
Standard Card mit Rahmen, abgerundeten Ecken und Hover-Schatten.
Featured Card
Mit Akzent-Badge in font-thunder-lc-semibold und muted-teal Hintergrund.
Minimal Card
Cleanes Layout mit dezentem Platzhalter.
Hintergründe & Texturen
bg-warm-light
Papiertextur + Grain-Overlay auf #e8e1da
bg-warm-white
Papiertextur + Grain-Overlay auf #FCFBFB
bg-noise bg-website-shadow-grey
Dunkler Hintergrund mit Soft-Light Papier + Grain
bg-website-muted-teal
Solider Marken-Akzent — Buttons, Badges, Divider
Abstände & Layout
Sektions-Abstände
px-6 py-28Standard Sektions-Paddingmx-auto max-w-[1440px]Content-Containermt-16Überschrift zu Inhalt Abstandgap-6 / gap-8Grid-Abstände (Cards, Swatches)Sektions-Divider
.section-divider4rem × 3px, muted-teal, zentriert unter Überschriften