Styleguide

Styleguide / Template

Alle Bausteine der Seite an einem Ort — hier kannst du Farben, Fonts und Abstände in public/css/style.css anpassen, es wirkt sich automatisch auf alle echten Seiten aus.

Typografie

Jede Zeile in echter Größe, Schriftschnitt und Farbe, so wie sie auch auf den echten Seiten erscheint. Drei klar unterscheidbare Ebenen: Logo (2,5rem) im Header, Seitentitel (2,1rem) und Abschnittstitel (1,4rem) darunter.

Logo / Wordmark .wordmark .name — Roboto 300 · 2,5rem

Seitentitel

Seitentitel (H2) h2 — Roboto 300 · 2,1rem

Abschnittstitel

Abschnittstitel (H3) h3 — Roboto 400 · 1,4rem

Fließtext im Hero-Bereich, direkt auf Blau — etwas gedämpfte Tinte statt reinem Schwarz.

Hero-Text .hero p — Inter 400 · 1,02rem

Erklärender Hinweistext unter einer Abschnittsüberschrift, kursiv.

Section-Note .section-note — Inter 400 · .92rem, kursiv

RS / D6 / N07 / R004 / G3of3 / C01

H2 als Kennungs-Badge .hero .detail-code-badge h2 — Roboto 500 · .95rem

Systemkarten-Titel

Card H3 .sys-card h3 — Roboto 300 · 1,1rem

Normaler Fließtext innerhalb einer Karte.

Karten-Text .card p — Inter 400 · 1rem

Kleinerer Beschreibungstext, z. B. unter einem Kartentitel.

Meta-Text .sys-card .meta — Inter 400 · .85rem

RS / D6 / N12 / R015 / G3of3 / C01

Kennung / Code .sys-id — .95rem, Blau

Beispiel

Eyebrow-Label .example-tag — .65rem, Versalien, fett

Favorit Gekauft Buch

Status-Pill .pill — .75rem, fett, abgerundet

Nebensächliche Angabe

Muted .muted — .85rem, Grau

Fehlermeldung

Error .error — fett, Rot

Buttons

Call to Action

Card

Ein einfacher Inhaltsblock — wird für Erklärtexte, Info-Boxen etc. benutzt.

Beispiel: Systemkarten

So könnten Einträge aus dem Buch auf der Seite aussehen.

RS / D6 / N15 / R025 / G3of4 / C001

6 aus 15 — 3er-Garantie

Zwei-Pool-Architektur (G3+G4), 25 Reihen, garantiert mindestens 3 Richtige bei 4 gezogenen Zahlen im Pool.

RS / D6 / N16 / R029 / G3of4 / C002

6 aus 16 — 3er-Garantie

Erweiterung auf N=16, 29 Reihen, gleiche Garantiestufe wie C001.

Kontrast im Griff — die vier Rollen

Nur der erste Fall ist wirklich zu vermeiden.

Vermeiden Ihre Lottosysteme Grauer Text direkt auf Blau — kaum noch zu erkennen.

Grau auf Blau1,6 : 1

Headline auf Blau Ihre Lottosysteme Creme statt Weiß — warm, groß, fett gesetzt.

Creme auf Blau2,9 : 1

Headline auf Creme Ihre Lottosysteme Blau statt Schwarz — für Kennungen & Kartenüberschriften.

Blau auf Creme2,9 : 1

Fließtext & Grau Ihre Lottosysteme Schwarz und Grau zusammen — nur hier ist auch Grau zu Hause.

Grau auf Creme4,6 : 1

Die vier Farben, mit Rolle

Blau — Seitenhintergrund & Headline auf Creme

#519cbd

Creme — Karten & Headline auf Blau

#fffad9

Tinte — Haupttext

#000000

Grau — Nebentext (nur auf Creme)

#727272

Formular

Tabelle

1	1, 2, 3, 4, 5, 6
2	7, 8, 9, 10, 11, 12

Liste (z. B. Dashboard)

Beispiel-Eintrag 2026-01-01