Design-Token-Generator
Design-Tokens für Farben, Typografie, Abstände, Radien, Schatten und Breakpoints definieren und als CSS, JSON, Tailwind oder SCSS exportieren.
Der Design-Token-Generator definiert ein kleines Design-System visuell: Farben mit Stufen, Schriften, Typografie-Skala, Abstände, Radien, Schatten und Breakpoints. Daraus entstehen Design-Tokens, die du als CSS Custom Properties, als JSON im Design-Tokens-Format, für Tailwind v4 und v3 oder als SCSS-Variablen kopierst oder herunterlädst. Die Verarbeitung passiert lokal im Browser.
Farben
Typografie
Abstände, Radien und Schatten
Breakpoints
:root {
/* Farben */
--color-primary-50: #f0f5fe;
--color-primary-100: #dee9fc;
--color-primary-200: #c4d9fb;
--color-primary-300: #9ec2fd;
--color-primary-400: #69a0fa;
--color-primary-500: #3b82f6;
--color-primary-600: #0866ea;
--color-primary-700: #0056cd;
--color-primary-800: #0046a9;
--color-primary-900: #123e85;
--color-primary-950: #0f2850;
--color-secondary-50: #f5f4fe;
--color-secondary-100: #e8e4fd;
--color-secondary-200: #d7d0fc;
--color-secondary-300: #c0b1fd;
--color-secondary-400: #a285fa;
--color-secondary-500: #8b5cf6;
--color-secondary-600: #7935ec;
--color-secondary-700: #6b1bd8;
--color-secondary-800: #561fae;
--color-secondary-900: #472887;
--color-secondary-950: #2c1d52;
--color-accent: #c9f45b;
/* Schriften */
--font-heading: 'Manrope Variable', system-ui, sans-serif;
--font-body: 'Inter Variable', system-ui, sans-serif;
--font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;
/* Schriftgrößen */
--text-4xl: 3.0518rem;
--text-3xl: 2.4414rem;
--text-2xl: 1.9531rem;
--text-xl: 1.5625rem;
--text-lg: 1.25rem;
--text-base: 1rem;
--text-sm: 0.8rem;
--text-xs: 0.64rem;
/* Abstände */
--space-0_5: 0.125rem;
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
/* Radien */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 20px;
--radius-full: 9999px;
/* Schatten */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
/* Breakpoints */
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
}Design-Tokens: die Sprache des Design-Systems
Design-Tokens halten Farben, Abstände, Schriftgrößen und weitere Entscheidungen an einer Stelle fest. Design und Code greifen auf dieselben Namen zu. Der Generator erzeugt sie aus wenigen Eingaben und liefert sie in vier Familien von Formaten.
Die Ausgabeformate
| Format | Einsatz |
|---|---|
| CSS Custom Properties | Beliebige Webprojekte, zur Laufzeit veränderbar |
| JSON (DTCG) | Austausch mit Design-Tools und Build-Pipelines |
| Tailwind v4 / v3 | Theme für Tailwind-Projekte |
| SCSS | Sass-Variablen und Breakpoint-Map |
So gehst du vor
- Werte definieren und das Ergebnis prüfen.
- Format wählen und in dein Projekt übernehmen.
- Feinjustierung einzelner Bereiche: Spacing-Skala-Generator, Typografie-Skala-Generator und OKLCH-Farbskala-Generator. Für reine Tailwind-Projekte gibt es den Tailwind-Config-Generator.
Beispiel
Aus der Farbe #3b82f6 mit Stufen entstehen die Tokens color-primary-50 bis color-primary-950. Im CSS nutzt du var(--color-primary-600), in
Tailwind bg-primary-600. Farbwerte in andere Notationen rechnest du im Farbumrechner um.
Häufige Fragen
Was sind Design-Tokens?
Benannte Werte für Gestaltungsentscheidungen, etwa color-primary-500 oder space-4. Sie ersetzen Einzelwerte im Code und im Design-Tool. Ändert sich ein Token, ändert sich die ganze Oberfläche konsistent.
Welches Format soll ich wählen?
CSS Custom Properties funktionieren überall und lassen sich zur Laufzeit ändern, etwa für Dunkelmodus. JSON im Design-Tokens-Format dient dem Austausch mit Design-Tools und Build-Pipelines. Tailwind-Ausgaben setzt du direkt im Projekt ein, SCSS-Variablen in klassischen Sass-Setups.
Was ist das DTCG-Format?
Das Format der Design Tokens Community Group. Jeder Token hat $value und $type, Gruppen sind verschachtelte Objekte. Immer mehr Werkzeuge lesen es ein, darunter Style-Dictionary-Setups und Design-Tools.
Wie viele Tokens sind sinnvoll?
So wenige wie möglich. Eine überschaubare Skala für Farben, Abstände und Schrift genügt für die meisten Projekte. Mehr Tokens erhöhen den Pflegeaufwand, ohne das Design besser zu machen.
Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.