Cobalt Design System
Sistema de diseño atómico con design tokens, enfocado en escalabilidad y consistencia.
El desafío
Qik tenía un UI Kit, no un sistema. Cada diseñador decidía por su cuenta, los componentes se recreaban desde cero y el lenguaje entre diseño y desarrollo no estaba alineado.
El resultado de todo esto se traducía en inconsistencia, retrabajo y una colaboración limitada entre equipos.
Escalar el producto exigía crear un sistema, no seguir trabajando sobre un guideline / UI Kit.
Resumen del proyecto.
Rol
Design System Lead
Herramientas
Figma · Jira · Confluence
Duración
+1 años y continuamos.
Principios
Gobernanza · Design Tokens · Atomic Design
Habilitador de
Themes · Modes · Colaboración Design → DEV
Resultado clave
+100% velocidad en Design → DEV
Pensamos en escalabilidad funcional.
El sistema
Cobalt fue diseñado bajo dos principios clave:
- Design Tokens como lenguaje compartido entre diseño y desarrollo.
- Atomic Design como teoría para estructurar componentes y patrones de forma escalable.
El objetivo no era solo consistencia visual, sino eficiencia operativa y escalabilidad técnica.
Se definieron los tokens de forma clara, desde el color hasta los valores que se usan en los gap.
Creación y agrupación de tokens de color como globales, alias y específicos para poder activar themes y modes que se quieran.
Uno de los mayores cambios fue alinear diseño y desarrollo bajo un mismo lenguaje.
Alineación
Trabajé directamente con líderes de arquitectura y frontend para validar la visión del sistema — mejorando la velocidad de implementación, el mantenimiento del producto y la claridad técnica.
Hoy, ambos equipos comparten conceptos como tokens, componentes y patrones, lo que redujo la fricción y mejoró la comunicación.
La sólida implementación de estos fundamentos fue, de hecho, lo que nos permitió escalar el ecosistema para lanzar nuevos productos como Qik Pro, soportando variaciones visuales complejas mediante la creación de un nuevo Theme Pro nativo gracias a la arquitectura basada en tokens.
La implementación de Cobalt transformó la forma en que el equipo trabaja.
El impacto
Incremento superior al 100% en velocidad de equipos de diseño y desarrollo.
−30% en bugs de UI durante regresiones.
Consistencia y coherencia visual en la app.
Onboarding más rápido para nuevos diseñadores.
Mayor alineación entre diseño y desarrollo.
Nada valida mejor la decisión de crear un design system que la voz del equipo técnico que lo implementa:
“Sin tokens, Qik Pro no hubiese sido posible.”
Justin Colón – Líder de Front-End
El aprendizaje
Construir Cobalt cambió mi perspectiva como diseñador.
Entendí que el verdadero impacto no está en una interfaz aislada, sino en crear estructuras que permitan que el diseño evolucione junto al producto y el negocio.
Hoy, ver cómo el sistema es adoptado por diseñadores, developers y líderes dentro del banco es una de las mayores satisfacciones de mi carrera.