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) # ключевой тон 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 к 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 # контраст кольца ≥ 3:1 к окружению disabled.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.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)); / автоподбор /
}
[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.