Système de couleurs et palettes de marques

1) Pourquoi formaliser la couleur

• la reconnaissance de la marque et la cohérence visuelle,
• la lisibilité et l'accessibilité (WCAG),
• l'échelle des interfaces (thèmes, plates-formes, sites),
• expériences A/B prévisibles (contraste, CTR, erreurs).

2) Bases du système : modèles et métriques

OKLCH (recommandé) : Uniforme perceptuellement, il est commode de contrôler la luminosité 'L'et la saturation' C'tout en conservant la teinte 'H'.
Lab/LCH : convient également ; OKLCH est plus stable en perception.
sRVB : espace d'affichage final ; nous validons toujours les totaux en sRVB et en WCAG.
Contraste (WCAG 2. 2) : texte de base ≥ 4. 5:1, grande ≥ 3:1 ; avis critiques - viser l'AAA (7:1) lorsque cela est possible.

3) Couches du système : de la marque à la sémantique

1. Noyau de marque : 1-2 nuances de marque (+ accent de support).
2. Sémantique de l'interface : rôles ('primary', 'secondaire', 'success', 'warning', 'danger', 'info', 'neutre').
3. Échelles de tonalité : étapes sur la lumière (par exemple, 25/50/100...900).
4. Темы: `light` / `dark` (+ high-contrast, AMOLED).
5. États : 'default/hover/active/focus/disabled'.
6. Contexte : surfaces ('bg/base', 'bg/subtle', 'bg/elevated') et texte ('fg/primary', 'fg/secondaire', 'fg/muted').
7. Visualisation des données : palettes distinctes, discrètes et continues.

4) Noyau de marque : choix et limiteurs

Choisissez une principale nuance (Hue) et définissez ouvrier светлоту pour la marque dans les sujets clairs et sombres (souvent ' L≈0. 60–0. 70 'pour remplir les boutons dans la lumière et' L≈0. 70–0. 80 'pour le texte/icônes dans dark).
Limitez le chrome à « C' : les hauts » C'sont magnifiques sur les bannières, mais cassent la lisibilité dans l'IU - gardez 2 versions : « marketing » (saturé) et « produit » (plus discret).
Fixer les variatifs : base ('brand/primary'), alternative ('brand/alt') et support neutre ('neutral').

5) Échelles de tonalité (tonal scales)

• Pour OKLCH, déplacez 'L'avec les marches (par exemple, 0. 98→0. 90→0. 80→…→0. 18), et "C'réduire légèrement vers les bords de l'échelle pour éviter la" boue "dans la lumière et la" turbidité "dans l'obscurité.
• Fixez les points de contrôle : '50/100/300/500 (key )/700/900'.
• À chaque étape, vérifiez le contraste de la paire avec le fond de base et la couleur de texte attendue.

Exemple d'échelle de marque/primaire (OKLCH, approximativement)

brand. primary. 50  = oklch(0. 98 0. 03 230)
brand. primary. 100 = oklch(0. 94 0. 05 230)
brand. primary. 300 = oklch(0. 86 0. 08 230)
brand. primary. 500 = oklch(0. 74 0. 10,230) # keytone brand. primary. 700 = oklch(0. 56 0. 09 230)
brand. primary. 900 = oklch(0. 32 0. 07 230)

6) Rôles sémantiques et mapping

Partagez la marque et la sémantique : le « succès » n'est pas obligé d'être une marque verte.

role. primary. bg    -> brand. primary. 500 role. primary. text   -> fg. on-primary     # ≥ 4. 5-1 to the role. primary. bg role. success. bg    -> green. 500 role. warning. bg    -> amber. 500 role. danger. bg    -> red. 500 role. info. bg     -> blue. 500 role. neutral. bg    -> gray. 200/700 (light/dark)

Les textes 'on-' sont calculés automatiquement (cf. § 10).

7) Thèmes et surfaces clairs/sombres

light:
bg/base   = oklch(0. 98 0. 01 260)
bg/subtle  = oklch(0. 96 0. 01 260)
bg/elevated = oklch(0. 93 0. 01 260)
fg/primary  = oklch(0. 18 0. 03 260) # ≈7:1 к bg/base fg/secondary = oklch(0. 32 0. 03 260) # ≥4. 5:1 border    = oklch(0. 80 0. 02 260)

dark:
bg/base   = oklch(0. 16 0. 01 260)
bg/subtle  = oklch(0. 20 0. 01 260)
bg/elevated = oklch(0. 24 0. 01 260)
fg/primary  = oklch(0. 90 0. 02 260)
fg/secondary = oklch(0. 78 0. 02 260)
border    = oklch(0. 34 0. 02 260)

Gardez des objectifs de contraste égaux dans les deux thèmes ; évitez les blancs « aveugles » sur le noir pur - augmentez le fond 'L'à ~ 0. 16.

8) États et interactivité

button/primary:
default. bg = brand. primary. 500 hover. bg  = brand. primary. 500 with +ΔC(0. 01) -ΔL(0. 02)
active. bg = brand. primary. 700 focus. ring = brand. primary. 300 # ring contrast ≥ 3:1 to the disabled environment. bg= neutral. 200 (light) / neutral. 700 (dark)
text. on  = auto-contrast(default. bg)    # ≥ 4. 5:1

9) Responsabilité et WCAG

Texte de base et icônes dans les éléments de contrôle - ≥ 4. 5:1.
Notifications système clés (KYC/AML, 18 +, erreurs de paiement) - nous visons AAA (7:1).
L'état et les limites des champs ne sont pas inférieurs à 3:1.
Les liens ne se distinguent pas seulement par la couleur (soulignement/style focus).

10) Contraste automatique de texte ('on-')

1. Par OKLCH, déterminer la prédiction. le texte 'L _ on' est tel que '(L_text vs L_bg) ≥ 4. 5:1`.

2. Si le chrome est élevé, réduire 'C _ text' à 0. 01–0. 03.

3. Pour un thème sombre, soulevez « L _ on » de 0. 02–0. 04 pour compenser le glaire.

fg. on(colorX) = auto(colorX, targetContrast=4. 5)

11) Visualisation des données

Palettes catégoriques : 8-12 couleurs résistantes au daltonisme (éviter les paires rouge-vert sans signes alternatifs).
Continu : de 'bg/elevated' à l'accent avec contrôle du contraste des signatures.
Ajoutez des motifs/marqueurs pour distinguer sans couleur.

12) Contexte international (associations culturelles)

Tenez compte des connotations locales (par exemple, rouge - danger/attention ; or - gain/prix).
Pour iGaming : éviter les conflits « succès/danger » avec les accents de marque dans un seul écran ; l'iconographie et la signature sont plus importantes que la « luminosité ».

13) Intégration dans le système de conception

13. 1 Noms de tokens

color.{theme}.{role    surface    brand}.{state    step}
color examples. light. brand. primary. 500 color. dark. role. success. bg color. light. surface. bg. base color. light. fg. on-primary

13. 2 Tokens (JSON/Style Dictionary)

json
{
"color": {
"light": {
"surface": { "bg": { "base": "oklch(0. 98 0. 01 260)"} },
"brand":  { "primary": { "500": "oklch(0. 74 0. 10 230)" } },
"role":  { "primary": { "bg": "{color. light. brand. primary. 500}" },
"danger": { "bg": "oklch(0. 62 0. 12 25)" } },
"fg": { "primary": "oklch(0. 18 0. 03 260)",
"on-primary": "auto({color. light. role. primary. bg},4. 5)" }
}
}
}

13. 3 variables CSS (couche de thème)

css
:root[data-theme="light"] {
--bg-base: oklch(0. 98 0. 01 260);
--brand-primary-500: oklch(0. 74 0. 10 230);
--fg-primary: oklch(0. 18 0. 03 260);
--on-primary: color-contrast (var (--brand-primary-500)) ;/auto-fit/
}
[data-theme="dark"] {
--bg-base: oklch(0. 16 0. 01 260);
--brand-primary-500: oklch(0. 74 0. 10 230);
--fg-primary: oklch(0. 90 0. 02 260);
--on-primary: color-contrast(var(--brand-primary-500));
}

13. 4 Figma/documentation

Les composants n'utilisent que des jetons, HEX/SRGB direct interdit par les linters.
Dans la bibliothèque, la page Matrice de contraste est la table 'fg × bg' avec les coefficients réels.

14) Processus de contrôle de la qualité

Dans la conception : vérification du contraste sur les artbords (les deux modes), presets séparés pour le daltonisme.
Dans le code : les helpers unitaires calculent le contraste et tombent en cas de perturbations ; snepshots visuels pour écrans critiques.
Dans CI/CD : vérification de toutes les paires de tokens et d'états, rapport avec le composant, le sujet et la valeur réelle.

15) Spécificité iGaming

Promotions et tournois : utilisez l'overlay et la restriction 'C'sur les fonds pour éviter que le texte ne « coule ».
Notifications responsables (limites, 18 +, risques) - sincèrement AAA.
Métriques/tableaux : nombres et signes de changement (↑/↓) distinguez la forme et le contraste, et pas seulement la couleur.

16) Chèque de mise en œuvre

• Les nuances de marque et leurs échelles tonales (OKLCH) sont définies.
• Vous avez défini les rôles, les états et les surfaces pour deux thèmes.
• Auto-génération 'on-' avec contraste ciblé.
• Matrice 'fg × bg' et tests WCAG dans CI.
• Palettes séparées pour dataviz (avec prise en charge du daltonisme).
• Le linter des styles interdit les couleurs « crues ».
• Page Exclusions et causes dans la haydline.

17) Anti-modèles

Mélanger l'accent de marque avec « succès/erreur » dans un seul signal UX.
Ne compter que sur la saturation pour la hiérarchie.
Ne pas synchroniser light/dark (le contraste est parti dans un des thèmes).
HEX rigide sans tokens → dérive incontrôlée de l'interface.

Résumé succinct

Construisez une palette descendante : le noyau de marque → les rôles sémantiques → l'échelle de tonalité → le thème de l'état →. Travaillez dans OKLCH, fixez les jetons, automatisez les contrôles « on- » et WCAG. Conservez séparément les palettes de Dataviz. Cela donnera la cohérence de la marque, la lisibilité et l'évolutivité du produit.