Style Guide
Die verbindlichen Gestaltungsregeln der Website des Lichtenrader BC 25. Dunkel, klar, mit Vereinsgrün als einzigem Akzent.
Grundhaltung
Konsequent dunkler, moderner Auftritt. Schwarzer Hintergrund, kraeftiges Vereinsgruen als Highlight und klare, sportliche Typografie. Gruen wird nie flaechig als Hintergrund verwendet, sondern gezielt als Akzent, Rahmen, Schein oder fuer aktive Elemente.
Farben
Das Farbsystem ist bewusst schlank: Schwarz, Weiss und Vereinsgruen, ergaenzt um wenige Graustufen fuer Fliesstext.
Vereinsgruen
#0B7F1A
Buttons, Rahmen-Hover, Glow, Links, aktive Elemente
Schwarz
#000000
Seiten- und Section-Hintergrund, durchgehend
Weiss
#FFFFFF
Ueberschriften, Text auf Schwarz, Ausgangs-Rahmen
Grau (dezent)
Weiss ~72%
Einleitungen und Sekundaertext
Hintergruende & Glow
Standard ist reines Schwarz. Auf ausgewaehlten Seiten liegt ein weicher gruener Lichtschein darueber, der ueber mehrere Stufen ins Schwarz auslaeuft, ohne harte Kante.
| Grundflaeche | #000000, durchgehend |
| Glow-Form | weiche elliptische Radial-Verlaeufe |
| Deckkraft | ca. 0.14 bis 0.30, mehrstufig auf 0 auslaufend |
| Varianten | sanfter Glow / Glow nur hinter Kontaktbereich / komplett schwarz |
Typografie
Zwei Schriftrollen: eine kraeftige Ueberschriften-Schrift und eine gut lesbare Textschrift. Titelgroessen sind fuer Desktop und Mobil getrennt einstellbar.
Seitentitel (H1)
Unsere Teams
Kategorie-Ueberschrift (H2)
LBC Herren
Ueberzeile (Eyebrow)
Design-Richtlinien
Fliesstext
Gut lesbarer Textkoerper in heller Farbe auf schwarzem Grund, mit angenehmer Zeilenhoehe fuer laengere Absaetze.
Buttons
Gruen mit heller Schrift, abgerundet. Beim Ueberfahren hellt der Button leicht auf und hebt sich an. Fahr mit der Maus darueber.
Bilder, Rahmen & Hover
Rahmen im Normalzustand schwarz, beim Hover Wechsel auf Gruen mit sanftem Anheben und gruenem Schein. Fahr mit der Maus ueber die Kacheln.
Rahmen schwarz zu gruen
Anheben beim Hover
Gruener Schein
Rahmenfarbe, Hover-Farbe und Staerke sind pro Modul einstellbar.
Prinzipien
Gruen als Akzent
Gruen nie als grosse Flaeche, nur fuer Akzente, Rahmen, Glow und aktive Elemente.
Heller Text auf Schwarz
Fliesstext ist weiss oder dezentes Weiss, niemals dunkel auf dunklem Grund.
Responsiv gedacht
Titel- und Buttongroessen getrennt fuer Desktop und Mobil, Raster brechen auf eine Spalte um.
Konsistenter Hover
Rahmen schwarz zu gruen, leichtes Anheben, weicher Schein, ueberall gleich.
Klickbare Links
URLs und E-Mails im Text werden automatisch gruen und klickbar.
Foto-Schutz
Kachelbilder sind gegen Rechtsklick und Ziehen geschuetzt.