Sistema de color y paletas de marca

1) Por qué formalizar el color

• reconocimiento de marca y consistencia visual,
• legibilidad y accesibilidad (WCAG),
• escala de interfaces (temas, plataformas, localies),
• experimentos predecibles A/B (contraste, CTR, errores).

2) Bases del sistema: modelos y métricas

OKLCH (recomendado): es perceptualmente uniforme, es conveniente controlar la luminosidad de 'L' y la saturación de 'C' mientras se mantiene el tono de' H '.
Lab/LCH: también es útil; OKLCH es más estable en la percepción.
sRGB: espacio de visualización final; los totales se validan siempre en sRGB y por WCAG.
Contraste (WCAG 2. 2): texto básico ≥ 4. 5:1, gran ≥ 3:1; notificaciones críticas - apuntar a AAA (7:1) siempre que sea posible.

3) Capas del sistema: de la marca a la semántica

1. Núcleo de marca: 1-2 tonos de marca (+ acento de soporte).
2. Semántica de interfaz: roles ('primary', 'secondary', 'success',' warning ',' danger ',' info ',' neutral ').
3. Escalas de tonos: pasos de luz (por ejemplo, 25/50/100...900).
4. Темы: `light` / `dark` (+ high-contrast, AMOLED).
5. Estados: 'default/hover/active/focus/disabled'.
6. Contexto: superficies ('bg/base', 'bg/subtle', 'bg/elevated') y texto ('fg/primary', 'fg/secondary', 'fg/muted').
7. Visualización de datos: paletas individuales discretas y continuas.

4) Núcleo de marca: opciones y limitadores

Seleccione el tono principal (Hue) y defina la luz de trabajo para la marca en temas claros y oscuros (a menudo 'L≈0. 60–0. 70 'para rellenar botones en luz y' L≈0. 70–0. 80 'para texto/iconos en dark).
Limite el cromo 'C': las altas' C' son hermosas en las pancartas, pero rompen la legibilidad en IU - mantenga 2 versiones: «marketing» (saturado) y «comestible» (más discreto).
Fije las variaciones: principal ('brand/primary'), alternativa ('brand/alt') y soporte neutro (' neutral ').

5) Escalas tonales (escala tonal)

• Para OKLCH, mueva los pasos 'L' (por ejemplo, 0. 98→0. 90→0. 80→…→0. 18), y 'C' reducir ligeramente a los bordes de la escala para evitar «suciedad» en claros y «turbidez» en oscuros.
• Fije los puntos de control: '50/100/300/500 (clave )/700/900'.
• En cada paso, compruebe el contraste de la pareja con el fondo básico y con el color de texto esperado.

Ejemplo de escala brand/primary (OKLCH, aproximado)

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) Roles semánticos y mapping

Comparte marca y semántica: el «éxito» no está obligado a ser marca-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)

Los textos 'on-' se calculan automáticamente (ver § 10).

7) Tema ligero/oscuro y superficies

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)

Mantener objetivos de contraste iguales en ambos temas; evitar los blancos «ciegos» en negro puro - elevar el fondo 'L' a ~ 0. 16.

8) Estados y interactividad

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) Responsabilidad y WCAG

El texto básico y los iconos de los elementos de control son ≥ 4. 5:1.
Notificaciones clave del sistema (KYC/AML, 18 +, errores de pago) - Apuntamos a AAA (7:1).
Los estados y límites de los campos no son inferiores a 3:1.
Las referencias no solo se distinguen por el color (estilo subrayado/focus).

10) Selección automática de texto de contraste ('on-')

1. Por OKLCH determinar el predlag. el texto 'L _ on' para que '(L_text vs L_bg) ≥ 4. 5:1`.

2. Si el cromo es alto, reducir 'C _ text' a 0. 01–0. 03.

3. Para un tema oscuro, elevar 'L _ on' a otro 0. 02–0. 04, para compensar el gleir.

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

11) Visualización de datos

Paletas categóricas: 8-12 colores resistentes al daltonismo (evitar pares «rojo-verde» sin rasgos alternativos).
Continuo: de 'bg/elevated' al acento con control de contraste de firmas.
Agregue patrones/marcadores para distinguir sin color.

12) Contexto internacional (asociaciones culturales)

Tenga en cuenta las connotaciones locales (por ejemplo, rojo - peligro/atención; oro - ganancia/premio).
Para iGaming: evite conflictos «éxito/peligro» con acentos de marca en la misma pantalla; la iconografía y las firmas son más importantes que el «brillo».

13) Integración en el sistema de diseño

13. 1 Nombres 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 (capa de temas)

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/Documentación

Los componentes sólo utilizan tokens, los linters prohíben los HEX/SRGB directos.
En la biblioteca se encuentra la página Matriz de contraste: la tabla 'fg × bg' con los coeficientes reales.

14) Procesos de control de calidad

En diseño: comprobación del contraste en los artboards (ambos modos), presets separados para el daltonismo.
En el código: los yunit helpers calculan el contraste y caen en las anomalías; Aperitivos visuales para pantallas críticas.
En CI/CD: verificación de todos los pares de tokens y estados, informe con componente, tema y valor real.

15) Especificidad de iGaming

Promociones y torneos: utiliza el sobreesfuerzo y la restricción 'C' en los fondos para que el texto no se «hunda».
Notificaciones responsables (límites, 18 +, riesgos) - AAA sinceramente.
Métricas/Tablas: los números y signos de cambio (↑/↓) difieren en forma y contraste, no sólo en color.

16) Lista de verificación de implementación

• Se definen los tonos de marca y sus escalas tonales (OKLCH).
• Se han especificado roles, estados y superficies para dos temas.
• Autogeneración 'on-' con contraste objetivo.
• Matriz 'fg × bg' y pruebas WCAG en CI.
• Paletas individuales para datavies (con soporte de daltonismo).
• El linter de estilos prohíbe los colores «crudos».
• Página «Excepciones y razones» en la gaidline.

17) Anti-patrones

Mezclar acento de marca con «éxito/error» en una sola señal UX.
Confiar sólo en la saturación para la jerarquía.
No sincronizar luz/oscuridad (el contraste «se fue» en uno de los temas).
Un HEX duro sin tokens → una deriva de interfaz no controlada.

Resumen breve

Construye una paleta de arriba abajo: el núcleo de marca → los roles semánticos → la escala de tonos → el tema del estado →. Trabaje en OKLCH, asegure los tokens, automatice las verificaciones 'on-' y WCAG. Mantenga las paletas por separado para datavies. Esto dará consistencia a la marca, legibilidad y escalabilidad del producto.