Design Systems — Architecture · Scale · Consistency
Strategy, governance, and the development of scalable visual languages for highly complex digital products in banking, real estate, and technology.
A living product for other products
I view design systems not as static libraries, but as critical infrastructure that enables constant iteration and operational excellence in design and development teams.
01 Tokens
Architecture of Scalable Semantic Variables.
02 Components
Atoms and molecules with complex variants.
03 Accessibility
Inclusive design in accordance with WCAG standards.
04 Multi-brand
Theming capable of supporting multiple entities.
05 Handoff
Technical documentation for agile development.
Systems in Production
Flame · Santander Consumer
Implementation of optimized search components and patterns for Santander Colombia's local design system, including critical projects such as Santander Consumer Finanzauto and Prospera.
Design System · Bolívar Group
At Imaginamos, I led the evolution of the Bolívar Group’s cross-functional design system. I proposed and implemented a semantic tokenization architecture that enabled the reuse of components across brands with distinct visual identities, without duplicating the base library. I updated and created design patterns that standardized the experience across the group, and I established a documentation framework for interactive elements that reduced friction between design and development.
Sentria Netdata
At Imaginamos, I designed the user interface for Sentria, a cybersecurity MDR platform for Netdata, replacing a Power BI-based solution that severely limited the product’s user experience and visual scalability. I built the system from the ground up at the primitive and semantic levels including a token architecture for dark and light modes with a special focus on the platform’s most critical components: data visualization and security charts, navigation and layout for complex monitoring workflows, and an alert and status system that clearly and immediately communicated severity. The result was a modern, consistent, and scalable interface that transformed users’ perception of the product.
Implementation Methodology
Audit
Identification of inconsistencies and technical debt.
Tokens
Definition of color, spacing, and typography variables.
Primitives
Basic Structures and Foundation Alignment.
Components
Building a React UI library in Figma.
Documentation
User guides, technical specifications, and dos and don'ts.
Handoff
Seamless coordination with engineering teams.
Evolution
Maintenance, governance, and continuous improvement.
Technical Expertise
Advanced proficiency in Figma as a tool for architecture and documentation. Focus on file performance and library scalability for enterprise teams.
Precision in every pixel.
"A well-designed design system doesn't belong to the designer—it belongs to the team."