Couleurs
Rôles de couleur sémantique, architecture de thème et directives d'utilisation utilisés dans l'interface utilisateur de PyColors.
Vue d’ensembleLien vers la section
Couleurs dans PyColors UI sont conçus comme Rôles sémantiques des produitsPas de valeurs décoratives.
Le système donne à chaque couche d'interface une signification stable: surfaces de page, cartes, texte, actions, états, bordures, contrôles de formulaire, barres latérales et graphiques. Les composants consomment ces rôles à travers des utilitaires comme bg-card, text-foreground, text-muted-foreground, bg-primaryet border-border au lieu de coder les valeurs visuelles localement.
À la fin de cette page, vous comprendrez comment PyColors structure les rôles de couleur, comment le mode clair et sombre reste prévisible et comment appliquer les décisions de couleur sans créer de dérive de thème.
Pourquoi cela compte
La cohérence des couleurs est l'un des signaux les plus rapides de la qualité du produit. Un système de couleurs sémantique maintient les tableaux de bord, les pages marketing, la documentation, les formulaires et les composants réutilisables visuellement alignés sans forcer chaque composant à réinventer sa propre palette.
PrincipesLien vers la section
Décrire l'intention
Changement central
Échelle cohérente
Ce que vous allez faireLien vers la section
Map des variables CSS aux utilitaires Tailwind à travers la couche de
token. [#map-css-variables-to-tailwind-utilities-through-the-token-layer]
Appliquer des couleurs dans des composants sans valeurs brutes ou
remplacements ponctuels. [#apply-colors-in-components-without-raw-values-or-one-off-overrides]
Utilisez des règles de décision pour conserver les couleurs de
l'interface utilisateur, les couleurs d'état et les couleurs du graphique [#use-decision-rules-to-keep-ui-colors-state-colors-and-chart-colors] Séparer.
ArchitectureLien vers la section
PyColors utilise une Système de couleurs basé sur OKLCH exposés à travers des variables CSS et mappés dans les utilitaires sémantiques Tailwind.
OKLCH donne à la couche de tokens un contrôle plus prévisible sur la légèreté perçue, le contraste et l'équilibre du thème que les valeurs RVB brutes ou HSL uniques. C'est important lorsqu'un produit doit prendre en charge le mode lumière, le mode sombre, les composants d'interface utilisateur réutilisables, les longues pages de documentation, les tableaux de bord, les écrans de paramètres et les surfaces commerciales.
Principe de base
Les composants doivent consommer des rôles de couleur. La couche de tokens devrait décider de l'apparence de ces rôles.
Générer un point de départ sémantique
Besoin d'un ensemble de départ concret de valeurs sémantiques claires et sombres? Utilisez le Créateur de thèmes PyColors pour générer des remplacements CSS côté client, puis examinez le résultat dans votre contexte de produit complet.
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-border: var(--border);
--color-ring: var(--ring);
}Cela maintient la stabilité de l'API du composant tout en permettant au thème sous-jacent d'évoluer de manière centralisée. Les composants conservent les mêmes classes, la signification des tokens reste stable et le calque de thème gère le contraste et l'équilibre visuel.
Modèle de rôleLien vers la section
PyColors regroupe les couleurs par responsabilité du produit. Cela permet de garder le système plus facile à raisonner et empêche la table des matières de devenir bruyante.
| Catégorie | Tokens | Utilisé pour |
|---|---|---|
| Surfaces | background, card, popover, sidebar | Calques, cartes, superpositions, navigation |
| Texte | foreground, muted-foreground, card-foreground | Copie primaire, copie secondaire, texte spécifique à la surface |
| Actions | primary, secondary, accent, muted | Boutons, accent, zones d'interaction subtiles |
| États | destructive, success, warning | Feedback produit, validation, risque, confirmation |
| Apports | border, input, ring | Formes, états de focus, séparateurs, contours de contrôle |
| Graphiques | chart-1 au chart-5 | Visualisation des données uniquement |
Pourquoi cela compte
La séparation des rôles d'interface utilisateur des rôles de graphique empêche les couleurs de visualisation des données de s'infiltrer dans les états du produit. Une palette graphique ne doit pas devenir la source de vérité pour les boutons, les alertes ou les actions destructrices.
Contexte
primaire
secondaire
Destructive
avertissement
frontière
ExécutionLien vers la section
Utilisez des utilitaires sémantiques dans chaque composant réutilisable.
export function ProductNotice() {
return (
<div className="rounded-2xl border border-border bg-card p-5 text-card-foreground">
<p className="text-sm font-medium text-foreground">
Production-ready surface
</p>
<p className="mt-1 text-sm text-muted-foreground">
The visual intent comes from the design system, not from local
overrides.
</p>
</div>
);
}Évitez les valeurs brutes à l'intérieur de l'interface utilisateur réutilisable.
export function ProductNotice() {
return (
<div className="rounded-2xl border border-[#e5e7eb] bg-[#ffffff] p-5 text-[#111827]">
<p className="text-sm text-[#6b7280]">This creates theme drift.</p>
</div>
);
}Piège commun
Ne résolvez pas les besoins de couleurs répétés avec des remplacements locaux. Si la même intention visuelle apparaît à plusieurs endroits, définissez ou ajustez plutôt le rôle sémantique.
Guide de décisionLien vers la section
Utilisez les rôles de couleur sémantiques PyColors lorsque :
- Le composant est réutilisable
- l'interface utilisateur doit prendre en charge le mode clair et sombre
- la surface apparaît dans les tableaux de bord, les documents, le marketing ou les paramètres
- la même signification visuelle doit rester stable sur l'ensemble du produit
- Les mises à jour du thème doivent être centralisées
Évitez les valeurs brutes locales lorsque :
- le composant appartient au système de conception
- la valeur représente un état de produit
- la couleur affecte le contraste du texte ou la visibilité du focus
- la couleur sera probablement réutilisée ailleurs
- la valeur doit survivre aux changements de thème futurs
Inline CTA
Prêt à passer de la cohérence visuelle à une fondation SaaS en forme de production? Explorer Starter Pro pour les modèles d'authentification, de facturation, de backend et de livraison basés sur l'interface utilisateur PyColors.