Colores
El color es un componente fundamental en el sistema de diseño. No solo define la identidad visual, sino que también guía la atención, comunica estados y mejora la comprensión de la interfaz.
Esta sección establece cómo se seleccionan, organizan y utilizan los colores dentro del sistema, asegurando consistencia, accesibilidad y escalabilidad en todos los productos digitales.
Arquitectura del color
Para facilitar su uso y mantenimiento, el color se estructura en distintos niveles, desde valores base hasta aplicaciones funcionales. Esta organización permite entender no solo qué colores existen, sino también cómo y cuándo deben utilizarse.
A continuación se presentan los colores del sistema que definen la identidad y los roles funcionales, la escala de grises como base neutral del sistema, y finalmente los tokens que traducen estas decisiones en variables reutilizables para diseño y desarrollo.
Colores del sistema
Los colores del sistema se utilizan para comunicar estados y dar feedback dentro de la interfaz. Su función es transmitir información de forma rápida y coherente en todos sus productos.
Escala de grises (Surface Front Office)
La escala monocromática es la base neutral del sistema.
Incluye los tonos utilizados para fondos, contenedores, divisiones, sombras, estados desactivados y más. Esta paleta sostiene la jerarquía visual sin distraer, creando orden y profundidad en toda la experiencia.
Tokens
Los tokens de color abstraen los valores visuales y los traducen en variables reutilizables, facilitando la consistencia entre diseño y desarrollo.