Générateur de tokens de design
Créez des jetons de couleur sémantique, d'espacement, de rayon et de typographie avec un aperçu des composants en direct. Exportations CSS propriétés personnalisées ou JSON, libre sans AI.
Tokens de design
: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;
}Le texte exporté reste en anglais ; vos saisies sont conservées telles quelles.
Pas d'inscription. Pas de crédits d'IA. Cet outil assemble votre sortie dans votre navigateur.
D'une idée à quelque chose d'utile.
- 01
Définissez vos couleurs sémantiques et vos valeurs de base.
- 02
Inspecter l'échantillon vivant et générer une échelle d'espacement.
- 03
Copier CSS variables ou exporter la correspondance JSON valeurs.
Un peu de contexte.
Les jetons sémantiques donnent un nom aux décisions de conception répétées. Cet outil construit une palette compacte et une échelle d'espacement à partir de vos choix. CSS et JSON Les exportations partagent les mêmes valeurs. Les JSON est un simple document à valeur clé, et non une revendication de conformité à une norme d'échange de jetons particulière.
Bonnes questions.
Puis-je l'utiliser avec mon thème existant ?
Oui. Carter ou renommer les jetons exportés à votre thème conventions plutôt que de remplacer un système établi aveuglément.
Est-ce que cela crée des thèmes clairs et sombres ?
Elle exporte une palette à la fois. Créer et télécharger chaque palette séparément et examiner le contraste dans chaque mode.