Palette de couleurs du design system. Toutes les couleurs sont definies comme des variables CSS dans tokens.css et utilisables via les classes utilitaires Tailwind.
Cliquez sur un swatch pour copier la variable CSS. Utilisez les classes Tailwind comme bg-primary, text-muted-foreground, border-border pour appliquer les tokens.
Couleurs de fond qui definissent la hierarchie des surfaces. Du plus profond (background) au plus eleve (card, popover).
Couleurs de texte. Le foreground principal assure la lisibilite, le muted-foreground sert pour les textes secondaires et labels.
Couleurs utilisees pour les bordures de cartes, inputs et le ring de focus. Le ring utilise la couleur primaire pour guider l'attention.
Les deux couleurs identitaires de Speedcube Master : bleu primaire pour les actions et CTA, vert accent pour les indicateurs de succes.
Couleurs semantiques pour communiquer les etats : succes, avertissement, erreur et information.
Solve enregistre, record battu, action reussie
Inspection en cours, temps limite, +2
DNF, suppression, erreur critique
Astuce, notification, nouvelle fonctionnalite
Palette dediee aux graphiques et visualisations de donnees (recharts). Identique dans les deux themes.
Verification des ratios de contraste WCAG pour les combinaisons les plus courantes du theme sombre.
Foreground sur Background
#e5e7eb / #0b0f1a
13.8:1
AAA
Card Foreground sur Card
#e5e7eb / #0f1524
12.5:1
AAA
Muted Foreground sur Background
#9ca3af / #0b0f1a
6.2:1
AA
Muted Foreground sur Card
#9ca3af / #0f1524
5.6:1
AA
Primary Foreground sur Primary
#ffffff / #2563eb
4.6:1
AA
Accent Foreground sur Accent
#ffffff / #22c55e
3.1:1
AA Large
Apercu montrant comment les couleurs du design system fonctionnent ensemble dans une interface reelle.
Meilleur temps
7.234
Ao5
9.871
Ao12
10.345
Legende : Le fond --background (#0b0f1a) est le plan le plus profond. Les cartes utilisent --card (#0f1524) pour creer de l'elevation. Les bordures --border (#1f2937) delimitent les zones. Le bleu --primary (#2563eb) guide les actions, le vert --accent (#22c55e) valide les succes, l'orange --warning (#f59e0b) previent, et le rouge --destructive (#ef4444) alerte.