Design Systems
Systems created
___
Conio
ONNO
My role
___
Sr. Product Designer
Bridging design and engineering to improve collaboration and make implementation smoother.
One of the things I enjoy most is building with LEGOs. Similarly, we design components atomically, which can be combined to create more complex elements, providing teams with the guidelines they need to build effectively.
A Scalable Strategy
Each team I supported had a different level of design maturity. Some lacked design kits, while others had outdated or fragmented assets. Instead of focusing on a single team’s journey, I developed a flexible strategy that could adapt to various setups and workflows. This made it easy to scale and support each team’s unique needs without starting from scratch every time.
The Challenge
In every product team I joined, I noticed similar issues: design inconsistencies, duplicate components, and a lack of alignment between design and code. As the company scaled, these gaps became more visible. Developers weren’t sure which version to implement, and designers often recreated patterns that already existed. Without a shared system, collaboration slowed down and the quality of the user experience suffered.
The Solution
To address this, I developed a repeatable design system methodology that I’ve successfully applied across different teams. It starts with close collaboration between design and engineering to align on shared foundations such as color, typography, spacing, and tokens. I use t-shirt sizing to organize components by scale and intent, which helps maintain visual consistency without adding unnecessary complexity.
In addition, I create clear, accessible documentation to support usage and onboarding. This approach not only improves consistency, but also builds trust across teams and makes it easier to scale design efficiently, no matter the company or product.
Establish Foundations
A successful design system starts with the foundations; it is fundamental to success. I carefully put together the typography scale, as it ultimately affects the entire sizing system based on line heights and sizes. This allows all components to work together seamlessly.
Then, I continue with color primitives, color semantic usage, type, sizing, grids, border radius, border width, spacing, shadows, and effects, as well as accessibility standards.
Design tokens
I create design tokens together with engineers to keep design and code in sync. These tokens help build a consistent visual language, making it easier to adjust for things like dark mode or new brand styles. They also support a flexible system that can grow and adapt as the product evolves.
Sub-sytems
A design system is made up of interconnected subsystems. For example, the type scale determines component sizes, and button hierarchy affects other interactive elements. Even small changes can have a big impact, so keeping the user experience intuitive is key.
I use ‘t-shirt sizing’ to organize components by size, making it easy to adjust and maintain a clear visual hierarchy.
Component Architecture
I use atomic design principles to create flexible, reusable components. By defining sizes at the smallest level, I reduce the need for multiple variants, which saves memory and simplifies maintenance. Core components like buttons and inputs are designed for reuse and are often integrated into larger components like cards and lists.
This approach makes development faster, components easier to use, bug fixes quicker, and gives teams the flexibility to build new features efficiently.
Documentation
A design system needs clear guidance to be effective. I create documentation and guidelines that help teams and new members collaborate smoothly and understand how to use components with clarity and consistency.
Governance
Creating new features often requires new components. To scale the design system, I’ve set up a governance process based on Brad Frost’s methods. This ensures new components are reviewed, standardized, and documented before being added
System-Wide Impact
Faster ⚡️
handoffs between design and development
Less -
duplicated or misaligned components
More +
consistent UIs across products
Efficient ✨
onboarding for new designers and engineers
“It’s so much easier to stay consistent now. I can just use the components without worrying if they’ll work or not.”
— UI Designer @ONNO
“I’m more confident reusing components now. They just fit, and I don’t have to second-guess it anymore.”
— Mobile Developer @Conio