Inncircles Design System 4.0
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 throughout the user experience.
Role
Lead Designer
Duration
Aug '24 - Present
Team
Why build a design system?
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:
Challenges
One of the biggest challenges we faced was standardizing components across a large and complex product. Designing components that could adapt to a wide range of use cases without breaking consistency was a demanding task, requiring deep collaboration and thoughtful decision-making at every level.
Learnings
The process wasn’t linear, we often had to go back and forth, iterating on designs as new challenges emerged. This made us realize the importance of having a clear blueprint and roadmap from the start. It helped reduce redundant changes, align the team, and keep the system evolving with purpose.
Future Scope
Looking ahead, we're focused on scaling our design system further including full support for dark mode and maintaining consistency as the product evolves. Our goal is to ensure the system remains flexible and future-ready as new features and updates are introduced.