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.
Logo

Zwei Lockups

Wortmarke, weiß
Hero-Lockup, orange

Achtung: Der Hero-Lockup trägt noch die alte Zeile „7 Jahre/7 Kontinente/7 Marathons" eingebrannt in die Grafik — im Hero wird deshalb aktuell die schlichte Wortmarke verwendet, bis eine neue Version vorliegt.

Module

Button, Pill, Karte, Tabelle

Primary Button Outline Button 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
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.