Paleta de colores
Colores principales, escalas, modo claro y oscuro, y reglas de uso del color institucional.
Colores principales
La paleta de colores institucional está compuesta por un conjunto de colores primarios, secundarios y de estado que deben aplicarse de manera consistente en todos los sistemas. Los colores exactos serán definidos por la Dirección de Comunicaciones en coordinación con la DTI.
| Rol de color | Nombre | Código HEX | Uso principal |
|---|---|---|---|
| Color primario | Azul Institucional | #0095F8 | Encabezados, botones principales, navbar |
| Color secundario | Azul Oscuro / Medio | #1976D2 | Elementos de apoyo, contenido informativo |
| Color auxiliar | Turquesa | #00ACC1 | Elementos visuales como gráficos o reportes |
| Color de fondo | Blanco / Gris Claro | #F5F5F5 | Fondo de pantallas, tarjetas, paneles |
| Color de texto | Negro / Gris Oscuro | #474747 | Texto de cuerpo y etiquetas |
| Color de error | Rojo | #E27474 | Mensajes de error y validaciones críticas |
| Color de éxito | Verde | #6AC86F | Confirmaciones, notificaciones positivas |
| Color de alerta | Mostaza / Destacado | #D6A40B | Advertencias, estados intermedios |
Escalas de color
Cada color principal debe contar con una escala de 5 tonos (100 al 500) que permita variaciones para fondos, estados y elementos secundarios. La escala se genera con base en el color base al valor 300, oscureciendo para valores superiores y aclarando para valores inferiores.
Escalas digitales de la DTI aplicadas a los colores de marca (el valor 300 es el color base):
Herramienta recomendada: usar extensiones de Figma.
Neutrales (superficies y texto)
Escala de grises para fondos, superficies, bordes y texto, de white a 900.
Colores semánticos
Cada estado se compone de un tono base (300), un fondo claro (100) y un texto de contraste (500). Nunca se usan con fines decorativos.
Modo claro y modo oscuro
Todos los sistemas nuevos deben contemplar soporte para modo oscuro (dark mode). Se deben definir variables semánticas de color que cambien según el modo activo:
--color-surface: fondo principal (blanco en light, gris oscuro en dark).--color-on-surface: texto sobre surface.--color-primary: color principal de la institución.--color-on-primary: texto sobre elementos de color primario.--color-background: fondo de página.--color-error,--color-success,--color-warning: estados.
Reglas de uso del color
- El color institucional primario no puede reemplazarse por otro color en elementos de navegación principal.
- No comunicar información exclusivamente mediante color; acompañar siempre con texto o ícono.
- Los colores de estado (error, éxito, advertencia) pueden usarse para presentar estados importantes dentro del contexto del sistema desarrollado, pero no pueden usarse con fines decorativos.
- Los fondos de pantalla o imágenes decorativas no deben interferir con la legibilidad del contenido.