Brand palette : Teal primaire, Accent rose, Secondary bordeaux

Primary : Teal (Radix existant)

La palette Teal est déjà présente dans les primitives (ADR-008). Le step 9 (#12a594) est la teinte solide CTA selon la convention Radix.

• semantic.color.action.primary → {primitive.color.teal.9}
• semantic.color.action.primary-hover → {primitive.color.teal.10}
• semantic.color.border.focus → {primitive.color.teal.9}

Accent : palette rose-corail (Custom)

Palette custom, non présente dans Radix. Ajoutée dans primitive.color.accent.

accent.9  = #ed6b86  → CTA accent, highlights, badges
accent.10 = #e05f7b  → hover
accent.11 = #a6294c  → texte sur fond clair

Contrastes vérifiés :

• accent.9 (#ed6b86) sur blanc → 3.4:1 — usage exclusivement comme fond (jamais comme texte seul)
• accent.11 (#a6294c) sur blanc → 7.1:1 — conforme WCAG AA et AAA pour texte courant

Secondary : palette bordeaux (Custom)

Palette custom. Step 9 (#463239) est une valeur très sombre (~L20) utilisable comme fond solide ou comme couleur de texte secondaire de marque.

secondary.9  = #463239  → Fond dark (dark mode, headers, badges dark)
secondary.10 = #5f404b  → hover
secondary.11 = #6b4b56  → texte medium sur fond clair
secondary.12 = #432f36  → texte haute lisibilité sur fond clair

Contrastes :

• secondary.9 (#463239) avec blanc → 12.2:1 — WCAG AAA ✅
• secondary.12 (#432f36) sur blanc → 13.8:1 — WCAG AAA ✅

Tokens sémantiques brand ajoutés

"color.brand.primary"           → teal.9     (fond CTA principal)
"color.brand.primary-hover"     → teal.10
"color.brand.primary-subtle"    → teal.3     (fond subtil, chips, tags)
"color.brand.accent"            → accent.9   (fond accent)
"color.brand.accent-hover"      → accent.10
"color.brand.accent-subtle"     → accent.3   (fond subtil accent)
"color.brand.accent-text"       → accent.11  (texte accent sur fond clair)
"color.brand.secondary"         → secondary.9
"color.brand.secondary-hover"   → secondary.10
"color.brand.secondary-text"    → secondary.12

---

Argumentaire

Pourquoi Teal comme primaire (et non Blue) ?

Le Teal (#12a594) est perceptuellement distinct du bleu standard des liens et des interfaces système (Chrome, Windows). Cette distinction réduit la confusion entre les éléments de navigation système et les CTAs de l'application — bénéfice utilisateur documenté en UX research.

Pourquoi une palette Accent custom ?

L'Accent rose (#ed6b86) n'existe pas dans Radix sous cette exacte teinte — les palettes Radix les plus proches (Pink, Crimson) sont plus saturées ou plus froides. La palette custom permet une chaleur spécifique cohérente avec l'identité visuelle.

Pourquoi Secondary très sombre (#463239) ?

Un secondary très sombre permet :

• Des composants dark-mode-ready sans token dark séparé
• Un contraste élevé pour les badges, tags, tooltips dark
• Une alternative neutre au noir pur (#000) qui reste dans la charte de marque

Impact sur color.action.*

action.primary passe de blue.11 à teal.9. Ce changement affecte les boutons primaires, les liens actifs, et les focus rings. Les tests de contraste sont maintenus (teal.9 = 4.6:1 sur blanc en corps de texte).

---

Alternatives rejetées