Un système de couleurs d’interface utilisateur est un ensemble de variantes de couleurs construites à partir d’une seule couleur de départ. Il fournit des échelles cohérentes du clair au foncé pour les jetons de conception, les boutons, les arrière-plans et les couleurs du texte.
Sélectionnez une couleur de graine et choisissez un style (Tailwind ou Material). L'outil génère une palette complète en 10 étapes allant du clair (50) au foncé (900), parfaite pour les systèmes de conception.
Frequently Asked Questions
Q: Qu'est-ce qu'un jeton de conception ?
Qu'est-ce qu'un jeton de conception ? Un jeton de conception est une valeur nommée qui stocke un attribut de conception comme une couleur, utilisé de manière cohérente dans un système de conception.
Q: Pourquoi ai-je besoin de 10 teintes ?
Pourquoi ai-je besoin de 10 teintes ? Différents éléments de l'interface utilisateur nécessitent différents niveaux de contraste. Une échelle de 10 étapes offre une flexibilité pour les arrière-plans, les bordures, les états de survol et le texte.
Q: Qu'est-ce qu'une palette de jetons de conception ?
Qu'est-ce qu'une palette de jetons de conception ? Une palette de jetons de conception est un ensemble systématique de variables de couleur (primaire, secondaire, surface, texte) générées à partir d'une couleur de marque unique. Il garantit la cohérence sur l’ensemble de votre interface utilisateur.
Q: Puis-je exporter vers des systèmes de conception autres que Tailwind ?
Puis-je exporter vers des systèmes de conception autres que Tailwind ? Oui, l'outil exporte vers les propriétés personnalisées CSS, les variables SCSS et le format de configuration Tailwind. Copiez le format qui correspond à votre pile.
Q: Comment gérer le mode sombre avec cet outil ?
Comment gérer le mode sombre avec cet outil ? Générez d’abord votre palette de mode clair, puis utilisez la même couleur de départ avec des valeurs de saturation et de luminosité réduites pour le mode sombre. De nombreux systèmes de conception inversent les couleurs de la surface et du texte.