
Smart Grid
Design System
Multi-platform, multi-brand, and tokenized Design System
Challenges
Elli, a brand under the Volkswagen Group specializing in energy and charging solutions, faced the challenge of managing multiple products across different platforms. This challenge demanded consistent branding for various VW subsidiaries, resulting in component inconsistency, redundancy, and inefficiencies in project development.
Implemented solutions
To address the issue, Elli initiated the development of a multi-platform, multi-brand, white-labeled, and tokenized design system. The design system aimed to establish a single source of truth for all components, colors, spacing, typography, icons, and other design elements, ensuring consistency and accuracy across all Elli platforms: Figma, Web, Android, and iOS.
By auditing design elements, styles, and components across every Elli product, the Design System team could create a variable architecture and global components for all products tailored precisely to Ellis needs. This also emphasized collaboration not only between designers and developers, but also across various products, platforms, and brands.
Reply's Contribution
-
Creation and maintenance of the variable/token architecture
-
Synchronizing all platforms with variables/tokens through Style Dictionary
-
Conducting audits of components across diverse platforms, products, and brands
-
Designing Figma components with integrated variables/tokens
-
Implementing web components in alignment with the Figma design (React, Style Dictionary, Storybook, MUI)
-
Creating and distributing icons across all platforms
-
Comprehensive documentation of components and variables, including the component anatomy, specifications, as well as do’s and don’ts
-
Consulting on design and development
Key features
Synchronization of all platforms using variables/tokens established through the Figma plugin “Token Stdio”, Figma variables, and Style Dictionary
A collection of reusable components for the diverse platforms, styled using those variables/tokens
Ensuring consistency and scalability of components for easy modification or addition of brands and themes, but also being flexible enough to adapt to the needs of diverse platforms
Comprehensive guidelines for each component and all variables/tokens
Impact
By standardizing the design system and providing essential services, REPLY enabled Elli to save significant time and resources in the long run. The cohesive design system facilitates efficient collaboration, streamlined development, and maintained consistent branding across various platforms and products within the Volkswagen Group.