Foundation

Tokens & System

Was Tokens sind, warum oklch, wie Tailwind v4 sie nutzt — und wie du dein eigenes Theme darüber baust.

Was ist ein Token?

Ein Token ist ein Name für einen Wert. Statt color: #2553a6 schreibst du color: var(--color-brand-primary). Der Name ist die Verbindung zwischen Code, Figma, Doku und CMS — alle reden über dieselbe Sache.

--color-brand-primary

Hauptfarbe, für CTAs, Links, Brand-Akzente.

--color-brand-success

Bestätigung, Erfolg, "alles gut".

--color-brand-destructive

Fehler, Löschen, kritisch.

Warum oklch?

Klassisch: HSL — aber HSL ist nicht perceptual uniform. Erhoehst du die Lightness um 10%, sieht's je nach Hue mal mehr, mal weniger hell aus. oklch repariert das: ein Lightness-Schritt ist visuell immer gleich gross, in jedem Hue.

HSL — drei Hues bei gleicher Lightness

Die mittlere wirkt deutlich heller.

OKLCH — drei Hues bei gleicher Lightness

Visuell gleich hell.

Praktischer Effekt: oklch(from var(--color-brand-primary) 50% c h) liefert eine vorhersagbare Helligkeitsstufe. Das ermöglicht relative Farboperationen in CSS — Hover-States, Tints, Shades aus einer Basis-Farbe ableiten.

Spacing-Skala

Nicht "16px hier, 18px da". Stattdessen 6 Stufen, semantisch benannt. Die Werte sind clamp(...)-fluid — sie werden auf großen Screens größer, auf kleinen kleiner, ohne dass du dich darum kümmern musst.

xs

sm

md

lg

xl

2xl

Typografie-Skala

Headline H1--text-h1

Headline H2--text-h2

Headline H3--text-h3

Paragraph (large)--text-paragraph-large

Paragraph (default)--text-paragraph

Caption / Hint--text-caption

Tailwind v4 + Tokens

In v4 ist das Theme nicht mehr tailwind.config.js — sondern @theme in der CSS. Die Tokens kommen direkt als CSS-Variablen und sind sowohl als Tailwind-Klassen als auch als var(--…) nutzbar.

/* @theme in globals.css */
@theme {
  --color-brand-primary: var(--color-blue-600);
  --color-brand-success: var(--color-emerald-600);

  --spacing-space-md: clamp(1rem, 2vw, 1.5rem);
  --text-h1: clamp(2rem, 4vw, 2.8rem);
}

/* Verwendung */
.btn { background: var(--color-brand-primary); }
<button class="bg-brand-primary p-md text-h1">…</button>

Eigenes Theme — Brand-Override-Pattern

Für ein Kundenprojekt überschreibst du nur die Tokens, nicht die Components. Eine eigene brand.css, die nach globals.css geladen wird, kippt das ganze System auf das Kunden-Branding um — ohne Component-Änderung.

/* brand-stadtwerke.css — projektspezifisch */
@theme {
  --color-brand-primary: var(--color-emerald-600);  /* Grün statt Blau */
  --color-brand-secondary: var(--color-amber-500);
  --radius-md: 0.25rem;                              /* Eckiger */
}

Damit sind Hero, Card, Button, Tag — alles — automatisch im neuen Branding. Jede neue Component, die Tokens benutzt, ist sofort kompatibel.