Our Insights About Modern Technology

Colores

Este módulo define los tokens de color para cada uno de nuestros servicios (Medellín, Cali, Manizales).

La adopción de estos tokens asegura que, independientemente del servicio, el comportamiento visual de los componentes (botones, enlaces, estados, etc) sea coherente y cumpla con nuestros estándares de accesibilidad.

Medellín

TokenNivelValorWCAGEjemplo
primary-lightLight#00B3FF2.36 / 8.89 (AAA)
primaryPrimary#009CDE3.08 / 6.81 (AAA)
primary-darkDark#0081B84.35 (AA) / 4.83 (AAA)
secondary-lightLight#38D6801.89 / 11.10 (AAA)
secondarySecondary#00CB5C2.17 / 9.70 (AAA)
secondary-darkDark#00A64B3.20 (AA) / 6.56 (AAA)
tertiary-lightLight#B693C72.63 / 7.99 (AAA)
tertiary-mediumTertiary#9354B14.14 (AA) / 5.07 (AAA)
tertiary-darkDark#733A8E7.71 (AAA) / 2.72

Cali

TokenNivelValorWCAGEjemplo
primary-lightLight#4E7CD74.05 (AA) / 5.19 (AAA)
primaryPrimary#3366CC5.37 (AAA) / 3.91 (AA)
primary-darkDark#2856B16.87 (AAA) / 3.06
secondary-lightLight#2664996.24 (AAA) / 3.37 (AA)
secondarySecondary#0048849.29 (AAA) / 2.26
secondary-darkDark#003E7310.84 (AAA) / 1.94
tertiary-lightLight#E0E0E01.23 / 17.14 (AAA)
tertiaryTertiary#C4C4C41.68 / 12.48 (AAA)
tertiary-darkDark#9E9E9E2.46 / 8.53 (AAA)

Manizales

TokenNivelValorWCAGEjemplo
primary-lightLight#405D756.91 (AAA) / 3.04
primaryPrimary#10355312.68 (AAA) / 1.66
primary-darkDark#0E2D4714.14 (AAA) / 1.49
secondary-lightLight#5A91C03.36 (AA) / 6.25 (AAA)
secondarySecondary#3176B04.83 (AA) / 4.35 (AA)
secondary-darkDark#2A64966.25 (AAA) / 3.36 (AA)
tertiary-lightLight#E0E0E01.23 / 17.14 (AAA)
tertiaryTertiary#C4C4C41.68 / 12.48 (AAA)
tertiary-darkDark#9E9E9E2.46 / 8.53 (AAA)

Buenas prácticas

  • Contraste: Al hacer uso de los colores, se debe verificar siempre el valor WCAG correspondiente. Se establece el nivel AA como el estándar mínimo aceptable, mientras que el nivel AAA se recomienda para garantizar una accesibilidad óptima.
  • Consistencia: Se debe evitar el uso de valores Hex directos en el código. Es obligatorio utilizar siempre los tokens definidos (ej. var(--primary-dark-medellin)). Esta práctica permite que, ante cualquier actualización futura en la paleta de colores, el sistema se actualice de manera global y centralizada, eliminando el riesgo de errores de inconsistencia.
Colores - PreviousContenidoNext - ColoresLogos y manuales