Matium Matter Design System
Building the foundation for design and engineering alignment
Overview
When I joined Matium as Lead Product Designer, the platform lacked a unified design system. Components in Figma didn’t match what existed in production, styling was inconsistent, and our brand guidelines simply didn’t exist. As the company scaled rapidly, this fragmented foundation slowed design velocity, complicated development handoff, and risked creating a disjointed user experience.
I led the creation of the Matium Matter Design System - a single source of truth for our platform’s design language, components, and brand identity. Partnering closely with front-end engineering, I drove the full process: from auditing our existing platform, to establishing brand guidelines, to aligning Figma components with our production Storybook library.
Problem
When I started, our design files and system were all over the place. Components were outdated from what was being used in production; specifically spacing and line heights were inconsistent, colors weren’t standardized, and typography styles varied across screens.
Because Matium had scaled without a dedicated Product Designer, there were no brand guidelines, no clear hierarchy for design tokens, and no process to keep design and development in sync. Every new feature required manual alignment, slowing teams down and creating UI drift across the platform.
Solution
I partnered closely with front-end engineering to unify our platform visually and technically. Starting with a full audit, I created brand guidelines, standardized tokens, and aligned Figma components with Storybook to ensure easier design to implementation hand off. Using an atomic design approach, we built from foundational styles to full components, creating a scalable system that accelerated feature delivery and improved consistency across the entire platform.
Impact
Unified design & development workflows with a single source of truth
Reduced handoff friction between design and engineering by aligning Figma with Storybook
Increased design velocity, enabling faster iteration on new features and growth experiments
Established design system governance, ensuring long-term maintainability
Role
Lead Product Designer - Design System Owner
Team
Front-end Engineering
Company
Matium
Type
B2B | Design System
Objectives
Create Consistency Across the Platform
Establish a unified visual language and component library to eliminate UI drift and reduce manual alignment work.
Bridge Design & Engineering
Work closely with front-end teams to ensure that every design decision translated cleanly into production.
Enable Scalability
Build the system with atomic principles and tokens so future features could be designed and shipped faster.
Discovery
I ran a full audit of our platform to uncover visual and structural inconsistencies across design and engineering. Button heights, font weights, spacing, and even navigation patterns varied widely, creating a fragmented experience for both users and developers. I collaborated closely with front-end engineering to map out these discrepancies, reviewing live code, production UI, and design files to identify where standardization was most needed. This audit became the foundation for the Matium Matter Design System, guiding everything from brand guidelines to atomic component creation.
Product Strategy
Brand Guidelines First
I established Matium’s first brand guidelines to define our colors, typography, and iconography before building any components. This created a clear visual foundation that guided every design decision moving forward.
Align Figma with Storybook
We reverse-engineered our design system by starting with what already existed in Storybook, using it as the baseline for our component library. By syncing Figma directly with production components, we eliminated drift and reduced manual rework for future features.
Monthly Engineering Syncs
I set up recurring design system syncs with front-end engineering to reconcile styling differences and align on component behavior. This ensured design and development stayed tightly integrated as the system evolved.
Matter in Action
Matium Matter rolled out incrementally, starting with core primitives like typography, colors, and spacing, before expanding to full components like navigation, product tiles, and data tables. With Storybook and Figma finally aligned, design and development could ship faster and more consistently across every feature and workflow in the platform.
Designing for Growth
By unifying our design system, I accelerated feature delivery and eliminated countless hours of manual alignment between design and engineering. Instead of rebuilding UI patterns for each new feature, teams could focus on growth experiments, onboarding flows, and conversion funnels, driving real business impact while maintaining a polished, consistent user experience.
From Atoms to Experiences
I built Matium’s design system from the ground up, starting with atomic components - inputs, buttons, content tiles and scaling to complex patterns like page headers and data cards. Every element was designed with configurable states, responsive layouts, and reusable foundations to ensure consistency across the entire platform. This system became the backbone for rapid development, enabling teams to deliver features faster while maintaining a unified, purpose-built user experience.
Engineering Collaboration
From the start, I worked closely with front-end engineering to align on implementation details and ensure design fidelity in production. We set up design system syncs to reconcile styling differences, component behavior, and naming conventions. This ongoing collaboration not only reduced discrepancies between Figma and Storybook but also accelerated feature development by giving engineers a single source of truth to build from.
Final Thoughts
The launch of the Matium Matter Design System marked a turning point for Matium’s product development process. By creating a unified design language, aligning Figma with Storybook, and partnering closely with front-end engineering, we built a scalable system that powers every feature across the platform. This foundation has accelerated delivery, improved design-to-dev collaboration, and brought a consistent, polished experience to Matium users.
What went well
The collaboration between design and front-end engineering was seamless. By running monthly design system syncs and aligning on component standards, we eliminated discrepancies between design and production while creating a shared source of truth for the entire team.
What could have been improved
Despite our progress, some legacy components remained in production because they were deeply tied to critical platform features. In future iterations, allocating more time for refactoring would help eliminate this tech debt and achieve full design system compliance across the entire product faster.