Generatore di design token
Creare token di colore semantico, spaziatura, raggio e tipografia con un'anteprima dei componenti live. Esportazione CSS proprietà personalizzate o JSON, gratis senza AI.
Token di progettazione
: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;
}Il testo esportato resta in inglese; i tuoi dati vengono mantenuti come inseriti.
Non c'e' segnale. Niente crediti per l'IA. Questo strumento assembla l'output nel tuo browser.
Da un'idea a qualcosa di utile.
- 01
Imposta i colori semantici e i valori di base.
- 02
Ispezionare il campione vivo e generare scala di spaziatura.
- 03
Copia CSS variabili o esportare la corrispondenza JSON valori.
Un po' di contesto.
I gettoni semantici danno un nome a decisioni di design ripetute. Questo strumento costruisce una tavolozza compatta e una scala spaziatrice dalle tue scelte. CSS e JSON le esportazioni condividono gli stessi valori. Il JSON è un semplice documento di token di valore chiave, non una pretesa di conformità con un particolare standard di interscambio di token.
Buone domande.
Posso usarlo con il mio tema esistente?
Si'. Mappa o rinominare i gettoni esportati alle convenzioni del vostro tema piuttosto che sostituire un sistema consolidato ciecamente.
Questo crea temi chiari e scuri?
Esporta una tavolozza alla volta. Creare e scaricare ogni tavolozza separatamente e rivedere il contrasto in ogni modalità.