Styleguide

Lebende Referenz

Diese Seite nutzt dieselben CSS-Klassen und Farb-/Type-Tokens wie der Rest der Website — was hier zu sehen ist, ist exakt das, was live läuft, nicht eine separate Beschreibung davon. Wenn etwas hier fehlt, das für eine neue Seite gebraucht wird, ist das die Stelle, an der es ergänzt wird.

Farbe

Marke & Neutrale

Akzent#FF6E28
Schwarz#000000
Ink 500#5A5A5A
Ink 200#D6D6D6
Ink 050#F6F5F3
Weiß#FFFFFF

Orange ist die einzige chromatische Farbe im gesamten UI. Schwarz/Weiß trägt alles andere. Sunset-Gradient nur im Hero, siehe unten.

Typografie

Eine Stimme, GROSSGESCHRIEBEN für Headings

Cormorant Garamond (Display) + EB Garamond (Fließtext) + IBM Plex Mono (Daten/UI). Headings, Nav, Labels und Buttons stehen immer in Großbuchstaben mit weiter Laufweite — Fließtext bleibt normal gesetzt.

Display 1 · 72px777
Display 2 · 56px (H1)Six-Star
Display 3 · 40px (H2)

Aktuelles Ziel

Display 4 · 30px (H3)

Kapstadt Marathon

Eyebrow · 12pxAktuelles Ziel
Body-lg · 18px

Pläne können scheitern, die Leidenschaft fürs Laufen nicht.

Body · 16px

Fließtext für Fußnoten und dichtere Absätze.

Mono / Daten · 14px3:35:55 · BERLIN MARATHON · PB
  • Genau ein H1 pro Seite — der Seitentitel, über .page-head h1 (56px). Auf Home ist das der Hero-Claim, auf allen anderen Seiten der Grav-Seitentitel (page.title).
  • H2 — Section-Überschriften innerhalb der Seite (40px, .section-head h2). H3 — Karten-/Tabellentitel innerhalb einer Section (30px).
Radius & Abstand

Eckig, außer Status & Icons

  • 0px — Buttons, Karten, Tabellen. Aktionsflächen sind eckig.
  • 3px — Pills/Status-Badges. Leicht gerundet, nie ein Kreis.
  • 50% — nur Icon-Buttons (Social, Scroll-Top). Die einzige runde Form im UI.
  • Spacing — 4px-Basis (siehe --space-1 bis --space-24 in theme.css), Sektionen durch Weißraum getrennt, nicht durch Linien.
  • Navigation — sticky, bleibt beim Scrollen fixiert oben (position: sticky), feste Höhe --nav-h.
  • Mobile-Breakpoint — ab 960px Breite klappen die 7 Nav-Punkte zu einem Burger-Menü zusammen (reiner CSS-Checkbox-Trick, kein JavaScript). Menü öffnet als volle Breite unterhalb der Navbar.
  • Footer — vierspaltig (Kategorien, Information, Rechtshinweise, Social Links als Icons), darunter eine schmale Copyright-Zeile mit Styleguide-Link. Bricht unter 700px auf zwei Spalten.
  • Hero-Video — Home-Hero zeigt das Original-Video (777_jogger.mp4, stumm, Endlosschleife, keine Bedienelemente) statt einer reinen Farbverlauf-Näherung. Ausschnitt object-position: center 35%, orientiert am Original-Standbild. Fällt auf den Sunset-Gradient zurück, falls das Video nicht lädt.
Logo

Nur noch das Zeichen

Seit September 2026 tritt die Marke ohne Wortmarke oder Zusatzzeile auf — nur die drei Schrägstriche, in drei Farbvarianten für unterschiedliche Grundflächen.

Zeichen, weiß
Zeichen, orange
Zeichen, schwarz

Freigegebene Farbkombinationen (Zeichen auf Vollfläche):

Weiß auf Schwarz Orange auf Schwarz Weiß auf Orange Schwarz auf Weiß Orange auf Weiß
Module

Pill, Karte, Tabelle

Im Plan Angepasst 3 / 7 Kontinente
Im Plan

Kapstadt Marathon

23.05.2027 · Zielzeit 3:29:00

DatumMarathonZeit
26.09.2021Berlin3:35:55
09.10.2022Chicago3:42:38
Interaktive Module: Buttons

Primary, Outline, Icon & Größen

Alle Buttons teilen die Basisklasse .btn (eckig, IBM Plex Mono, Großbuchstaben) und heben beim Hover leicht ab (Verschiebung nach oben + Schatten). Outline-Varianten färben sich beim Hover zusätzlich ein.

Primary Button Outline Button Outline Small
  • .btn.btn-primary — gefüllter Haupt-CTA in Akzentfarbe. Einsatz: max. 1× pro Section, z. B. Hero-CTA.
  • .btn.btn-outline.on-light — sekundärer CTA auf hellem Grund, umrandet, füllt sich beim Hover in Ink ein. Einsatz: Karten-/Kachel-Links.
  • .btn.btn-outline (ohne .on-light) — dieselbe Outline-Variante auf dunklem Grund, Akzentfarbe statt Ink.
  • .btn-sm — Größen-Modifier für Buttons innerhalb von Karten/Kacheln (kompakteres Padding & kleinere Schrift). Immer zusätzlich zu einer Farbvariante, nie allein.
  • .icon-btn — runde Icon-Buttons (Social-Links in Footer/Kontakt), einzige Kreisform im UI. Hover dimmt auf 70% Deckkraft statt Farbwechsel.
  • Kachel-Regel — CTA-Buttons in einer Karten-Reihe (.teaser-row .card) sitzen per Flexbox immer am unteren Kartenrand, unabhängig von der Textlänge.
Interaktive Module: Weitere

Noch in Arbeit

Werden ergänzt, sobald sie auf der Website zum Einsatz kommen.

  • Dropdown-Menü In Arbeit
  • Tab-Navigation / -Anzeige In Arbeit
  • Akkordion In Arbeit
Bildsprache

Echte Rennfotos, kein Stock

Berlin Marathon 2021 Porträt Hero-Filmstill
  • Warmes, ungefiltertes Licht, echte Rennsituationen — kein Beschnitt zu Kreisen, keine Duotone-Filter.
  • Schutz von Text über Fotos immer über einen vollflächigen dunklen Verlauf (--gradient-scrim), nie über eine Box hinter dem Text.
Ton & Sprache

Ich-Perspektive, keine Floskeln

  • Erste Person Singular, direkt. Kein „wir", keine Marketing-Adjektive, keine Ausrufezeichen außer bei echten News.
  • Keine Emoji. Rückschläge werden nüchtern benannt, nicht schöngeredet.
  • Zahlen tragen die Aussage — nicht runden, deutsches Zahlenformat (Komma/Punkt).
  • „Mehr erfahren"-Links als literales >>, kein Pfeil-Icon.