Design System from Scratch to Scale

Team Leadership

System Design

AI Design

I led the creation of a production ready design system to unify product experiences and accelerate development velocity across teams. Starting from a fragmented UI landscape, I architected a reusable component ecosystem grounded in atomic design principles and object-oriented UX.

The system introduced a structured hierarchy of tokens, primitives, and composable components that enabled designers and engineers to build features using standardized building blocks rather than custom UI each time.

Product designers were embedded within cross-functional project teams across the organization. This structure supported focused execution but revealed systemic challenges over time.

As teams worked independently, patterns emerged: misalignment between initiatives, repeated work, and inconsistencies in design quality across the product ecosystem.

Teams repeatedly rebuilt the same components across projects, often recreating patterns instead of reusing existing solutions. With no shared system in place, experiences became fragmented and inconsistent, ultimately impacting the perceived quality of our product.


Build a centralized library of reusable components, design tokens, and theming support (including dark mode) to ensure consistency and scalability.

Ensure the system meets accessibility standards, with particular focus on color contrast and support for color blindness.

We structured the system using atomic design principles, organizing components into tokens, atoms, molecules, and organisms. Establishing design tokens as the foundational layer created a single source of truth for visual and interaction properties, enabling consistency, reuse, and scalability as the system evolved.

We applied atomic design principles to define the system’s foundational tokens for color, typography, and iconography that serve as the smallest building blocks of the interface. These elements were intentionally crafted to express the platform’s voice, tone, and visual identity while creating a consistent base for all components. By standardizing these primitives first, we ensured every pattern and interaction built on a unified, scalable foundation.

I set a visual tone that feels professional but approachable, with iconography that stays clear in complex interfaces. For typography, I chose Inter for its strong legibility in data dense tables and operational workflows, helping users scan and find information quickly.

The palette was built as an accessible token system with high contrast pairings aligned to WCAG and informed by the U.S. Web Design System. Using defined contrast thresholds, we ensured readability across states and data views. Our value rating uses green, yellow, and red, so hues and lightness levels were tuned to work for red–green color blindness, with icons and labels reinforcing meaning beyond color alone.


Building our first design system came with constraints, limited resources and constantly shifting product priorities. After winning a company hackathon, a lead front-end developer and I took the opportunity to rethink the product’s foundation.

As part of the initial iterations of the design system, we launched an initiative to split our standalone product into two distinct applications, each tailored to meet specific user needs. I led the efforts in redefining the information architecture to support this separation, ensuring a clear and intuitive structure for both applications. This included conducting user research and testing to validate IA decisions, as well as collaborating on updates to the navigation menu to reflect the new organizational model.

Through tree testing, first-click testing, and user interviews, we identified several opportunities to improve the overall information architecture. However, the feedback also validated our strategic direction that users responded positively to the separation of applications by distinct use cases.

I also led a workshop grounded in Object-Oriented UX principles to define the object model for our applications. We collaboratively identified the core objects within our products, mapped their attributes and relationships, and explored how these objects interact within the broader system. This work was instrumental in informing a more intuitive navigation structure and supporting a streamlined, object-driven user experience and workflow.

SPM-Navigation-Research-Report

After the brand update with a new logo and visual direction, I led the evolution of our design system to align with the refreshed identity. This included refining interactions, updating styles, and expanding components to create a more cohesive and flexible Design System 3.0.

Example of the complete design system with styles, components, patterns and the first introduction of design tokens. Learn about the complete process of creating, developing, evolving and finally implementing those design tokens here.

I led the development of AI design principles and guidelines within our company’s design system, translating best practices into standards teams now use across products. After completing the Strat AI UX Bootcamp, I presented this framework company wide and, as part of our AI Guild, helped establish how AI features are responsibly designed and delivered.

I helped design and launch an AI tool that summarizes data and surfaces actionable insights for user. My work included prompt engineering and shaping the end-to-end user experience to ensure outputs were clear, reliable, and genuinely useful setting a strong foundation for future AI features across the organization.

AI-Design-Principles-Guidelines

I designed a process for other designers and developers to introduce new components or styles and the approval process for those changes to get introduced into the design system and then communicated out.


Reduced engineering implementation time by 3+ weeks per feature cycle through reusable components

Doubled quarterly feature delivery by removing design and development rework

Accelerated design discovery by enabling rapid prototyping

Full brand refresh and system evolution without product disruption

There is more to explore, rummage through more of my recent design work.

Turning complex threat data into clear, financial insights.

Explore my complete portfolio.


Check my older work, that I have not had the heart to retire yet.


Please, take a moment and send a message and lets connect.

← Back

Thank you for your response. ✨