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