Design System
Design ops
FinTech
Project overview
To support the growing need for flexibility and brand-specific customization across iAhorro's digital product, we developed a robust and scalable design system. Before this initiative, the company did not have a design system in place. As a result, adapting the product for different customers was a manual, time-consuming process that often led to inconsistencies in design and user experience. Customization was limited and difficult to maintain, which became a significant barrier to growth and efficiency.
The new design system was built from the ground up to solve these challenges. It is structured around a three-level tokenization model that allows for controlled and consistent design variation. At the foundation are core tokens, which define the base design values such as color palette, typography, spacing, and elevation. On top of these, theme tokens allow for the adaptation of the product’s visual identity to match individual customer brands. Finally, component tokens provide fine-grained control at the UI element level, enabling specific adjustments without breaking the overall design coherence.
This layered token architecture makes it possible to deliver highly customized versions of the product to different customers while preserving design consistency, reducing development overhead, and improving overall maintainability. The design system has become a foundational tool that not only enables product scalability but also aligns cross-functional teams around a shared visual language.
The goal
The goal of this project was to create a flexible design system that enables efficient, scalable customization of the digital product for different customers.
My role
Product designer/design system manager
Team
This project was implemented by myself as the sole member of the team.
Client
Time
1 year
Token structure
A 3-level design token system is a structured way to manage design tokens in a design system by organizing them into hierarchical levels. These levels help separate raw design values from more abstract concepts and usage-specific tokens, making the system more maintainable, scalable, and clear for designers and developers.
On this design system foundation tokens were used for base design values, state tokens were used for brand adaptation, and finally component tokens were used for detailed UI adjustments.
Foundation tokens
The foundations of the design system were established through a set of core design elements, including grid, typography, spacing, color palettes, shadows, elevations, shapes, icons, and pictograms. Each of these foundational sections was defined using first-level tokens, which serve as the base layer in the system’s token architecture. These tokens capture essential design values—such as font sizes, color codes, spacing units, and icon styles—ensuring consistency across all components and making it easier to scale and customize the product for different customer needs.
State tokens
Design tokens are not only used to define static design properties like color, spacing, and typography. They can also represent the visual styles associated with different interactive states of a component. These states include behaviors such as hover, active, focus, disabled, and more.
In modern design systems, it's important to define how components look and behave in various states to ensure consistency, accessibility, and user clarity. Rather than hardcoding these styles directly into components, state-specific design tokens are used to describe these visual changes in a reusable and centralized way.
A design token for a component state typically references a base or semantic token and is scoped to both the component and the state it represents.
By defining tokens for interactive states, teams can ensure that the user experience remains predictable and aligned with the overall design language.
Component tokens
A component token is a type of design token that defines the visual and behavioral properties of a specific user interface component. Unlike core or semantic tokens, which represent global design decisions (like colors, typography, or spacing), component tokens are scoped to a particular UI element—such as a button, input field, card, or modal.
Component tokens help translate abstract design values into concrete implementation for each component. They often reference semantic or core tokens to maintain consistency across the design system.
Component tokens are applied within the structure of a component and are responsible for defining how that component looks and behaves in different states or variants.
For example, a button component might use component tokens for its background color, text color, padding, border radius, and state-specific styles (hover, active, focus, etc.).
