Design Tokens

Alle gestalterischen Grundwerte stehen in src/styles/theme.css im @theme-Block von Tailwind 4. Jede Variable dort erzeugt automatisch die passenden Utility-Klassen: --color-brand-600 ergibt bg-brand-600, text-brand-600, border-brand-600.

Die Regel

Komponenten benutzen Token-Namen, keine Werte. Kein bg-[#1d4fd8], kein text-[15px]. Wenn ein Wert fehlt, kommt er als Token dazu — sonst entsteht wieder das Muster aus dem Altprojekt, in dem dieselbe Farbe an zwölf Stellen leicht unterschiedlich notiert war.

Woher die Werte eines Projekts kommen, beschreibt Von der Referenz zu den Tokens — der Schritt davor.

Beim Kundenprojekt werden die Werte ersetzt, die Namen bleiben. Deshalb muss keine einzige Komponente angefasst werden, wenn sich die Marke ändert.

Farben

Gruppe	Tokens	Verwendung
Marke	brand-50 … brand-950	Flächen, Akzente, Links
Flächen	surface, surface-muted, surface-inverse	Seitenhintergrund, Abschnitte
Text	ink, ink-muted, ink-inverse	Fließtext, Sekundärtext
Linien	border, border-strong	Trenner, Rahmen
Fokus	focus	Fokusring
Platzhalter	ink-placeholder	Platzhalter, deaktivierte Felder
Zustände	state-success, state-warning, state-error	Text und Symbole für Erfolg, Warnung, Fehler
Zustandsflächen	success-surface/-border, warning-*, error-*	Hinweisboxen, Fehlerübersicht, Badges

brand-600 ist der Standardwert für interaktive Flächen, brand-700 der Hover-Zustand. Beide erfüllen gegen Weiß das WCAG-AA-Verhältnis von 4,5:1.

Beim Austausch der Palette

Der Kontrast ist keine Nebensache, sondern eine Zusage. Die axe-Prüfung im Styleguide schlägt fehl, wenn eine neue Palette darunterfällt — das ist beabsichtigt.

Für Text und Flächen gelten die semantischen Namen, nicht brand-* direkt. Ein späterer Dark Mode ist dann eine Änderung an einer Stelle statt an jeder Komponente.

Die Zustandsfarben sind eigene Tokens, keine Werte aus Tailwinds Standardpalette. Sonst erreicht ein Palettentausch die Formularfehler nicht, und ein Projekt mit roter Marke zeigt Fehlermeldungen in der Markenfarbe. Die state-*-Werte erreichen gegen Weiß 4,5:1 und tragen Text; die *-surface- und *-border-Werte sind die getönten Flächen darunter.

Typografie

Die Überschriftengrößen skalieren fließend über clamp() zwischen 360 px und 1280 px Viewport-Breite. Das erspart je Überschrift einen Satz Breakpoint-Utilities.

Token	Einsatz
text-display	Seitentitel, Hero
text-title	Abschnittsüberschrift
text-subtitle	Karten- und Unterüberschrift
text-lead	einleitender Absatz

Darunter gilt Tailwinds Standardskala (text-base, text-sm, …).

Maße

Token	Wert	Einsatz
--container-content	45rem	Lesebreite für Fließtext
--container-page	80rem	äußere Seitenbreite
--radius-card	0.75rem	Karten, Dialoge
--radius-control	0.5rem	Schaltflächen, Eingabefelder
--shadow-card	—	ruhende Karten
--shadow-raised	—	angehobene, verlinkte Karten

Die Abstandsskala bleibt Tailwinds Standard (--spacing, Basis 0.25rem).

Schriften

Die Schriften stehen in src/lib/fonts.ts und laufen über die Astro-Fonts-API mit dem Fontsource-Provider. Die Dateien werden zur Bauzeit geladen und selbst ausgeliefert. Damit gibt es zur Laufzeit keine Anfrage an einen Google-Server — das wäre ohne Einwilligung auch gar nicht zulässig. Der End-to-End-Test „fragt nichts bei Dritten an" prüft das.

CSS-Variable	Familie (Platzhalter)	Verwendung
--font-body	Inter	Fließtext, UI
--font-display	Lora	Überschriften

Angesprochen werden sie über font-sans und font-heading — nie über die Variablen direkt.

Höchstens zwei Familien. Das ist kein Stilhinweis, sondern ein Budget: Jede weitere Familie kostet eine Datei auf dem kritischen Pfad. checkFontBudget() bricht den Build ab, wenn eine dritte hinzukommt oder eine Familie ohne display: swap lädt.

Ausgetauscht wird an einer Stelle:

// src/lib/fonts.ts
export const fontFamilies: FontFamilies = [
  {
    provider: fontProviders.fontsource(),
    // Name genau so, wie ihn Fontsource führt.
    name: 'Source Sans 3',
    cssVariable: '--font-body',
    weights: [400, 500, 700],
    styles: ['normal'],
    // latin-ext deckt die deutschen Sonderzeichen ab.
    subsets: ['latin', 'latin-ext'],
    display: 'swap',
  },
];

Nur der Fließtext-Font wird vorgeladen (<Font … preload /> im BaseLayout). Für die Überschriftenschrift erzeugt Astro einen metrisch angepassten Fallback, sodass beim Nachladen kein Umbruch springt.