Rebuild the design system from the ground up to unify design and development workflows, improve accessibility, and standardize UI across all modules.
[01]
Overview
When I joined the team, the existing design system was minimal, a few shared components, no variable structure, and limited collaboration with developers.
Lumen System was born from the need to bring order, light, and scalability to the current app, transforming design and development into a single, cohesive ecosystem.
[02]
The Challenge
Before Lumen, design and code were disconnected.
Developers often recreated outdated components, and visual inconsistencies increased maintenance costs.
Accessibility wasn’t integrated, and theme handling between Light and Dark modes was manual.
The challenge was to rebuild the foundations, not only redesign components, but define a shared structure that aligned design and code.
[03]
Building Together
To ensure adoption, I decided to co-create Lumen System alongside the development team.
We aligned on naming conventions, variable logic, and mode structures, ensuring Figma tokens could be mirrored directly in code.
Weekly syncs and open documentation built a sense of ownership across teams, turning handoffs into true collaboration.
This cross-functional approach became the key to success, developers didn’t just use the system, they helped build it.
[04]
Structure & Foundations
Lumen System was designed for clarity and scalability.
Two main collections formed its backbone:
Primitives – raw foundations (colors, typography, spacing, shadows, borders).
Semantic – meaningful layers that define behavior (background, text, borders, states).
Both Light and Dark modes were fully supported, and accessibility checks ensured contrast compliance across all states.
Built with OKLCH, the color palette maintains perceptual consistency and predictable contrast between states, improving accessibility and visual balance.
This structure allowed fast iteration, predictable naming, and easy scalability for future modules.
[05]
Components & Adoption
With solid foundations, I rebuilt key UI components: buttons, inputs, modals, toasts, etc. following accessibility and usability best practices.
Each was documented directly in Figma, with usage examples and direct mapping to its React counterpart in Storybook.
After Lumen’s release:
UI-related tickets dropped by 40%
Design-to-dev handoff time decreased notably
Consistency and developer confidence increased across the app
-40%
UI fixing tickets
-20%
Development time
[06]
Outcome & Reflection
Lumen System became the single source of truth for our app, aligning teams, improving quality, and simplifying collaboration.
It wasn’t just a library of components; it was a cultural shift in how we built and maintained product interfaces.
Lesson learned: A design system’s success depends less on its visuals, and more on the people who believe in it.