Netze BW – Design System
Project overview
The Netze BW design system was created to bring consistency and efficiency to the company’s digital ecosystem. It combines design guidelines, a visual style guide and a reusable component library to ensure a cohesive user experience across all products.
Role
Product Designer (Design Systems)
UX/UI Design, Interaction Design, Architecture
Background
Netze BW, a subsidiary of EnBW, was in search of a partner to help build a comprehensive design system for its digital products. After an earlier attempt with another agency failed to provide reusable and scalable components, The NEED GmbH was brought on board to develop a more sustainable and cohesive solution.
Understanding the problem
Netze BW aimed to develop a design system that would serve as a single source of truth, establishing a unified design language and minimizing inconsistencies across digital products. Without such a system, teams struggled with duplicated efforts, inconsistent visuals and misalignment between design and development. By introducing a centralized design system with reusable components, Netze BW sought to create a cohesive visual identity, improve collaboration and increase efficiency throughout the entire product ecosystem.
Product vision and solution
The goal was to design a scalable system that would enable designers and developers to work more efficiently while maintaining a consistent brand experience. The design system was envisioned as a living product, structured enough to provide clear guidance. It brings together styles, reusable components and patterns with rich properties to create a seamless bridge between design and development. By doing so, it empowers teams to focus on solving user problems rather than repeatedly rebuilding interface elements.
Concept
In this phase, the focus was on defining how the design system should be structured and how its elements would work together to ensure consistency and scalability.
Styles
The following picture shows how the foundations like spacing, radius and grids were defined and displayed for the ones using the design system.
Components
The design system offers many different components that are used across various digital products. The following pictures are examples of how a page for a component looks like. This includes a description of what the component actually is, the reusable main component itself, a documentation on when and how to use it as well as how the component is built and which properties it has.
Patterns/Templates
Similar to the components, the design system offers patterns which already solve a common problem, when designing a website or application. For example, the text media section is frequently used to display some information (through text and media) on websites. The organization of these pages are the same as with the components.
Tokens
In short, design tokens are design decisions which are reusable. When used correctly, they save up a lot of time and ensure more consistency across digital products. In the following pictures, you see how the tokens are set up with the Variables function by Figma. They are separated by primitive tokens which are linked to a clear value like a HEX code and semantic tokens which consume the primitive tokens and give them a meaning like primary color. Later on, additional brands were introduced to the system, which led to extending the tokens with brand-specific colors and other values.
Results and takeaways
Working on the Netze BW design system provided valuable hands-on experience in building a scalable design foundation from scratch. Developing a design system requires not only a deep understanding of design principles but also advanced knowledge of the tools involved – in this case, Figma. Throughout the project, I was able to significantly expand my Figma skills and knowledge, especially in areas like component structuring, documentation and the use of design tokens.
Since Figma’s feature set was evolving rapidly at the time (and still is), we constantly had to adapt to new technologies. For example, we initially implemented design tokens using a third-party plugin before Figma later introduced its own Variables feature. This required a forward-thinking approach – building the system in a way that allowed for easy restructuring and updates.
Much of the process was driven by trial and error, as many of Figma’s now-standard features were new or still in development. This taught me the importance of flexibility, experimentation and continuous learning when working on systems that need to evolve over time.