Design System
Updated 25th Mar, 2026
Increasing our team's output by 30%
We built a comprehensive and detailed design system to bring consistency across our product. It serves as a single source of truth, helping the team work faster, stay aligned, and maintain a unified look and feel.
Role
Lead Designer
Duration
Apr '24 - Present
Team
Impact on our workflow
30%
Reduction in new screen design time
25%
Faster Iteration on new requirements
35%
Faster design to dev handoffs
Why we decided to build it?
In a fast-moving startup like ours, speed often outweighed polish. But with frequent iterations, we started facing inconsistency. It became hard to track what worked and what didn’t. To bring clarity and alignment, we needed a single source of truth, a comprehensive and scalable design system.
Gathering the inspiration
To get inspired, we looked outward, particularly at how other companies were approaching their design systems, with a strong focus on B2B SaaS products.
Laying the foundations
We took a step back to reassess the basics, tweaking certain elements and aligning others with widely accepted industry standards. This foundational work was essential to ensure that everything we built on top would be consistent, scalable, and easy to maintain in the long run.
The components
Since the product had evolved significantly with new features, UI changes, and multiple iterations, our old design system no longer reflected how the product actually looked or functioned. This audit helped us identify gaps, inconsistencies, and outdated patterns that needed to be rethought or rebuilt from the ground up.
Getting the tokens right
We studied how tokens were structured, categorized, and mapped to components, learning how they could bring consistency, scalability, and flexibility to both design and code.
We divided our semantic tokens into two categories: Stage and Mode.
These categories were designed to communicate the behavioral nature of UI elements. Specifically, whether an object was interactive or not. Stage tokens were used for static, non-interactive elements and Mode was used for interactive elements.
Referencing tokens
Once we finalized our token structure, we began organizing variable collections into three levels: Primitive, Global, and Semantic.
Variables collection in Figma:
Structuring components
We followed an atomic design approach, this ensured consistency at every level, from foundational elements like buttons and inputs to fully composed layouts, making the system more scalable and easier to maintain.
Component Anatomy
We focused on building components flexible enough to cover most scenarios — reducing the need to detach them while designing screens, and maintaining consistency throughout the system.
Creating more variants based on the use cases:
Crafting rest of the components:
Scaling for Dark Mode
As we progressed with building components, we began exploring dark mode support. This helped us aligning our dark mode variables.
Documenting elements:
Some visual explorations that I did for login & sign-up pages.
Challenges
One of our biggest challenges was standardizing components across a complex product while ensuring they stayed flexible for multiple use cases without compromising consistency, which required close collaboration and careful decision-making.
Learnings
The process wasn’t linear, we iterated constantly as new challenges emerged. This reinforced the need for a clear blueprint and roadmap to reduce rework, align the team, and evolve the system with purpose.
Future Scope
Looking ahead, we aim to scale the design system further by introducing full dark mode support and maintaining consistency as the product evolves, ensuring it stays flexible and future-ready with every new feature.