In this project, I restructured and enhanced an existing design system, focusing on multi-theming, accessibility, and design tokens to streamline workflows and improve scalability. The goal was to support 12 different network operators under a unified system, reducing the maintenance burden and making it easier for designers and developers to work efficiently within a flexible, well-organized framework. This initial groundwork set the stage for a larger collaboration with the E.ON design team, where we built a completely new design component library centered on these scalable principles.
The previous design system was complex and unsustainable. Each network operator had its own component variants, resulting in an overwhelming number of component variations. This setup created a huge maintenance burden and made adding new components time-consuming and inefficient. Additionally, existing styles and variables for colors, typography, and spacing lacked semantic naming. Designers had to memorize specific color shades and text sizes, which hindered productivity and consistency. Further, there were some discrepancies between foundations and components in design and development, which disrupted the handover process.
With the release of Figma’s Variables feature, it was an ideal time to implement design tokens to create a streamlined, scalable system. My approach involved the following steps:
I established a collection of Base Colors that included all foundation colors specific to each network operator. Each operator’s specific color theme was defined within this collection. The Base Colors acted as the core reference for the color tokens, supporting a clean, organized theme structure across all operators.
To make the design process more efficient, I created a separate Color Tokens collection with semantically named tokens that referenced the Base Colors instead of hard-coded hex values. This setup allowed us to define both light and dark themes with semantic consistency. Designers could quickly assign colors without needing to remember exact values, improving both usability and speed in applying color styles.
Rather than creating separate component variants for each operator, I used Figma’s variables and theming capabilities to centralize component designs. This approach drastically reduced the number of component variations and minimized maintenance efforts. Designers could now switch themes easily between network operators aswell as light and dark theme without duplicating components, making the library leaner and easier to use and maintain.
To further simplify the design process, I scoped the tokens to specific properties, making it easy for designers to access the correct styles for colors, typography, and spacing. With scoping and semantic naming of tokens, designers could work more intuitively, without memorizing specific values, and apply styles consistently across designs.
To support a smooth handoff for developers, I demonstrated an implementation using CSS variables. This allowed the front-end team to quickly adapt the design system to code, aligning the Figma tokens with CSS variables and ensuring consistency between design and development.
By introducing a scalable design system foundation with multi-theming and well-organized design tokens, we achieved significant improvements in both efficiency and consistency:
The new system dramatically reduced the number of component variations, streamlining maintenance and making it easier to add new components.
Semantic naming and scoped tokens allowed designers to quickly apply styles, reducing dependency on memorized values and fostering a smoother, more intuitive workflow.
Multi-theming with Base Colors and Color Tokens ensured a consistent look and feel across network operators while maintaining flexibility.
The use of CSS variables aligned with Figma tokens enabled an efficient handoff process, reducing ambiguity and supporting consistent implementation.
This scalable design system laid the foundation for a more efficient and adaptable workflow. Building on this groundwork, we collaborated closely with the E.ON design team to develop a completely new design component library. This library was structured around the principles of multi-theming, accessibility, and semantic design tokens, ensuring consistency and scalability for future projects.
