Lúmen Design System
From scattered UI kits to a unified design system—how we built Lúmen to scale Neon’s design.
Neon’s fragmented UI libraries slowed teams down, leading to inconsistencies and inefficiencies. What started as a side project soon became Lúmen, Neon’s first official design system.
ROLE
Product Designer
YEAR
2019
Our approach
To build a system that truly worked, we started by understanding the pain points. From this deep dive, we defined a clear strategy: consolidate tools, introduce a scalable component structure, and establish strong documentation.
Component Inventory
We audited 53 components to identify inconsistencies and classify elements into global vs. local components.
Team Alignment
We ran interviews with designers and engineers to understand their workflows and tool preferences.
Card Sorting Workshop
We tested how teams naturally grouped UI elements, ensuring the system aligned with how they thought.
Benchmarking Best Practices
We researched industry-leading design systems to establish solid foundations.
Solution
Inspired by Brad Frost’s Atomic Design, we restructured Neon’s UI framework into a scalable, modular system. Our structure was built using the following components:
Design Tokens
Standardized values for colors, spacing, and typography.
Base Components
Reusable UI elements, ensuring consistency.
Contextual Libraries
Tailored adaptations for different platforms and brands.
To eliminate workflow inefficiencies, we consolidated tools and migrated the team to Figma, providing a unified platform for design collaboration. This transition was carefully planned in phases, supported by clear guidelines and training sessions to ensure a smooth adoption. By simplifying workflows and establishing a single source of truth, we transformed Neon’s design process into a cohesive, scalable, and future-proof system.
IMPACT & RESULTS
By consolidating tools and streamlining workflows, we transformed Neon’s design process into a cohesive and scalable system. Designers and engineers gained clear guidelines, improved documentation, and a single source of truth, making collaboration more efficient. The improved Customer Effort Score (CES) reflected a stronger perception of accessibility and ease of use, reinforcing Lúmen’s impact on the team's productivity and Neon’s growth.
Back to projects