Design-Token-Generator
Erstellen Sie semantische Farb-, Abstands-, Radius- und Typografie-Token mit einer Live-Komponentenvorschau. Ausfuhren CSS benutzerdefinierte Eigenschaften oder JSONFrei ohne AI.
Design-Tokens
:root {
--color-accent: #c65324;
--color-background: #faf8f5;
--color-foreground: #292521;
--color-surface: #ffffff;
--color-on-accent: #000000;
--font-family: "Inter", sans-serif;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 24px;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
}Exporttexte bleiben auf Englisch; deine Eingaben werden unverändert übernommen.
Keine Anmeldung. Keine AI Credits. Dieses Tool stellt Ihre Ausgabe in Ihrem Browser zusammen.
Von einer Idee zu etwas Nützlichem.
- 01
Legen Sie Ihre semantischen Farben und Basiswerte fest.
- 02
Inspizieren Sie die lebende Probe und die erzeugte Abstandsskala.
- 03
Kopie CSS Variablen oder exportieren Sie das Matching JSON Werte.
Ein kleiner Kontext.
Semantische Token geben wiederholten Designentscheidungen einen Namen. Dieses Tool erstellt eine kompakte Palette und Abstandsskala von Ihren Entscheidungen. CSS und JSON Die Exporte teilen die gleichen Werte. Die JSON ist ein einfaches Schlüsselwert-Token-Dokument, kein Anspruch auf Einhaltung eines bestimmten Token-Austauschstandards.
Gute Fragen.
Kann ich dies mit meinem vorhandenen Theme verwenden?
Ja. Weisen Sie die exportierten Token den Konventionen Ihres Themas zu oder benennen Sie sie um, anstatt ein etabliertes System blind zu ersetzen.
Schafft dies helle und dunkle Themen?
Es exportiert eine Palette nach der anderen. Erstellen und herunterladen jeder Palette separat und überprüfen Sie den Kontrast in jedem Modus.