Designtokens genereren
Maak semantische kleur, afstand, radius en typografie tokens met een live component preview. Uitvoer CSS aangepaste eigenschappen of JSONVrij zonder AI.
Ontwerptekens
: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;
}De exporttekst blijft in het Engels; je invoer blijft ongewijzigd.
Geen aanmelding. Geen AI credits. Deze tool assembleert uw uitvoer in uw browser.
Van een idee tot iets nuttigs.
- 01
Stel uw semantische kleuren en basiswaarden in.
- 02
Inspecteer het levende monster en gegenereerde afstandsschaal.
- 03
Kopiëren CSS variabelen of exporteer de matching JSON waarden.
Een beetje context.
Semantische tokens geven herhaalde ontwerpbeslissingen een naam. Deze tool bouwt een compact palet en afstandsschaal van uw keuzes. CSS en JSON De uitvoer heeft dezelfde waarden. De JSON is een eenvoudig sleutelwaarde token document, niet een claim van naleving van een bepaalde token uitwisseling standaard.
Goede vragen.
Kan ik dit gebruiken met mijn bestaande thema?
Ja. Kaart of hernoemen van de geëxporteerde tokens naar uw thema ... conventies in plaats van het vervangen van een gevestigd systeem blindelings.
Maakt dit lichte en donkere thema's?
Het exporteert één palet tegelijk. Maak en download elk palet apart en bekijk contrast in elke modus.