top of page

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.

Methodology

Scrum, Design thinking

Technologies & Tools

Figma, Figma variables & modes, Token Studio, Style Dictionary, React, TypeScript, MUI, Azure DevOps, Asana

Get in touch with our Station Administration expert

Stefan_edited.jpg

Stefan

Software Engineer

  • LinkedIn
  • Youtube
  • Xing
  • Twitter
  • LinkedIn

Thanks for submitting!

bottom of page