Scroll Down
Scroll Down
Scroll Down
About the project
Krones AG is a German packaging and bottling machine manufacturer. It produces lines for filling beverages in plastic and glass bottles or beverage cans.
For their web applications and the HMI Screens on their production lines they needed a comprehensive design system.
The goal was to create a dynamic design system, offering different modes, flexible components with all necessary properties and a token system.
The Challenge
Krones had multiple product teams working in silos, leading to a fragmented and inconsistent design landscape. Each team had their own set of components and patterns, which made collaboration inefficient and diluted the overall user experience. The challenge was to create a unified design system that would bring consistency, efficiency, and scalability to the entire design process.
My role
As the lead designer for the design system, I was responsible for:
• Enabling consistent handoffs between design and development.
• Setting up and structuring the entire design system from scratch.
• Collecting requirements and feedback from various design teams.
• Building a token-based foundation for colors, spacing, and typography.
• Creating flexible, state-ready components that didn’t require detaching.
• Mentoring developers on using tokens and applying the system correctly.
Process
Working closely with designers across different teams, I mapped out existing inconsistencies and gathered needs and use cases. Based on that, I established a robust token system as the base for the design library. I created modular components in Figma that allowed for full flexibility while maintaining consistency. Throughout the process, I worked with developers to ensure proper implementation and adoption of the system.
Components
All components are able to display every relevant state through component properties. This enables designers to use the component instances without needing to detach them in their respective design files. Therefore we can ensure consistency and up-to-date components throughout all design files if used properly by all designers.
Token system
To ensure consistency and scalability throughout all Krones design files I built a semantic tokens system. The reasoning for a semantic approach as opposed to a component based approach is a reduced amount of tokens as to the large amount of components in the Krones design world and the use of two different modes.
Mode switch
A mode switch is implemented, so designs can be switched between modes with ease. Every design token has their counterparts for other modes defined in the Figma variables. As we worked with a semantic token approach, this ensures that all state colors are consistently translated in the same way.
Outcome
• A centralized, scalable design system adopted across multiple teams.
• Improved design-to-dev handoff through shared understanding and documentation.
• Strong reduction in duplicated or inconsistent components.
• Increased speed and confidence for designers when building new features.
• Higher quality and consistency across Krones’ digital products.