La palette Gradly se compose de trois familles : Primary (bleu, couleur principale de la marque), Accent (violet, pour les éléments marquants), et Neutres (greys Tailwind, pour le texte et les arrière-plans). Trois couleurs sémantiques (success, warning, error) complètent l’ensemble pour les états d’interface.
Toutes ces couleurs sont définies dans src/styles/global.css via @theme. Les règles d’usage, de contraste et d’accessibilité sont détaillées en section 4.4.
Le gradient officiel
#2563eb→Accent 600 #7c3aedLe gradient de marque part de Primary 600 (bleu) vers Accent 600 (violet). Il est utilisé sur les textes mis en avant (avec bg-clip-text), les fonds décoratifs, et la cover du brandbook (version sombre : Primary 900 → Accent 800).
Primary — Bleu Gradly
Vue d’ensemble — toutes les nuances côte à côte, du plus clair au plus foncé.
Détail de chaque nuance avec token, usage et code hexadécimal :
--color-primary-50 Arrière-plan subtil --color-primary-100 Highlights discrets --color-primary-200 Bordures décoratives --color-primary-300 États désactivés --color-primary-400 Accent secondaire --color-primary-500 Teinte intermédiaire --color-primary-600 Couleur dominante (boutons CTA, liens) --color-primary-700 Hover boutons CTA --color-primary-800 Titres colorés --color-primary-900 Gradient cover brandbook Accent — Violet
--color-accent-500 Gradient hover --color-accent-600 Accent sur éléments marquants Neutres (Tailwind Gray)
Ces neutres sont fournis par Tailwind. Aucune customisation dans global.css. Utiliser les classes Tailwind text-gray-* et bg-gray-*.
gray-50 Arrière-plan alternatif gray-100 Cartes, hover background gray-200 Bordures, séparateurs gray-300 Bordures pointillées gray-500 Texte secondaire (minimum AA) gray-600 Texte standard sur fond clair gray-700 Sous-titres gray-900 Titres, texte principal Sémantiques
Trois couleurs réservées aux états d’interface. Ne pas les utiliser à des fins décoratives.
emerald-500 (Tailwind) Succès, confirmation amber-500 (Tailwind) Avertissement red-500 (Tailwind) Erreur, destructif La palette en situation
Plutôt que des swatches isolées, voici comment la palette s’assemble sur des composants concrets.
Bouton d’action principale
Fond primary-600, texte blanc, ombre teintée. Contraste 8:1 (AAA).
Fond primary-300, texte blanc : contraste insuffisant (1.8:1). Échec WCAG.
Titre avec emphase gradient
Bulletins en 3 clics
Gradient marque sur la partie accentuée, reste en gray-900.
Bulletins en 3 clics
Gradient sur toute la phrase : fatigue à la lecture, l’emphase perd son sens.
Carte de contenu
Suivi des compétences
Référentiels RNCP, blocs de compétences, évaluations par acquis.
Fond blanc, bordure gray-200, titre gray-900, body gray-600.
Suivi des compétences
Référentiels RNCP, blocs de compétences, évaluations par acquis.
Primary 600 en fond de carte de contenu : la couleur est réservée aux actions et accents, pas aux conteneurs.