Color-Tokens

Atlas-Tokens als HSL-Variablen mit Light/Dark-Switch. Klick auf Swatch kopiert die HSL-Notation. Die Werte ändern sich beim Theme-Toggle live — das hier ist die Single Source of Truth.

Atlas Spec

Verwendung in Code

Tokens werden in Tailwind v4 als CSS-Variablen exponiert. Nutze die Tailwind-Utility-Klassen, nicht die Variablen direkt.

component.tsxtsx

<div className="bg-card text-card-foreground border">
  <h3 className="text-foreground">Titel</h3>
  <p className="text-muted-foreground">Subtext</p>
  <button className="bg-primary text-primary-foreground">
    Aktion
  </button>
</div>

WCAG-Anpassungen

--primary auf 35% lightness (statt 40% CD-Original) — 5.35:1 Kontrast gegen --primary-foreground. Optisch fast identisch zu #0072CE.
--muted-foreground auf 38% lightness — 7.0:1 gegen white (AAA). Erlaubt /70-Opacity-Varianten ohne axe-Fehler.