Documentation & Practice

Wenige Rollen. Eine Stimme. Null Drift.

Typografie wird ausschließlich über Rollen definiert. Komponenten definieren niemals Schriftgrößen. Body ist überall identisch, Hierarchie entsteht über Gewicht, Rhythmus und Ton.

CSS übernehmen Praxis ansehen

System

Deklaration

Rollen: t-display, t-headline, t-body, t-label. Nur zwei Leadings: Head und Body. Keine Komponenten-Overrides.

Tokens sind die einzige Quelle für Größen und Rhythmus.
Rollen sind die einzige Stelle, an der Typo definiert wird.
Modifikatoren ändern Gewicht und Ton, nicht Größe.

Rollen Preview

t-display

Display Role

t-headline

Headline Role

t-body

Body Role, überall identisch.

t-label

Label Role

Headings

H1 bis H6 ohne Größeninflation

Semantik bleibt korrekt, Darstellung bleibt ruhig. H3 ist gleich groß wie H2, aber leichter. Ab H4 keine neue Größe: Body-Size mit Gewicht.

<h1 class="t-display">...</h1>
<h2 class="t-headline">...</h2>
<h3 class="t-headline w-medium">...</h3>
<h4 class="t-body w-semibold">...</h4>
<h5 class="t-label tone-muted">...</h5>
<h6 class="t-label tone-muted">...</h6>

Preview

H1 Display

Hero-Statement, sparsam verwenden.

H2 Headline

Section Title, Standard-Pattern.

H3 Headline (leichter)

Subsection ohne neue Größe.

H4 als Body-Title

Ideal für Cards und Unterpunkte.

H5 als Label

H6 als Label

Patterns

Praxis: Artikel, Cards, Form, Tabelle

Alle Patterns nutzen exakt dieselben Rollen. Keine Sondergrößen in Komponenten. Body bleibt Body.

Artikel Pattern

Subsection im Artikel

Fließtext bleibt ruhig und konstant. Hierarchie kommt aus dem Rhythmus: Abstände, Gewichte, Ton.

Ein Body-Title

Keine neue Größe, nur Gewicht. Das hält das System geschlossen und vermeidet visuelles Rauschen.

Keine komponentenspezifischen Schriftgrößen
Nur zwei Line-Heights
Hierarchie durch Gewicht und Spacing

Card Pattern

Card Title

Card Body bleibt identisch zum restlichen Body der Seite.

Primary Secondary

Form Pattern

Tabelle Pattern

Regel	Bedeutung
No font-size in components	Typo wird nur über Rollen-Utilities definiert.
Two leadings	Head vs Body. Keine weiteren Line-Heights.
Body is baseline	Gleiche Größe überall, Hierarchie über Gewicht/Spacing.

Handoff

Implementationshinweise

Für andere Systeme: Übernimm den CORE-Block (Tokens + t-* + Modifiers). Alles darunter ist nur Demo-UI und kann ersetzt werden.

Tokens sind die einzige Stelle, um Größen global zu verändern.
Wenn du mehr Hierarchie brauchst, nutze Gewicht und Spacing, nicht neue Sizes.
Headings semantisch korrekt halten (ein H1 pro Seite).

Review Checklist

- font-size/line-height/letter-spacing nur in t-Utilities?
- Body überall t-body?
- Nur zwei Leadings?
- H1 nur einmal, Headings korrekt verschachtelt?
- Hierarchie durch weight/spacing/tone statt neue Sizes?

Wenn diese Liste grün ist, bleibt die Typo stabil, egal wie viele Module du baust.