Systeme de couleurs avec variables CSS pour sites et apps
Un systeme de couleurs evite les couleurs ajoutees au hasard. Utilisez des tokens par intention : fond, texte, bordure, action principale et etats.
Tokens de depart
:root {
--color-bg: #ffffff;
--color-surface: #f8fafc;
--color-text: #0f172a;
--color-muted: #64748b;
--color-border: #cbd5e1;
--color-primary: #2563eb;
}
.dark {
--color-bg: #09090b;
--color-surface: #18181b;
--color-text: #f4f4f5;
--color-muted: #a1a1aa;
--color-border: #3f3f46;
--color-primary: #60a5fa;
}Checklist developpeur
- Nommez les tokens par usage plutot que par couleur.
- Gardez les memes noms de tokens en dark mode.
- Testez le contraste avant publication.