Sistema di colori e tavolozza di marca

1) Perché formalizzare il colore

• riconoscibilità del marchio e consistenza visiva,
• leggibilità e disponibilità (WCAG),
• Scalabilità delle interfacce (argomenti, piattaforme, locali),
• esperimenti A/B prevedibili (contrasto, CTR, errori).

2) Basi del sistema: modelli e metriche

OKLCH (consigliato): percettibile, comodo per controllare la luminosità «L» e la saturazione «C» mantenendo la tonalità «H».
Anche Lab/LCH è idoneo; OKLCH è più stabile in termini di percezione.
sRGB - Spazio di visualizzazione finale i valori totali valgono sempre nel sRGB e nel WCAG.
Contrasto (WCAG 2. 2): testo base ≥ 4. 5:1, grande ≥ 3:1; notifiche critiche - Prendere di mira AAA (7:1) ove possibile.

3) Livelli di sistema: dal marchio alla semantica

1. Brand kernel: 1-2 tonalità (+ accento di supporto).
2. Semantica interfaccia: ruoli («primary», «secondary», «success», «warning», «denger», «info», «neutral»).
3. Scala dei toni: passi di luce (ad esempio, 25/50/100...900).
4. Темы: `light` / `dark` (+ high-contrast, AMOLED).
5. Stati: 'default/hover/active/focus/disabled'.
6. Contesto: superfici ('bg/basè,' bg/subtle ',' bg/elevated ') e testo (' fg/primary ',' fg/secondary ',' fg/muted ').
7. Visualizzazione dei dati: singole tavolozze discrete e continue.

4) Brand kernel: selezione e limitatori

Seleziona la tonalità principale (Hue) e definisci la luminosità di lavoro del marchio in argomenti chiari e scuri (spesso '). 60–0. 70 per riempire i pulsanti in light e L≈0. 70–0. 80 'per testo/icona in dark).
Limitare il cromo «C»: l'alto «C» è bello sui banner, ma interrompe la lettura in UI - conserva le versioni «marketing» (intenso) e «prodotto» (ritardato).
Fissare le variazioni di base ('brand/primary'), alternativa ('brand/alt') e neutrale ('neutral').

5) Scala dei toni (tonal scales)

• Per OKLCH, muovete le graduatorie «L» (ad esempio, 0. 98→0. 90→0. 80→…→0. 18) a «C» ridurlo leggermente ai bordi della scala per evitare la «sporcizia» nella luce e nella «turbolenza» nelle scure.
• Fissa i punti di controllo: '50/100/300/500 (key )/700/900'.
• In ogni fase, verificare il contrasto della coppia con lo sfondo di base e il colore del testo previsto.

Esempio di scala brand/primary (OKLCH, approssimativamente)

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) Ruoli semantici e mapping

Condividi il marchio e la semantica, il successo non deve essere un marchio verde.

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)

I testi «on-» vengono calcolati automaticamente (vedere l'articolo 10).

7) Temi e superfici chiari/scuri

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)

Mantenere gli stessi obiettivi di contrasto in entrambi i temi; Evitate i bianchi ciechi su nero puro - alzate l'L "sfondo fino a} 0. 16.

8) Stati e interattività

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à e WCAG

Il testo di base e le icone nei comandi sono ≥ 4. 5:1.
Notifiche di sistema chiave (KYC/AML, 18 +, errori di pagamento) - punta su AAA (7:1).
Gli stati e i bordi dei campi non sono inferiori a 3:1.
I collegamenti non sono solo un colore (sottolineare/focus-stile).

10) Controllo automatico del testo a contrasto ('on-')

1. Per OKLCH, definire un anticipo. il testo "L _ on" in modo che "(L _ text vs L _ bg) venga ≥ 4. 5:1`.

2. Se il cromo è alto, abbassare «C _ text» a 0. 01–0. 03.

3. Per il tema oscuro, alzare «L _ on» ancora di 0. 02–0. 04 per compensare il Glair.

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

11) Visualizzazione dei dati

Tavolozza categorica: 8-12 colori resistenti al daltonismo (evitare la coppia rosso-verde senza segni alternativi).
Continuo da «bg/elevated» a un accento con controllo del contrasto delle firme.
Aggiungi pattern/marcatori per la variabilità senza colore.

12) Contesto internazionale (associazioni culturali)

Tenere conto dei connotati locali (ad esempio, rosso - pericolo/attenzione; oro - vincita/premio).
Evitare conflitti di successo/pericolo con accenti di marca in uno schermo; iconografia e firma sono più importanti della luminosità.

13) Integrazione con il design

13. 1 Denominazione token

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 Token (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 variabili CSS (livello temi)

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/documentazione

I componenti utilizzano solo i token, le dirette HEX/SRGB sono proibite dai linter.
Nella libreria, pagina Matrice contrasto, tabella fg x bg con coefficienti effettivi.

14) Processi di controllo qualità

Nel design: controllo del contrasto sugli artboard (entrambe le modalità), preset separati per il daltonismo.
In codice: unit helpers calcolano il contrasto e cadono in caso di violazioni; Snappshot visivi per schermi critici.
In CI/CD: verifica di tutte le coppie di token e stati, report con il componente, il tema e il valore effettivo.

15) Specificità del iGaming

Promozioni e tornei: usate l'overlay e il vincolo «C» sui fondi per evitare che il testo affondi.
Notifiche responsabili (limiti, 18 +, rischi) - sinceramente AAA.
Metriche/tabelle: numeri e caratteri di modifica (↑/↓) distinguere tra forma e contrasto e non solo colore.

16) Assegno-foglio di implementazione

• Definite le tonalità del marchio e le relative tonalità (OKLCH).
• Sono stati definiti ruoli, stati e superfici per due argomenti.
• Generazione automatica'on- 'con contrasto di destinazione.
• Matrix «fg x bg» e test WCAG in CI.
• Singole tavolozze per il datawise (supportato dal daltonismo).
• Linter stile vieta i colori crudi.
• Pagina «Eccezioni e motivi» nella haydline.

17) Anti-pattern

Mescolare l'accento del marchio con «successo/errore» in un solo segnale UX.
Affidarsi solo alla saturazione per la gerarchia.
Non sincronizzare light/dark (il contrasto è partito in uno dei temi).
HEX senza token è una deriva incontrollata dell'interfaccia.

Breve riepilogo

Costruite una tavolozza dall'alto verso il basso: il marchio kernel ha i ruoli semantici della scala dei toni e dei temi dello stato . Utilizzare OKLCH, fissare i token, automatizzare i controlli on- e WCAG. Individuate le tavolozze per il datawise. Ciò darà consistenza al marchio, leggibilità e scalabilità al prodotto.