Color
Un solo azul de marca, grises para estructurar y colores de estado con significado fijo. Todos los valores salen de los tokens del sistema.
Marca
El primario es el único azul de marca. Los estados de hover y pressed se obtienen con una capa negra, no con otro azul. El secundario es un acento para texto grande, nunca para links.
Neutros
La jerarquía se construye con grises: fondo suave, superficies blancas, bordes y tres niveles de texto.
Estados
Cada estado tiene cuatro usos. El tono 500 es solo para iconos y puntos. El suave es fondo de badges y avisos. El tono 900 es el texto sobre el suave. El strong del éxito es el fondo del botón success.
Éxito
Terminado- 500--success#12B669
- Suave--success-soft#ECFDF3
- Texto 900--success-text#0B4F2C
- Strong--success-strong#0B4F2C
- Mid--success-mid#158A4D
Advertencia
En proceso- 500--warning#F79009
- Suave--warning-soft#FFFAEB
- Texto 900--warning-text#6E3B00
Peligro
No entregado- 500--danger#F04437
- Suave--danger-soft#FEF3F2
- Texto 900--danger-text#7F1D1D
- Destructivo--destructive#D92D20
Información
Automático- 500--info#2E90FA
- Suave--info-soft#EFF8FF
- Texto 900--info-text#0D47A1
Inteligencia artificial
El violeta tiene un solo significado: esto lo produjo un modelo o esto es un control de demo. No se usa para decorar, ni como color de marca, ni en ningún otro estado.
Va como texto y borde sobre blanco, nunca como fondo violeta detrás de texto violeta.
Auxiliares
Vienen del manual de identidad y son decorativos: ilustración, avatares de producto, gráficas y acentos de la vista cliente o de cultura. No sustituyen a los colores de estado y nunca van detrás de texto.
Degradados
Solo en la vista cliente, heroes y onboarding. Nunca detrás de texto pequeño.
Accesibilidad
Los contrastes se calculan en vivo con la fórmula de WCAG 2.x a partir de los tokens. Cuando un par no cumple, se restringe el uso; el color de marca no se toca.
| Par | Muestra | Contraste | Regla | Nivel |
|---|---|---|---|---|
| Primario sobre blanco | Aa | 8.20:1 | Links, texto y CTA | AAA |
| Blanco sobre primario | Aa | 8.20:1 | Botón primario | AAA |
| Títulos cliente sobre blanco | Aa | 15.62:1 | Títulos de vista cliente | AAA |
| Texto principal sobre blanco | Aa | 14.54:1 | Texto principal | AAA |
| Párrafos sobre blanco | Aa | 7.36:1 | Párrafos | AAA |
| Texto secundario sobre blanco | Aa | 4.83:1 | Mínimo para texto secundario | AA |
| Secundario sobre blanco | Aa | 4.44:1 | Solo texto ≥24 px o ≥19 px Bold. Los links van en primario. | Restringido |
| Placeholder sobre blanco | Aa | 2.51:1 | Solo placeholder y deshabilitado, nunca información | Restringido |
| Estados 500 sobre blanco | AaAaAaAa | 2.3–3.8:1 | Solo iconos y puntos, con forma o texto al lado | Restringido |
| Estados 700 sobre 50 | AaAa | 4.2–4.4:1 | No para texto de badge | Restringido |
| Estados 900 sobre 50 | AaAaAaAa | 8.0–9.2:1 | Texto de badges de estado | AAA |
| Blanco sobre éxito 500 | Aa | 2.65:1 | Nunca como fondo de botón ni de texto | Restringido |
| Blanco sobre success-mid | Aa | 4.40:1 | Solo en botón L con texto de 18 px Bold | Restringido |
| Blanco sobre success-strong | Aa | 9.68:1 | Fondo del botón success | AAA |
| Blanco sobre destructivo | Aa | 4.83:1 | Botón destructivo | AA |
| Violeta IA sobre blanco | Aa | 4.51:1 | Justo: badge IA en outline sobre blanco | AA |
| Violeta IA sobre violeta suave | Aa | 3.96:1 | Nunca fondo violeta detrás de texto violeta | Restringido |
Los estados 700 se miden con los tonos que existen en los tokens: --success-mid y --destructive. El violeta suave es el violeta IA al 10 % sobre blanco.