Cobalt Design System
Atomic design system with design tokens, focused on scalability and consistency.
The challenge
Qik had a UI Kit, not a system. Every designer made their own decisions, components were rebuilt from scratch, and the language between design and development wasn't aligned.
The result was inconsistency, rework, and limited collaboration across teams.
Scaling the product required building a system — not continuing to work on top of a guideline / UI Kit.
Project summary.
Role
Design System Lead
Tools
Figma · Jira · Confluence
Duration
1+ years and counting.
Principles
Governance · Design Tokens · Atomic Design
Enabler of
Themes · Modes · Design → DEV collaboration
Key outcome
+100% speed in Design → DEV
We designed for functional scalability.
The system
Cobalt was designed around two key principles:
- Design Tokens as a shared language between design and development.
- Atomic Design as a framework for structuring components and patterns at scale.
The goal wasn't just visual consistency — it was operational efficiency and technical scalability.
Tokens were defined clearly, from color to the values used in gaps.
Color tokens were created and grouped as global, alias, and specific — enabling themes and modes on demand.
One of the biggest shifts was aligning design and development under a shared language.
Alignment
I worked directly with architecture and frontend leads to validate the system's vision — improving implementation speed, product maintainability, and technical clarity.
Today, both teams share concepts like tokens, components, and patterns, which reduced friction and improved communication.
The solid implementation of these foundations is what allowed us to scale the ecosystem to launch new products like Qik Pro, supporting complex visual variations through a native Pro Theme built on token-based architecture.
Implementing Cobalt transformed the way the team works.
The impact
Over 100% increase in design and development team velocity.
−30% UI bugs during regressions.
Visual consistency and coherence across the app.
Faster onboarding for new designers.
Stronger alignment between design and development.
Nothing validates the decision to build a design system better than the voice of the technical team that implements it:
“Without tokens, Qik Pro wouldn't have been possible.”
Justin Colón – Front-End Lead
The learning
Building Cobalt changed my perspective as a designer.
I understood that true impact isn't in an isolated interface — it's in creating structures that let design evolve alongside the product and the business.
Today, seeing the system adopted by designers, developers, and leaders across the bank is one of the greatest satisfactions of my career.