Fondations
Couleurs
Palette MC
Valeurs définitives issues du Brand Framework 2026. Ne jamais approximer ces couleurs.
mc-green --color-mc-green #94ba92
mc-green-dark --color-mc-green-dark #5d7261
mc-green-light --color-mc-green-light oklch(55% 0.06 145)
mc-green-100 --color-mc-green-100 #d4e9d4
mc-green-50 --color-mc-green-50 #f0f7f0
mc-navy --color-mc-navy #323e48
mc-navy-700 --color-mc-navy-700 oklch(40% 0.03 240)
mc-navy-100 --color-mc-navy-100 #d0d6dc
mc-navy-50 --color-mc-navy-50 #f0f2f4
mc-cream --color-mc-cream #efe6e6
| Token | Classe utilitaire | Valeur | Usage |
|---|---|---|---|
| --color-mc-green | bg-mc-green / text-mc-green | #94ba92 | CTA principal, accents, badges validés |
| --color-mc-green-dark | bg-mc-green-dark / text-mc-green-dark | #5d7261 | Hover sur mc-green, texte sur fond vert clair |
| --color-mc-green-light | bg-mc-green-light / text-mc-green-light | oklch(55% 0.06 145) | Éléments graphiques, illustrations |
| --color-mc-green-100 | bg-mc-green-100 | #d4e9d4 | Fond des badges validés, chips |
| --color-mc-green-50 | bg-mc-green-50 | #f0f7f0 | Hover rows dans les tableaux, surbrillance légère |
| --color-mc-navy | bg-mc-navy / text-mc-navy | #323e48 | Texte principal, sidebar, fonds institutionnels |
| --color-mc-navy-700 | bg-mc-navy-700 / text-mc-navy-700 | oklch(40% 0.03 240) | Texte secondaire sur fonds sombres |
| --color-mc-navy-100 | bg-mc-navy-100 / border-mc-navy-100 | #d0d6dc | Bordures, dividers, séparateurs |
| --color-mc-navy-50 | bg-mc-navy-50 | #f0f2f4 | Hover ghost buttons, fonds très légers |
| --color-mc-cream | bg-mc-cream | #efe6e6 | Fonds doux, sections secondaires, email bg |
✓ mc-green est la couleur CTA principale — maximum 1 bouton primary par vue
✓ mc-navy pour tous les textes, headers et fonds sidebar
✓ mc-cream uniquement pour les fonds de sections secondaires
✗ Ne jamais utiliser mc-green-50 comme couleur de texte
✗ Ne jamais approximer ces valeurs — toujours utiliser les tokens
Couleurs DaisyUI sémantiques
Les tokens DaisyUI sont mappés sur la palette MC dans le thème "light". Utiliser ces classes pour les composants DaisyUI afin de rester cohérent avec le thème.
primary bg-primary = mc-green
neutral bg-neutral = mc-navy
base-100 bg-base-100 white
base-200 bg-base-200 near-white
base-300 bg-base-300 light gray
success bg-success alert-success
error bg-error alert-error
warning bg-warning alert-warning
info bg-info alert-info
| Token DaisyUI | Mappe sur | Usage |
|---|---|---|
| primary / bg-primary | mc-green | Composants DaisyUI primary (btn-primary, badge-primary…) |
| neutral / bg-neutral | mc-navy | Composants DaisyUI neutral |
| base-100 | white | Fond des cards, modals, content area |
| base-200 | near-white (#f6f7f9) | Fond du body, thead des tables |
| base-300 | light gray (#edeef1) | Bordures, dividers via DaisyUI |
| success | vert sémantique | alert-success, badge-success |
| error | rouge sémantique | alert-error, badge-error, input-error |
| warning | amber sémantique | alert-warning, badge-warning |
| info | bleu sémantique | alert-info, badge-info |
✓ Utiliser les tokens DaisyUI (bg-primary, bg-neutral) pour les composants DaisyUI
✓ Utiliser les tokens MC (bg-mc-green, text-mc-navy) pour le code custom
✗ Ne pas mixer bg-primary et bg-mc-green dans le même composant — choisir une convention
Contraste & accessibilité
Ratios WCAG 2.1. AA exige 4.5:1 pour le texte normal, 3:1 pour le texte large (+18px ou +14px bold). AAA exige 7:1.
mc-navy sur blanc
Texte courant, descriptions, données dans les tables.
8.6:1
AA AAA
Blanc sur mc-navy
Sidebar, headers sombres, badges dark.
8.6:1
AA AAA
Blanc sur mc-green-dark
Bouton hover, badges completed.
4.6:1
AA AAA ✗
mc-navy sur mc-green
Uniquement pour texte large (+18px ou +14px bold).
3.9:1
AA Large AA ✗
mc-navy sur mc-cream
Sections secondaires, fonds doux.
6.4:1
AA AAA ✗
Blanc sur mc-green — EVITER
Contraste insuffisant pour tout texte courant.
2.7:1
AA ✗ AAA ✗
✓ Blanc sur mc-navy et mc-navy sur blanc — combinaisons AAA, toujours sûres
✓ mc-navy sur mc-green — uniquement pour texte large (titres >18px ou bold >14px)
✗ Blanc sur mc-green (#94ba92) interdit pour du texte courant — ratio 2.7:1 insuffisant
✗ Toujours vérifier une nouvelle combinaison sur webaim.org/resources/contrastchecker avant usage