ATOMIC SCALES AS FOUNDATIONAL UNIFIER
I audited design assets and workflows, revealing inconsistencies that caused user confusion, inefficiencies, and higher costs.
In response, I pitched the design system as a scalable product with iterative governance, starting with an atomic color scale (incremented from 50 to 900) for flexibility and accessibility.
We based our atomic values on brand guidelines and used Leonardo to create evenly incremented color scales, with root colors like "Sunnova Orange" (orange-500) at the center.
SEMANTIC VALUES
I then developed a semantic color scale, mapping atomic values to functional use cases, drawing inspiration from best-in-class color systems such as Polaris, Carbon, and Google Material.
Semantic tokens define the purpose of a color, ensuring consistency across the system. Each token starts with its color group, followed by the element it applies to (e.g., background, border, text, or icon), and may include modifiers for role, variant, and state.
CREATING A VERSATILE VISUAL SYSTEM
Icons were scattered across products with no structure, consistency, or clear usage guidelines.
I centralized them into a unified system, standardizing sizes, naming conventions, and accessibility considerations. This transformation resulted in a scalable, well-documented icon library that streamlined implementation and ensured visual cohesion across all products.
I structured the icon library to be seamlessly nested within components, allowing icons to inherit properties like size, color, and state automatically.
This ensured flexibility while maintaining consistency, reducing the need for manual overrides. As a result, icons adapted dynamically to their context, streamlining both design and development.
FORM AND FUNCTION OF OUR SYSTEM
Building on the semantic scales, we structured components with documentation to ensure seamless integration of color roles and predictable behavior across the design system.
I refactored nearly every component to unify fragmented design systems lacking consistency, documentation, and governance.
Selects (below) exemplify this transformation: consolidating styles, behaviors, and accessibility into a single, flexible component set.
IMPACT
The design system transformed the way teams approached design and development, creating a unified language that ensured consistency, scalability, and efficiency across teams. It also empowered designers to work at greatly improved levels of efficacy and output, which was crucial for a very lean team covering a large scope of design needs.
The system ensured consistent application across 100% of our interfaces. The structured component library increased efficiency and reduced errors, driving adoption across 85% of teams within the first six months.
INSIGHTS GAINED
Developing the design system highlighted the importance of balancing structure with flexibility to accommodate diverse needs while maintaining consistency.
Iterative feedback from stakeholders played a crucial role in refining the system and driving adoption. This experience reinforced the value of clear documentation, effective onboarding, and strong collaboration between design and development for lasting impact and shared understanding.