Design Systems — Arquitectura · Escala · Consistencia
Estrategia, gobernanza y construcción de lenguajes visuales escalables para productos digitales de alta complejidad en banca, real estate y tecnología.
Un producto vivo para otros productos
Entiendo los sistemas de diseño no como librerías estáticas, sino como infraestructuras críticas que permiten la iteración constante y la excelencia operativa en equipos de diseño y desarrollo.
01 Tokens
Arquitectura de variables semánticas escalables.
02 Componentes
Átomos y moléculas con variantes complejas.
03 Accesibilidad
Diseño inclusivo bajo estándares WCAG.
04 Multi-marca
Theming capaz de soportar múltiples entidades.
05 Handoff
Documentación técnica para desarrollo ágil.
Sistemas en Producción
Flame · Santander Consumer
Implementación de componentes y patrones de búsqueda optimizados para el sistema de diseño local de Santander Colombia, incluyendo proyectos críticos como Santander Consumer Finanzauto y Prospera.
Design System · Grupo Bolívar
En Imaginamos lideré la evolución del sistema de diseño transversal del Grupo Bolívar, Propuse e implementé una arquitectura de tokenización semántica que permitió la reutilización de componentes entre marcas con identidades visuales distintas, sin duplicar la librería base. Actualicé y creé patrones de diseño que estandarizaron la experiencia a nivel de grupo, y establecí un eje de documentación para elementos interactivos que redujo la fricción entre diseño y desarrollo.
Sentria Netdata
En Imaginamos diseñé el sistema de diseño de Sentria, plataforma MDR de ciberseguridad para Netdata, reemplazando una solución basada en Power BI que limitaba severamente la experiencia y la escalabilidad visual del producto. Construí el sistema desde cero a nivel primitivo y semántico — incluyendo una arquitectura de tokens para modo dark y light — con foco especial en los componentes más críticos de la plataforma: visualización de datos y gráficas de seguridad, navegación y layout para flujos de monitoreo complejo, y un sistema de alertas y estados que comunicara severidad con claridad inmediata. El resultado fue una interfaz moderna, consistente y escalable que transformó la percepción del producto frente a sus usuarios.
Metodología de Implementación
Auditoría
Identificación de inconsistencias y deuda técnica.
Tokens
Definición de variables de color, espaciado y tipografía.
Primitivos
Estructuras básicas y alineación de fundamentos.
Componentes
Construcción de librería de UI reactiva en Figma.
Documentación
Guías de uso, specs técnicos y do's & don'ts.
Handoff
Sincronización fluida con equipos de ingeniería.
Evolución
Mantenimiento, gobernanza y mejora continua.
Technical Expertise
Dominio avanzado de Figma como herramienta de arquitectura y documentación. Enfoque en performance de archivos y escalabilidad de librerías para equipos Enterprise.
Precision in every pixel.
"Un design system bien construido no le pertenece al diseñador — le pertenece al equipo."