← Back to Overview
Client
KION KION logo

Build, promote and maintain a design system that powers multiple applications across different brands.

Figma Angular Storybook Design Tokens
2023 - 2025
UI Design System & Front-end development

Role

As a global leader in warehouse automation, KION Group is transforming how goods move across the supply chain. Within the Mobile Automation department, our mission is to revolutionize the user experience across multiple brands through a unified design system.

With a 9-year history of collaboration with KION (previously Dematic and Egemin), I’ve been instrumental in shaping their digital transformation. This case study focuses on our latest achievement: creating a scalable design system that powers multiple applications while maintaining brand consistency.

🎯 What does success look like?

A successful design system implementation means:

  • Seamless developer experience with comprehensive documentation
  • Pixel-perfect implementation matching design specifications
  • Clear, well-defined use cases for each component
  • Centralized source of truth for design decisions
Tech
KION warehouse automation vehicle interface showing control panel and navigation system

The Tech Behind the Magic

Our workflow combines Figma’s powerful design capabilities with Tokens Studio for seamless token management. These tokens are transformed via Style Dictionary into Angular themes, supporting both light and dark modes across different brands.

We leverage ZeroHeight as our documentation platform, creating a living bridge between design and development. This integration ensures our documentation stays current with our design evolution.

Design system

KION design system tokens in Figma showing color palette, typography, and component variables

UI Design Process

Design System Architecture

  • Implemented a hierarchical token structure
  • Created adaptive design patterns
  • Developed brand-specific theming solutions
  • Established component variants system

Component Development

  • Built a library of reusable components
  • Implemented strict TypeScript interfaces
  • Created dynamic theming solutions
  • Optimized for mobile performance

Angular Development Workflow

Our Angular development process follows a component-driven approach that ensures scalability and maintainability:

  • Architected modular component structure with smart/presentational pattern
  • Implemented Angular Material CDK for accessibility-compliant interactions
  • Utilized Angular’s dependency injection for service composition
  • Created custom form controls with ControlValueAccessor

Component Building Techniques

Each component in our design system follows these development principles:

  • Developed with OnPush change detection for optimal performance
  • Implemented comprehensive unit tests with Jasmine and Karma
  • Created interactive documentation with Storybook and Angular examples
  • Built theme injection system using CSS custom properties and Angular’s @mixin system
Applications

KION portal interface showing application dashboard with multiple modules and navigation elements

Testing & Quality Assurance

Quality is at the heart of our design system. We’ve implemented a comprehensive testing strategy that ensures reliability and consistency.

Component Testing

Each Angular component undergoes rigorous testing through multiple approaches:

  • Unit tests with Jasmine and Karma for isolated logic
  • Integration tests with TestBed to verify component interactions
  • Visual regression testing through Chromatic to ensure design consistency
  • E2E tests with Cypress for critical user flows

Accessibility

Our automated accessibility testing helps maintain WCAG compliance, making our components usable for everyone.

Cross-Platform

Extensive cross-browser testing guarantees consistent behavior across all platforms and devices.

Documentation

Documentation is crucial for design system adoption. Through ZeroHeight, we’ve created an interactive learning environment where developers can explore components in real-time.

Our documentation goes beyond basic usage guidelines, offering practical examples and best practices drawn from real implementation scenarios. The platform maintains perfect sync with our design files, ensuring that documentation evolves alongside the design system.

Angular Component Documentation

For Angular components, we provide comprehensive documentation that includes:

  • Interactive examples with stackblitz integration for live code editing
  • API documentation generated from TypeScript interfaces and JSDoc comments
  • Usage guidelines with code snippets for common implementation patterns
  • Performance considerations and best practices specific to Angular

Regular updates and clear changelogs help teams stay current with the latest improvements and features.