Styleguide

Alle Werte auf dieser Seite werden beim Bauen aus den Design-Tokens berechnet. Wenn eine Farbe geändert wird, ändert sich diese Übersicht automatisch mit.

Farben

Geprüfte Kontraste

Alle eingesetzten Kombinationen erfüllen die jeweilige WCAG-AA-Schwelle.

Beispiel Kombination Verwendung Anforderung Wert
Beispiel --ink auf --bg Fließtext auf Seitenhintergrund Fließtext, mind. 4,5:1 13.25:1 AAA
Beispiel --ink auf --bg-alt Fließtext auf Sektionsfläche Fließtext, mind. 4,5:1 12.19:1 AAA
Beispiel --ink auf --surface Fließtext auf weißer Karte Fließtext, mind. 4,5:1 14.83:1 AAA
Beispiel --ink-muted auf --bg Meta-Angaben, Preisstand Fließtext, mind. 4,5:1 7.07:1 AAA
Beispiel --ink-muted auf --bg-alt Meta-Angaben auf Sektionsfläche Fließtext, mind. 4,5:1 6.50:1 AA
Beispiel --green-700 auf --bg Überschriften H2 bis H4 Fließtext, mind. 4,5:1 6.83:1 AA
Beispiel --green-700 auf --bg-alt Überschriften auf Sektionsfläche Fließtext, mind. 4,5:1 6.28:1 AA
Beispiel --green-600 auf --bg Sekundäre Links, Brotkrumen Fließtext, mind. 4,5:1 5.20:1 AA
Beispiel --green-600 auf --bg-alt Sekundäre Links auf Sektionsfläche Fließtext, mind. 4,5:1 4.78:1 AA
Beispiel --green-500 auf --bg Rahmen, Trennlinien, Icons UI-Element, mind. 3:1 3.63:1 AA
Beispiel --green-500 auf --bg-alt Rahmen auf Sektionsfläche UI-Element, mind. 3:1 3.34:1 AA
Beispiel --red-logo auf --bg Wortmarke und H1 (ab 24px) Großschrift, mind. 3:1 4.33:1 AA
Beispiel --red-logo auf --bg-alt Wortmarke auf Sektionsfläche Großschrift, mind. 3:1 3.98:1 AA
Beispiel --red-action auf --bg Links und kleine Schrift Fließtext, mind. 4,5:1 5.26:1 AA
Beispiel --red-action auf --bg-alt Links auf Sektionsfläche Fließtext, mind. 4,5:1 4.84:1 AA
Beispiel --red-action auf --surface Links auf weißer Karte Fließtext, mind. 4,5:1 5.88:1 AA
Beispiel --red-action-hover auf --bg Link im Hover-Zustand Fließtext, mind. 4,5:1 6.78:1 AA
Beispiel --surface auf --red-action Weiße Schrift auf rotem Button Fließtext, mind. 4,5:1 5.88:1 AA
Beispiel --surface auf --red-action-hover Roter Button im Hover Fließtext, mind. 4,5:1 7.59:1 AAA
Beispiel --surface auf --green-700 Weiße Schrift auf dunkelgrün Fließtext, mind. 4,5:1 7.64:1 AAA
Beispiel --bg auf --green-700 Heller Text in der Fußzeile Fließtext, mind. 4,5:1 6.83:1 AA
Beispiel --ink auf --bg Fokusring auf hellem Grund UI-Element, mind. 3:1 13.25:1 AAA
Beispiel --bg auf --green-700 Fokusring in dunklen Sektionen UI-Element, mind. 3:1 6.83:1 AA

Wortmarke

Echte SVG-Pfade aus Archivo, keine Textelemente. Sie sieht damit unabhängig von geladenen Schriften überall gleich aus.

Typografie

H1 in Archivo, 800

H2 — Überschrift zweiter Ebene

H3 — Überschrift dritter Ebene

Fließtext in Inter. Ein XXL-Adventskalender misst typischerweise zwischen 80 und 150 Zentimetern in der Höhe. Die Türchen fassen je nach Modell Kleinigkeiten bis zur Größe einer Streichholzschachtel oder auch Päckchen von mehreren Zentimetern Kantenlänge.

Ein Link im Fließtext ist immer unterstrichen, damit er auch ohne Farbwahrnehmung erkennbar bleibt.

Meta-Angabe in gedämpfter Farbe, etwa: Preis 49,99 Euro, Stand: 12.08.2026.

Buttons

Zum Anbieter Alle Kalender Merken

Mit der Tabulatortaste durchgehen, um die Fokusringe zu prüfen. Der Ring liegt jeweils auf der Fläche neben dem Element, nicht darauf.

Hinweisbox für Provisionslinks

Mit * markierte Links sind Provisionslinks. Wenn du darüber bestellst, erhalten wir eine Provision vom Händler. Für dich ändert sich der Preis dadurch nicht.