Design Tokens sind die kleinsten Bausteine eines Designsystems: Farben, Schriftgrößen, Abstände und Radien als benannte Werte. Wer sie sauber pflegt, hält ein Produkt konsistent. Dieser Leitfaden zeigt, wie du Tokens einer bestehenden Website gewinnst und weiterverwendest.
- Ein Style-Extract ist eine Bestandsaufnahme, kein Diebstahl: Farben, Schriften und Abstände einer Seite als Liste.
- Am nützlichsten ist es beim Relaunch, bei der Übernahme fremder Projekte und beim Abgleich mit dem eigenen Designsystem.
- Die Rohwerte sind nur der Anfang. Erst das Zusammenfassen auf wenige Rollen macht daraus ein System.
- Fremde Marken kopiert man nicht. Analysieren ist erlaubt, übernehmen nicht.
Warum Tokens statt fester Werte
Wenn Farben und Abstände über das Projekt verstreut fest verdrahtet sind, wird jede Änderung zur Suchaktion. Tokens bündeln diese Werte an einer Stelle. Eine Anpassung wirkt dann überall.
Tokens verbessern auch die Zusammenarbeit zwischen Design und Entwicklung, weil beide Seiten dieselbe Sprache sprechen: primary, background, spacing-4 statt einer zufälligen Hex-Zahl.
- #1f5eff steht an vierzig Stellen im Projekt.
- Ein Rebrand heißt: suchen, ersetzen, hoffen.
- Niemand weiß, ob #1f5dfe ein zweiter Blauton ist oder ein Tippfehler.
- --primary steht an einer Stelle, benutzt wird der Name.
- Ein Rebrand ist eine geänderte Zeile.
- Der Name sagt, wofür die Farbe da ist, nicht wie sie aussieht.
Was sich extrahieren lässt
Aus einer Website lassen sich die Kernfarben, die Schriftfamilien, typische Schriftgrößen sowie Abstände und Eckenradien ableiten. Zusammen ergeben sie ein solides Grundgerüst für ein eigenes Theme.
Wichtig ist die Genauigkeit der Farben. Eine reine Analyse des Codes reicht oft nicht, weil viele Farben erst im gerenderten Bild sichtbar werden. Eine Prüfung am Screenshot erhöht die Trefferquote.
Vier Schritte von der Seite bis in den Code. Der dritte ist der einzige, den kein Werkzeug für dich erledigt.
Ausgabe als DESIGN.md oder tokens.json
Für Menschen eignet sich eine DESIGN.md, die Farben, Typografie und Hinweise zur Umsetzung beschreibt. Für Werkzeuge und Build-Prozesse ist eine tokens.json praktischer, weil sie maschinell einlesbar ist.
In Tailwind kannst du die Tokens als CSS-Variablen hinterlegen und in der Konfiguration referenzieren. So bleibt dein Theme zentral steuerbar.
@theme { --color-primary: #1f5eff; --color-surface: #f8fafc; --color-border: #e2e8f0; --spacing: 4px;} <div className="bg-surface text-primary p-4" />
Wenige Rollen schlagen viele Werte.
Eine Liste aus Hex-Zahlen ist eine Bestandsaufnahme. Ein System wird daraus erst, wenn jeder Wert eine Aufgabe hat.
Schnell zum Ergebnis
Mit dem Style Extractor der Library gibst du eine URL ein und erhältst Farben, Typografie und Spacing aufbereitet, direkt zum Übernehmen. Das ist ein guter Startpunkt, den du danach an deine Marke anpasst.
- primaryPrimärfarbe#1f5eff
- surfaceFläche#f8fafc
- textText#0f172a
- borderRand#e2e8f0
Links, was eine mittelgroße Seite hergibt. Rechts, was davon in ein Projekt gehört.
Was ein Extract nicht ist
Ein Auszug ist ein Werkzeug zum Verstehen. Er ersetzt weder eine Gestaltung noch die Erlaubnis, fremde Arbeit zu übernehmen.
- Kein Ersatz für ein Designsystem. Eine Liste von Werten ist noch keine Entscheidung. Erst wenn du sie Rollen zuordnest, wird daraus etwas, mit dem man arbeiten kann.
- Keine Kopiervorlage für fremde Marken. Farben und Schriften einer fremden Seite gehören zu deren Auftritt. Analysieren ja, übernehmen nein.
- Keine vollständige Wahrheit. Ausgelesen wird, was im Stylesheet steht. Werte, die erst durch Interaktion entstehen, fehlen.
Nimm die Struktur mit, nicht die Farben.
Vom Auszug zum System
Der eigentliche Schritt kommt nach dem Auslesen: aus vielen Werten wenige Rollen machen.
- Doppelte zusammenfassen. Farben, die sich um wenige Prozent unterscheiden, sind fast immer ein Versehen. Entscheide dich für eine.
- Rollen benennen. Nicht Blau 500, sondern Primärfarbe, Fläche, Text, Rand. Namen überleben einen Rebrand, Werte nicht.
- Abstände auf eine Skala legen. Vier Pixel als Schritt reichen meistens. Zwischenwerte sind später der Grund, warum nichts mehr fluchtet.
- Als Variablen ablegen. Erst im Code sind es Tokens. Vorher ist es eine Notiz, die niemand pflegt.
Am Ende dieser vier Schritte steht keine längere Liste als vorher, sondern eine kürzere. Das ist das Ziel: aus sechzehn Farben werden vier, die jemand erklären kann.
Ein Token, das niemand benennen kann, ist keins.
