Color
Índigo como acento, CTA neutros y colores semánticos con significado estable.
Tres funciones distintas
La tinta y el papel sostienen la identidad. El índigo orienta. Los semánticos explican estados. No intercambiar esas funciones.
| Rol | Claro | Oscuro | Uso |
|---|---|---|---|
| Acento | #4D4BE8 | #B3ABFF | Foco, selección secundaria, progreso, serie elegida |
| Acción primaria marketing | #242229 / #FDFCFE | #ECE8F2 / #242229 | Fondo / texto del CTA editorial |
| Acción primaria app | #242229 / #FDFCFE | #E6EAF0 / #20252D | Fondo / texto del CTA operativo |
| Lienzo marketing | #FAF9FC | #141318 | Fondo de lectura editorial |
| Lienzo app | #F8F9FA | #101114 | Fondo de trabajo |
| Navbar y sidebar app | #FCFDFE | #0C0D10 | Navegación, más clara u oscura que el lienzo |
| Superficie elevada marketing | #FDFCFE | #1C1B22 | Contenido editorial |
| Superficie elevada app | #FEFEFF | #1A1C20 | Paneles y contenido operativo |
| Texto marketing | #242229 | #F0EDF5 | Lectura editorial |
| Texto app | #242229 | #E8ECF2 | Lectura principal |
| Texto secundario marketing | #65616F | #B7B1C2 | Contexto editorial |
| Texto secundario app | #535A64 | #C6CDD7 | Ayuda y contexto operativo |
Acciones
Usar --lg-action-bg, --lg-action-text y --lg-action-hover. --lg-invert-* conserva la misma función para selección principal y compatibilidad. El token histórico accent-solid sigue siendo índigo; desde v6 no debe alimentar botones primarios. El adaptador HeroUI asigna su --accent a la acción neutra y --focus al índigo por separado.
Una acción secundaria usa borde o superficie suave. No darle el mismo peso que a la principal. Las acciones destructivas usan danger-solid y danger-contrast en su confirmación final; no usar el pastel de error como relleno sólido.
Semánticos
| Estado | Texto claro / fondo claro | Texto oscuro / fondo oscuro | Significado |
|---|---|---|---|
| Éxito | #286344 / #E8F3ED | #91D4AD / #21372C | Operación completada y verificada |
| Advertencia | #865016 / #F9EFDF | #E9BF7D / #3C3021 | Requiere atención; puede permitir continuar |
| Error | #A52C36 / #FBE9EC | #FF9EA7 / #42272E | Fallo o dato inválido |
| Información | #395A78 / #EAF0F6 | #ABCBE6 / #253342 | Cambio informativo, sin urgencia implícita |
Expediente verificado
Todos los documentos han sido validados correctamente.Falta información
Completa los datos de facturación para continuar.Acción rechazada
La firma no pudo verificarse. Intenta de nuevo.No todo importe negativo es un error ni toda variación positiva un éxito. Una factura pendiente puede ser información; una vencida, advertencia. Los colores siempre se acompañan de título, etiqueta o icono. Ver Notificaciones y Finanzas.
Enlaces, selección y gráficos
Navegación y selección principal permanecen neutras. Los enlaces dentro de texto llevan subrayado visible; los enlaces independientes pueden usar chevrón. El foco usa índigo en todos los temas. Una sola serie destacada en índigo, series de referencia neutras con etiquetas y trazos distinguibles.
Violeta e iris quedan en el archivo de exploración, no en la paleta vigente ni como variantes entre proyectos. En marketing el índigo puede ocupar un motivo o bloque editorial; el CTA continúa neutro. En app evitar grandes lavados de color.