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.

Indica que una acción se completó correctamente y comunica estados positivos dentro de la interfaz.

Casos de uso

  • Confirmaciones
  • Mensajes de éxito
  • Estados completados
  • Feedback positivo inmediato

Se utiliza para advertir sobre una situación que requiere atención, pero que no impide continuar con la acción.

Casos de uso

  • Alertas preventivas
  • Cambios que pueden afectar datos o configuraciones
  • Estados de riesgo moderado
  • Confirmaciones antes de continuar
 

Se utiliza para señalar fallas, bloqueos o acciones que no pueden continuar hasta ser corregidas.

Casos de uso

  • Mensajes de error
  • Validaciones fallidas
  • Estados críticos
  • Alertas bloqueantes

Se utiliza para proporcionar información adicional o contextual sin implicar riesgo ni error.

Casos de uso

  • Mensajes informativos
  • Ayuda contextual
  • Estados neutrales
  • Notificaciones no críticas

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.

Surface Front Office

Emerald

50 #ECFDF5 --p-emerald-50
100 #D1FAE5 --p-emerald-100
200 #A7F3D0 --p-emerald-200
300 #6EE7B7 --p-emerald-300
400 #34D399 --p-emerald-400
500 #10B981 --p-emerald-500
600 #059669 --p-emerald-600
700 #047857 --p-emerald-700
800 #065F46 --p-emerald-800
900 #064E3B --p-emerald-900
950 #022C22 --p-emerald-950

Red

50 #FEF2F2 --p-red-50
100 #FEE2E2 --p-red-100
200 #FECACA --p-red-200
300 #FCA5A5 --p-red-300
400 #F87171 --p-red-400
500 #EF4444 --p-red-500
600 #DC2626 --p-red-600
700 #B91C1C --p-red-700
800 #991B1B --p-red-800
Colores - PreviousEstilosNext - ColoresIconografía
Contenidos

Copyright © 2026 Quipux. Todos los derechos reservados