Sistem de culori și palete de marcă

1) De ce să formalizați culoarea

• conștientizarea mărcii și consistența vizuală,
• lizibilitate și disponibilitate (WCAG)
• interfețe de scalare (teme, platforme, localizări)
• experimente A/B previzibile (contrast, CTR, erori).

2) Fundații de sistem: modele și metrici

OKLCH (recomandat): perceptual uniform, este convenabil să controlați ușurința 'L' și saturația 'C' în timp ce mențineți nuanța 'H'.
Lab/LCH: de asemenea, se potrivesc; OKLCH este mai stabil în percepție.
sRGB: spațiu de afișare finit; totalurile sunt întotdeauna validate în sRGB și WCAG.
Contrast (WCAG 2. 2): text de bază ≥ 4. 5:1, ≥ mare 3:1; notificări critice - scopul pentru AAA (7:1), acolo unde este posibil.

3) Straturi ale sistemului: de la marcă la semantică

1. Nucleul mărcii: 1-2 nuanțe de marcă (+ accent de susținere).
2. Semantica interfeței: roluri („primar”, „secundar”, „succes”, „avertizare”, „pericol”, „info”, „neutru”).
3. Cantare ton: trepte luminozitate (ex. 25/50/100...900).
4. Темы: „lumină ”/„ întuneric” (+ contrast ridicat, AMOLED).
5. State: 'default/hover/active/focus/disabled'.
6. Context: suprafeţe ('bg/base', 'bg/subtile', 'bg/elevated') şi text ('fg/primary', 'fg/secundar', 'fg/muted').
7. Vizualizarea datelor: palete separate discrete și continue.

4) Brand core: alegeri și restricții

Selectați Hue și definiți ușurința de lucru pentru brand în teme ușoare și întunecate (adesea "L≈0. 60–0. 70 'pentru umplerea butoanelor în lumină şi' L≈0. 70–0. 80 'pentru text/icoane în întuneric).
Limit chrome 'C': high 'C' este frumos pe bannere, dar rupe lizibilitatea în UI - păstrați 2 versiuni: „marketing” (bogat) și „băcănie” (mai reținut).
Fixați variabilele: principal („marcă/primar”), alternativ („marcă/alt”) și suport neutru („neutru”).

5) Cantare de tonuri

• Pentru OKLCH, mutaţi paşii 'L' (ex. 0. 98→0. 90→0. 80→…→0. 18), iar „C” reduce ușor la marginile scării pentru a evita „murdăria” în lumină și „turbiditatea” în întuneric.
• Fixați punctele de control: „50/100/300/500 (cheie )/700/900”.
• La fiecare pas, verificați contrastul perechii cu fundalul de bază și cu culoarea textului așteptat.

Exemplu de marcă/scară primară (OKLCH, aproximativă)

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) Roluri semantice și cartografiere

Brand separat și semantică: „succesul” nu trebuie să fie verde de marcă.

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)

Textele „on” sunt calculate automat (a se vedea § 10).

7) Teme și suprafețe luminoase/întunecate

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)

Mențineți obiective de contrast egale în ambele teme; evita „orbitor” alb pe negru pur - ridica 'L' background la ~ 0. 16.

8) Stări și interactivitate

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) Răspunderea și WCAG

Textul de bază și pictogramele din controale sunt ≥ 4. 5:1.
Notificările cheie ale sistemului (KYC/AML, 18 +, erori de plată) - vizează AAA (7:1).
Statele de câmp și limitele - cel puțin 3:1.
Distinge link-uri nu numai prin culoare (subliniere/focus-stil).

10) Text de contrast automat ('on-')

1. Potrivit OKLCH, determina predlag. text 'L _ on' so that '(L_text vs L_bg) ≥ 4. 5:1`.

2. Dacă crom este ridicat, mai mic 'C _ text' la 0. 01–0. 03.

3. Pentru o temă întunecată, ridica 'L _ on' un alt 0. 02–0. 04 pentru a compensa strălucirea.

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

11) Vizualizarea datelor

Palete categorice: 8-12 culori rezistente la orbirea culorilor (evitați perechile roșu-verde fără semne alternative).
Continuu: de la 'bg/elevated' la accent cu control de contrast al semnăturilor.
Adăugați modele/markeri pentru discernământ fără culoare.

12) Context internațional (asociații culturale)

Luați în considerare conotațiile locale (ex. roșu - pericol/atenție; aur - câștig/premiu).
Pentru iGaming: Evitați conflictele de succes/pericol cu accente de marcă într-un singur ecran; iconografia și semnătura sunt mai importante decât „luminozitatea”.

13) Integrarea în sistemul de proiectare

13. 1 Numirea jetoanelor

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 Jetoane (JSON/Dicționar de stil)

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 variabile CSS (strat tematic)

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/documentație

Componentele folosesc numai jetoane, direct HEX/SRGB sunt interzise de lintere.
În bibliotecă - pagina „Matrice de contrast”: tabelul „fg × bg” cu coeficienți reali.

14) Procesele de control al calității

În design: contrast check on artboards (ambele moduri), presetări separate pentru orbirea culorilor.
În cod: ajutoarele unitare calculează contrastul și cad în încălcări; instantanee vizuale pentru ecrane critice.
În CI/CD: verificarea tuturor perechilor de jetoane și stări, raport cu componentă, temă și valoare reală.

15) Specificul iGaming

Promoții și turnee: Utilizați suprapunerea și constrângerea „C” pe fundaluri pentru a împiedica textul să se scufunde.
Notificări responsabile (limite, 18 +, riscuri) - sincer AAA.
Metrici/tabele: Distinge între numere și semne de modificări (↑/↓) prin formă și contrast, nu doar culoare.

16) Lista de verificare a implementării

• Nuanțele de marcă și cântarele lor tonale (OKLCH) sunt definite.
• Rolurile, stările și suprafețele sunt stabilite pentru cele două teme.
• Auto-generație „on-” cu contrast țintă.
• 'fg × bg' matrice și teste WCAG în CI.
• Palete individuale pentru dataviz (cu suport pentru orbirea culorilor).
• Stilurile linter interzic culorile „crude”.
• Excepții și motive pagina în ghid.

17) Anti-modele

Se amestecă accentul de brand cu succes/eroare într-un semnal UX.
Bazați-vă doar pe saturație pentru ierarhie.
Nu sincronizați lumina/întunericul (contrastul „stânga” într-una dintre teme).
Hard HEX fără token-uri → derivă interfață necontrolată.

Scurt rezumat

Construiți o paletă de sus în jos: bază de brand → roluri semantice → cântare ton → teme → stări. Lucrați în OKLCH, jetoane PIN, verificări automate 'on-' și WCAG. Separat, introduceți paletele pentru dataviz. Acest lucru va oferi consistență de brand, lizibilitate și scalabilitate produsului.