Ein Farbsystem für Ihr Design-System aufbauen

Ad-hoc-Farbentscheidungen häufen sich zu Chaos an. Ein Marken-Blau als #3B82F6 in einer Komponente, als #2563EB in einer anderen und als rgba(59, 130, 246, 0.8) in einer dritten – alles angeblich dasselbe Blau – erzeugt visuelle Inkonsistenz, die die Markenkohärenz untergräbt, Dark Mode zuverlässig unmöglich macht und jede Farbänderung zu einem Archäologieprojekt in der Codebasis werden lässt.

Ein Farbsystem löst dies, indem es eine einzige Quelle der Wahrheit für jede Farbe in Ihrer Benutzeroberfläche etabliert, gegliedert in zwei Ebenen: eine primitive Palette aller verfügbaren Farbwerte und eine semantische Token-Ebene, die diese Primitiven ihren vorgesehenen Rollen zuordnet. Diese Trennung macht es möglich, Dark Mode, High-Contrast-Modus und Marken-Reskins durch Änderung semantischer Token-Zuweisungen umzusetzen – ohne den Code einer einzigen Komponente anzufassen.

Dieser Leitfaden führt durch den Aufbau eines vollständigen, produktionsreifen Farbsystems von Grund auf: Auswahl einer primitiven Palette, Generierung von Farbtonskalen, Definition semantischer Tokens, Implementierung in CSS und Tailwind sowie Einrichtung von Dokumentation und Tests.

Warum systematische Farben wichtig sind

Das Argument für systematische Farben ist kein ästhetisches – es ist ein betriebliches. Folgendes bricht ohne ein System zusammen:

Inkonsistenz summiert sich über Zeit: Früh in einem Projekt treffen Designer und Entwickler Ad-hoc-Farbentscheidungen, die „richtig aussehen". Über zwei Jahre häuft eine Codebasis 40 verschiedene Blauwerte an, die alle dasselbe Blau sein sollen. Niemand weiß, welcher korrekt ist.

Dark Mode erfordert semantisches Mapping: Dark Mode kann nicht funktionieren, wenn Farben nach ihrem visuellen Wert hardcodiert sind. color: #1E293B ist eine dunkle Farbe, die gut als Text auf hellem Hintergrund aussieht. Im Dark Mode benötigt man einen anderen Wert. Wurde #1E293B in 80 Komponenten hardcodiert, gibt es 80 Stellen zum Aktualisieren – oder ein komplexes CSS-Override-System, das eine neue Schicht technischer Schulden erzeugt. Semantische Tokens beseitigen dies.

Themenänderungen sind teuer: Rebranding oder das Ändern einer Primärfarbe sollte eine einzige Änderung sein. Mit einem semantischen System ändert man --color-primary-600 in der Token-Datei und alle Schaltflächen, Links, Fokusringe und Rahmen, die darauf verweisen, aktualisieren sich automatisch.

Accessibility-Audits schlagen still fehl: Ohne ein System erfordert die Überprüfung, ob aller Text die WCAG-Kontrast-Anforderungen erfüllt, die manuelle Prüfung jeder Text/Hintergrund-Kombination. Mit semantischen Tokens können Sie Regeln definieren und sie programmatisch testen.

Namenskonventionen: Primitiv vs. Semantisch

Ein gut strukturiertes Farbsystem hat zwei Namensebenen, die unterschiedlichen Zwecken dienen.

Primitive Farb-Tokens

Primitive Tokens sind die rohen Farbwerte, benannt nach ihrer Position in einer Skala. Sie treffen keine Annahmen über die Verwendung – sie sind einfach eine Palette verfügbarer Farben:

blue-50   → #EFF6FF
blue-100  → #DBEAFE
blue-200  → #BFDBFE
blue-300  → #93C5FD
blue-400  → #60A5FA
blue-500  → #3B82F6
blue-600  → #2563EB
blue-700  → #1D4ED8
blue-800  → #1E40AF
blue-900  → #1E3A8A
blue-950  → #172554

Primitive Token-Namen beantworten: „Was ist diese Farbe?" Sie beantworten nicht: „Wofür wird diese Farbe verwendet?"

Semantische Farb-Tokens

Semantische Tokens referenzieren primitive Tokens und benennen Farben nach ihrem Zweck:

color-action-primary       → blue-600
color-action-primary-hover → blue-700
color-action-primary-text  → white-0

color-surface-default      → neutral-50 (heller Modus) / neutral-900 (dunkler Modus)
color-surface-elevated     → white-0 (heller Modus) / neutral-800 (dunkler Modus)

color-text-primary         → neutral-900 (heller Modus) / neutral-50 (dunkler Modus)
color-text-secondary       → neutral-600 (heller Modus) / neutral-400 (dunkler Modus)
color-text-disabled        → neutral-400 (heller Modus) / neutral-600 (dunkler Modus)

color-border-default       → neutral-200 (heller Modus) / neutral-700 (dunkler Modus)
color-border-focused       → blue-500

Semantische Token-Namen beantworten: „Wofür wird diese Farbe verwendet?" Sie spezifizieren keinen Wert – sie referenzieren ein Primitiv.

Diese Trennung ist die entscheidende Strukturentscheidung. Komponenten referenzieren semantische Tokens, keine Primitiven. Wenn Sie Dark Mode definieren, weisen Sie semantische Tokens anderen Primitiven zu – ohne Komponentencode zu ändern.

Namensschemas in der Praxis

Verschiedene Design-Systeme verwenden unterschiedliche Namenskonventionen für ihre semantische Schicht:

Die Konvention ist weniger wichtig als die Konsistenz. Wählen Sie ein Schema und wenden Sie es durchgängig an.

Farbtonskalen-Generierung (50–950)

Eine Farbtonskala ist eine geordnete Reihe von Farbwerten von nahezu Weiß bis nahezu Schwarz innerhalb einer einzelnen Farbfamilie. Tailwind CSS hat die 50–950-Skala populär gemacht; Material Design verwendet 100–900. Die genauen Zahlen sind weniger wichtig als das Vorhandensein ausreichend vieler Stufen, um die Bandbreite der Anwendungsfälle abzudecken: sehr helle Töne für Hintergründe, mittlere Werte für interaktive Elemente und dunkle Töne für Text.

Was eine gute Farbtonskala ausmacht

Eine verwendbare Farbtonskala hat zwei Eigenschaften:

1. Ausreichende perzeptuelle Stufen: Benachbarte Töne sollten visuell unterscheidbar sein – nicht so nah beieinander, dass der Unterschied kaum wahrnehmbar ist, und nicht so weit auseinander, dass Lücken in der Abdeckung entstehen.
2. Konsistente Helligkeitsprogression: Die Helligkeitswerte sollten von 950 (dunkelst) bis 50 (hellst) vorhersehbar zunehmen, ohne überraschende Sprünge oder Umkehrungen.

Das Versagensmuster bei handverlesenen Farbtonskalen ist unregelmäßiger Helligkeitsabstand. Eine Skala, bei der die Töne 300, 400 und 500 alle perzeptuell ähnlich sind und dann von 500 auf 700 ein dramatischer Sprung folgt, ist nicht verwendbar – man wird immer nach 500 greifen, wenn man etwas in der Mitte des Bereichs braucht.

Töne in OKLCH generieren

OKLCH (OK Lightness-Chroma-Hue) ist der beste Farbraum für die Farbtonskalen-Generierung, da sein Helligkeitskanal perzeptuell gleichmäßig ist – gleiche numerische Schritte erzeugen gleiche wahrgenommene Schritte. Wenn Sie Helligkeitswerte von L=0,15 (sehr dunkel) bis L=0,98 (sehr hell) in gleichen Abständen verteilen, sehen die resultierenden Töne visuell gleichmäßig verteilt aus.

So generieren Sie eine 11-stufige Farbtonskala in OKLCH:

1. Wählen Sie Ihren Basisfarbton und Chroma: z. B. H=250 (Blau), C=0,20.
2. Verteilen Sie Helligkeitswerte gleichmäßig: L = 0,15, 0,22, 0,30, 0,38, 0,47, 0,55, 0,63, 0,72, 0,82, 0,92, 0,97.
3. Variieren Sie das Chroma optional leicht: Reduzieren Sie das Chroma an den Extremen (sehr hell und sehr dunkel), wo gesättigte Farben fehl am Platz wirken.
4. Konvertieren Sie die OKLCH-Werte für die Implementierung in Hex.

Eine praktische OKLCH-zu-Hex-Skala für einen blauen Farbton:

Ton  | OKLCH                    | Hex
-----+--------------------------+--------
50   | oklch(0.97 0.04 250)     | #EFF6FF
100  | oklch(0.92 0.07 250)     | #DBEAFE
200  | oklch(0.84 0.11 250)     | #BFDBFE
300  | oklch(0.74 0.16 250)     | #93C5FD
400  | oklch(0.65 0.19 250)     | #60A5FA
500  | oklch(0.55 0.22 250)     | #3B82F6
600  | oklch(0.47 0.22 250)     | #2563EB
700  | oklch(0.40 0.20 250)     | #1D4ED8
800  | oklch(0.32 0.18 250)     | #1E40AF
900  | oklch(0.24 0.14 250)     | #1E3A8A
950  | oklch(0.17 0.10 250)     | #172554

Verwenden Sie ColorFYIs Shade Generator, um Tailwind-Farbtonskalen aus beliebigen Basisfarben zu generieren, und den Farbkonverter, um jeden generierten Ton im OKLCH-Farbraum zu prüfen und die Helligkeitsprogression zu verifizieren.

Wie viele Farbton-Stufen?

Für die meisten Design-Systeme ist der Bereich von 9–11 Stufen richtig:

• 50 und 950: Randwerte für Oberflächenhintergründe und tiefste Text-/Rahmenverwendung.
• 100–200: Helle, gefärbte Hintergründe (Warn-Hintergründe, Hover-Zustände auf weißen Oberflächen).
• 300–400: Icon-Farben, Platzhaltertext, deaktivierte Zustände.
• 500: Oft die „reine" Markenfarbe – die, die die Markenfarbenstandards spezifizieren.
• 600–700: Füllungen für interaktive Elemente (Schaltflächen, Links), bei denen Kontrast gegen Weiß erforderlich ist.
• 800–900: Text- und Text-auf-farbigem-Hintergrund-Verwendung.

Generieren Sie Töne für jede Farbfamilie in Ihrer Palette: Ihre primäre Markenfarbe, eine neutrale Grau-Serie und alle Akzentfarben (Rot/Fehler, Grün/Erfolg, Gelb/Warnung usw.).

Semantische Farb-Tokens

Mit etablierten Primitiven definieren Sie semantische Tokens, die Primitive Rollen zuordnen. Die Granularität dieses Mappings bestimmt, wie flexibel das System ist.

Oberflächenfarben

Oberflächen-Tokens definieren die Hintergrundebenen Ihrer Benutzeroberfläche:

:root {
  --color-surface-base: var(--neutral-50);       /* Seitenhintergrund */
  --color-surface-elevated: var(--white);         /* Karten-, Blatt-Hintergründe */
  --color-surface-overlay: var(--white);          /* Modal-, Popover-Hintergründe */
  --color-surface-sunken: var(--neutral-100);     /* Eingabefelder, Code-Blöcke */
}

[data-theme="dark"] {
  --color-surface-base: var(--neutral-950);
  --color-surface-elevated: var(--neutral-900);
  --color-surface-overlay: var(--neutral-800);
  --color-surface-sunken: var(--neutral-950);
}

Textfarben

Text-Tokens decken jede Text-Rolle in der Hierarchie ab:

:root {
  --color-text-primary: var(--neutral-900);      /* Fließtext, Überschriften */
  --color-text-secondary: var(--neutral-600);    /* Bildunterschriften, Labels */
  --color-text-tertiary: var(--neutral-400);     /* Platzhalter, Hinweise */
  --color-text-disabled: var(--neutral-300);     /* Deaktivierter Zustand */
  --color-text-inverse: var(--white);            /* Text auf dunklen/farbigen Hintergründen */
  --color-text-link: var(--blue-600);
  --color-text-link-hover: var(--blue-700);
}

[data-theme="dark"] {
  --color-text-primary: var(--neutral-50);
  --color-text-secondary: var(--neutral-400);
  --color-text-tertiary: var(--neutral-600);
  --color-text-disabled: var(--neutral-700);
  --color-text-link: var(--blue-400);
  --color-text-link-hover: var(--blue-300);
}

Interaktive/Aktions-Farben

Aktions-Tokens decken jeden Zustand interaktiver Elemente ab:

:root {
  /* Primäre Aktion */
  --color-action-primary-bg: var(--blue-600);
  --color-action-primary-bg-hover: var(--blue-700);
  --color-action-primary-bg-active: var(--blue-800);
  --color-action-primary-text: var(--white);

  /* Sekundäre/Ghost-Aktion */
  --color-action-secondary-border: var(--blue-600);
  --color-action-secondary-text: var(--blue-600);
  --color-action-secondary-bg-hover: var(--blue-50);

  /* Destruktive Aktion */
  --color-action-danger-bg: var(--red-600);
  --color-action-danger-bg-hover: var(--red-700);
  --color-action-danger-text: var(--white);
}

Feedback-/Status-Farben

Status-Tokens ordnen funktionale Farben ihrer semantischen Bedeutung zu:

:root {
  /* Erfolg */
  --color-status-success-bg: var(--green-50);
  --color-status-success-border: var(--green-200);
  --color-status-success-text: var(--green-700);
  --color-status-success-icon: var(--green-500);

  /* Warnung */
  --color-status-warning-bg: var(--yellow-50);
  --color-status-warning-border: var(--yellow-200);
  --color-status-warning-text: var(--yellow-800);
  --color-status-warning-icon: var(--yellow-500);

  /* Fehler */
  --color-status-error-bg: var(--red-50);
  --color-status-error-border: var(--red-200);
  --color-status-error-text: var(--red-700);
  --color-status-error-icon: var(--red-500);

  /* Info */
  --color-status-info-bg: var(--blue-50);
  --color-status-info-border: var(--blue-200);
  --color-status-info-text: var(--blue-700);
  --color-status-info-icon: var(--blue-500);
}

Rahmenfarben

:root {
  --color-border-default: var(--neutral-200);
  --color-border-strong: var(--neutral-400);
  --color-border-focused: var(--blue-500);
  --color-border-error: var(--red-500);
  --color-border-disabled: var(--neutral-200);
}

[data-theme="dark"] {
  --color-border-default: var(--neutral-700);
  --color-border-strong: var(--neutral-500);
  --color-border-focused: var(--blue-400);
  --color-border-error: var(--red-400);
  --color-border-disabled: var(--neutral-700);
}

Implementierung in CSS

Die CSS-Implementierung verwendet benutzerdefinierte Eigenschaften, die auf :root-Ebene (oder auf [data-theme]-Selektoren für das Theming) definiert werden. Komponenten referenzieren semantische Tokens, niemals direkt Primitive.

Dateistruktur

design-system/
├── tokens/
│   ├── primitives.css       # Alle primitiven Farbwerte
│   ├── semantic.css         # Semantisches Token → Primitiv-Mapping
│   └── dark.css             # Dark-Mode-Semantik-Überschreibungen
└── components/
    ├── button.css
    ├── card.css
    └── ...

primitives.css

:root {
  /* Neutrale Skala */
  --neutral-50: #F8FAFC;
  --neutral-100: #F1F5F9;
  --neutral-200: #E2E8F0;
  --neutral-300: #CBD5E1;
  --neutral-400: #94A3B8;
  --neutral-500: #64748B;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1E293B;
  --neutral-900: #0F172A;
  --neutral-950: #020617;

  /* Blaue Skala */
  --blue-50: #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;
  --blue-900: #1E3A8A;
  --blue-950: #172554;

  /* Weiß und Schwarz */
  --white: #FFFFFF;
  --black: #000000;
}

Komponentenverwendung

Komponenten referenzieren ausschließlich semantische Tokens:

.button-primary {
  background-color: var(--color-action-primary-bg);
  color: var(--color-action-primary-text);
  border: none;
}

.button-primary:hover {
  background-color: var(--color-action-primary-bg-hover);
}

.button-primary:active {
  background-color: var(--color-action-primary-bg-active);
}

.button-primary:disabled {
  background-color: var(--neutral-200);  /* Ausnahme: Deaktivierter Zustand verwendet oft Primitive */
  color: var(--color-text-disabled);
}

Wenn das Theme von Hell auf Dunkel wechselt, löst --color-action-primary-bg automatisch zu einem anderen Wert auf – keine schaltflächen-spezifischen Dark-Mode-Überschreibungen nötig.

Implementierung in Tailwind CSS

Tailwind v3 und v4 unterstützen die Integration von Design-Tokens über die Konfigurationsdatei und den CSS-Variablenansatz.

Tailwind v3 Konfiguration

Definieren Sie Ihre Farbskala in tailwind.config.js und ordnen Sie CSS-benutzerdefinierten Eigenschaften zu:

// tailwind.config.js
const colors = require("tailwindcss/colors");

module.exports = {
  theme: {
    colors: {
      transparent: "transparent",
      current: "currentColor",
      white: "#ffffff",
      black: "#000000",

      // Primitive Skalen
      neutral: {
        50:  "#F8FAFC",
        100: "#F1F5F9",
        200: "#E2E8F0",
        300: "#CBD5E1",
        400: "#94A3B8",
        500: "#64748B",
        600: "#475569",
        700: "#334155",
        800: "#1E293B",
        900: "#0F172A",
        950: "#020617",
      },
      blue: {
        50:  "#EFF6FF",
        100: "#DBEAFE",
        200: "#BFDBFE",
        300: "#93C5FD",
        400: "#60A5FA",
        500: "#3B82F6",
        600: "#2563EB",
        700: "#1D4ED8",
        800: "#1E40AF",
        900: "#1E3A8A",
        950: "#172554",
      },

      // Semantische Tokens über CSS-Variablen
      "action-primary": "var(--color-action-primary-bg)",
      "action-primary-hover": "var(--color-action-primary-bg-hover)",
      "surface": "var(--color-surface-base)",
      "surface-elevated": "var(--color-surface-elevated)",
      "text-primary": "var(--color-text-primary)",
      "text-secondary": "var(--color-text-secondary)",
      "border-default": "var(--color-border-default)",
    },
  },
};

Mit dieser Einrichtung können Sie bg-action-primary schreiben, und es wird zum korrekten semantischen Token-Wert aufgelöst, der wiederum zum korrekten Primitiv für das aktuelle Theme aufgelöst wird.

Tailwind v4 CSS-First-Konfiguration

Tailwind v4 ersetzt die JavaScript-Konfiguration durch einen CSS-First-Ansatz mit @theme:

@import "tailwindcss";

@theme {
  /* Primitive Farben */
  --color-blue-500: #3B82F6;
  --color-blue-600: #2563EB;
  --color-blue-700: #1D4ED8;
  --color-neutral-50: #F8FAFC;
  --color-neutral-900: #0F172A;

  /* Semantische Tokens */
  --color-surface: var(--color-surface-base);
  --color-text: var(--color-text-primary);
  --color-primary: var(--color-action-primary-bg);
}

/* Semantische Definitionen */
:root {
  --color-surface-base: var(--color-neutral-50);
  --color-text-primary: var(--color-neutral-900);
  --color-action-primary-bg: var(--color-blue-600);
}

[data-theme="dark"] {
  --color-surface-base: oklch(0.145 0 0);
  --color-text-primary: var(--color-neutral-50);
  --color-action-primary-bg: var(--color-blue-500);
}

Tests und Dokumentation

Ein Farbsystem ist nur nützlich, wenn es von allen Teammitgliedern verstanden und zuverlässig implementiert wird. Tests erkennen Regressionen; Dokumentation macht das System lernbar.

Kontrasttests

Jedes Text-Token, das mit seinem vorgesehenen Hintergrundoberflächen-Token gepaart ist, sollte programmatisch überprüft werden, um die WCAG-2.1-AA-Anforderungen zu erfüllen (4,5:1 für Normaltext, 3:1 für großen Text). Schreiben Sie Tests, die:

1. Die aktuellen CSS-benutzerdefinierten Eigenschaftswerte auflösen (für helle und dunkle Themes).
2. Das WCAG-Kontrastverhältnis zwischen jedem Text-/Oberflächen-Paar berechnen.
3. Behaupten, dass das Verhältnis den erforderlichen Schwellenwert erfüllt.

import { getContrastRatio } from "some-color-utility";

const tokens = {
  light: {
    textPrimary: "#0F172A",
    surfaceBase: "#F8FAFC",
  },
  dark: {
    textPrimary: "#F8FAFC",
    surfaceBase: "#020617",
  }
};

describe("Farbsystem-Kontrast", () => {
  test("text-primary auf surface-base besteht AA im hellen Modus", () => {
    const ratio = getContrastRatio(tokens.light.textPrimary, tokens.light.surfaceBase);
    expect(ratio).toBeGreaterThanOrEqual(4.5);
  });

  test("text-primary auf surface-base besteht AA im dunklen Modus", () => {
    const ratio = getContrastRatio(tokens.dark.textPrimary, tokens.dark.surfaceBase);
    expect(ratio).toBeGreaterThanOrEqual(4.5);
  });
});

Verwenden Sie ColorFYIs Kontrastprüfer zur manuellen Überprüfung einzelner Token-Paare während der Token-Definition, bevor Sie automatisierte Tests schreiben.

Farb-Token-Dokumentation

Dokumentieren Sie jedes semantische Token mit: - Name: Der genaue CSS-Variablenname. - Wert (hell): Das Primitiv, auf das es im hellen Modus verweist. - Wert (dunkel): Das Primitiv im dunklen Modus. - Verwendung: Wo dieses Token verwendet werden soll. - Anti-Muster: Wo es nicht verwendet werden soll.

| Token                        | Hell           | Dunkel         | Verwendung                          |
|------------------------------|----------------|----------------|-------------------------------------|
| --color-text-primary         | neutral-900    | neutral-50     | Fließtext, Überschriften            |
| --color-text-secondary       | neutral-600    | neutral-400    | Bildunterschriften, Metadaten       |
| --color-action-primary-bg    | blue-600       | blue-500       | Primäre Schaltflächen-Hintergründe  |
| --color-surface-elevated     | white          | neutral-900    | Karten-, Blatt-, Panel-Hintergründe |

Visuelle Regressionstests

Ergänzen Sie die Token-Dokumentation mit visuellen Regressionstests mithilfe von Tools wie Percy, Chromatic oder dem Screenshot-Vergleich von Playwright. Ein visueller Regressionstest rendert Ihre Komponentenbibliothek bei jeder Token-Änderung, erstellt Screenshots und vergleicht diese mit einem Referenzwert – jede Farbänderung löst eine Überprüfung aus und erkennt versehentliche Regressionen.

Storybook-Farbpaletten-Seite

Erstellen Sie in Storybook eine dedizierte Farbpaletten-Story, die alle Tokens als Farbfelder rendert:

// ColorPalette.stories.jsx
const tokens = [
  { name: "--color-surface-base", label: "Oberfläche / Basis" },
  { name: "--color-surface-elevated", label: "Oberfläche / Erhöht" },
  { name: "--color-text-primary", label: "Text / Primär" },
  // ...
];

export function ColorPaletteDoc() {
  return (
    <div>
      {tokens.map(({ name, label }) => (
        <div key={name} style={{ display: "flex", alignItems: "center", gap: 16 }}>
          <div style={{
            width: 48,
            height: 48,
            backgroundColor: `var(${name})`,
            borderRadius: 4,
            border: "1px solid rgba(0,0,0,0.1)"
          }} />
          <div>
            <div>{label}</div>
            <code>{name}</code>
          </div>
        </div>
      ))}
    </div>
  );
}

Dies rendert die tatsächlichen Live-Token-Werte – in welchem Theme auch immer in Storybook aktiv ist –, wodurch die Dokumentation selbst-verifizierend statt statisch wird.

Wichtigste Erkenntnisse

• Ein Farbsystem trennt primitive Tokens (benannt nach ihrer Wertposition in einer Skala: blue-600) von semantischen Tokens (benannt nach ihrem Zweck: color-action-primary-bg). Komponenten referenzieren immer semantische Tokens, niemals Primitive.
• Diese Trennung ermöglicht Dark Mode und Theming durch Neuzuordnung semantischer Tokens zu verschiedenen Primitiven auf der CSS-benutzerdefinierten-Eigenschaften-Ebene – ohne Komponentencodeänderungen.
• Generieren Sie Farbtonskalen (50–950) im OKLCH-Farbraum, wo der Helligkeitskanal perzeptuell gleichmäßig ist – gleiche numerische Schritte erzeugen visuell gleichmäßig verteilte Ergebnisse. Verwenden Sie ColorFYIs Shade Generator, um Tailwind-kompatible Farbtonskalen aus beliebigen Ankerfarben zu erstellen.
• Semantische Token-Kategorien decken vier Bereiche ab: Oberfläche (Hintergrundebenen), Text (Hierarchie der Textrollen), Aktion (Zustände interaktiver Elemente) und Feedback (Erfolg, Warnung, Fehler, Info).
• In CSS definieren Sie Primitive in einer Datei und semantische Mappings in einer anderen. Verwenden Sie [data-theme="dark"]-Selektor-Überschreibungen, um semantische Tokens für den Dark Mode neu zuzuordnen.
• In Tailwind v3 erweitern Sie das Farbobjekt der Konfiguration mit CSS-benutzerdefinierten-Eigenschaften-Referenzen. In Tailwind v4 verwenden Sie den CSS-First-@theme-Block, um sowohl primitive als auch semantische Tokens zu definieren.
• Testen Sie jedes Text-/Oberflächen-Token-Paar auf WCAG-Konformität – programmatisch, nicht nur manuell. Verwenden Sie ColorFYIs Kontrastprüfer zur manuellen Überprüfung während der Token-Definition.
• Dokumentieren Sie Tokens in Storybook mit Live-Farbfeldern, die tatsächliche CSS-benutzerdefinierten-Eigenschaftswerte rendern und sicherstellen, dass die Dokumentation den aktuellen Zustand des Systems widerspiegelt.