Bildbereich
Projekt-Karte
Karten mit Bild-Header, blauem Titel-Overlay und rotem Link-Text — Standard für Projekt-Übersichten.
Projekt ansehen →Brand System
Branding & Design-System
Übersicht aller visuellen Elemente der Bürgerstiftung Für Korschenbroich: Farbpalette, Typografie, Buttons und Komponenten — abgestimmt auf das Mockup und konsistent über die gesamte Website verwendet.
Farbpalette
Primary (Slate)
#0f172a
--color-stiftung-primary
Header, Footer, Top-Bar, Überschriften
Secondary (Blue)
#1e3b8b
--color-stiftung-secondary
Badges, Buttons, Akzente, Links
Accent (Red)
#b81c1d
--color-stiftung-accent
Trennlinien, Check-Icons, CTA Spenden
Background
#f8fafc
--color-stiftung-bg
Seitenhintergrund, Karten-Sektionen
Text
#1f2937
--color-stiftung-text
Fließtext, Navigation
Typografie
Schriftfamilie Inter. Alle Überschriften und der Body-Text skalieren responsiv via clamp() — keine festen Pixelwerte, fließende Anpassung zwischen Mobil und Desktop.
H1
Hauptüberschrift
Wir stärken die Gesellschaft.
clamp(2.25rem, 1.6rem + 3.2vw, 4.5rem)H2
Sektion
Der Stiftungszweck
clamp(1.875rem, 1.4rem + 2.2vw, 3rem)H3
Karten-Titel
Bürgerbäume
clamp(1.5rem, 1.25rem + 1.2vw, 2rem)H4
Unter-Titel
Unsere 10 Förderbereiche
clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem)H5
Klein
Seniorenhilfe
clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem)H6
Mini
Hinweis
clamp(1rem, 0.95rem + 0.25vw, 1.125rem)Body
Fließtext
Zweck der Bürgerstiftung ist die nachhaltige Stärkung des gesellschaftlichen Miteinanders in Korschenbroich.
clamp(1rem, 0.95rem + 0.25vw, 1.125rem)Body Small
Kleinere Fließtexte, Labels, Meta-Infos
Zweck der Bürgerstiftung ist die nachhaltige Stärkung des gesellschaftlichen Miteinanders in Korschenbroich.
clamp(0.875rem, 0.82rem + 0.25vw, 1rem)Buttons
Karten
Info-Karte
Helle Hintergrund-Karte mit dezenter Ecken-Dekoration — für Listen, Förderbereiche und sekundäre Inhalte.
Logo
