Back to Case Studies
Design SystemsFigmaTokensMulti-brandFlutterAngular

Multi Brand Design System for Viessmann

Duration
2022 – Present
Role
Design System Lead
Platforms
Web, Mobile, HMI
Client
Viessmann → Carrier

Challenge

When I joined Viessmann in 2022, the Design System existed as a basic Figma Library with minimal documentation and non-responsive components. There was no token structure, no theming capability, and no alignment across teams or platforms.

Approach & Leadership

01

Foundation & Alignment

Conducted a full component audit and interviewed all stakeholder groups (design, development, product). Defined usage rules and component lifecycle — removed outdated parts, redesigned and enhanced others. Outcome: a clean, unified component baseline as foundation for further scaling.

02

Scaling Responsiveness & Flexibility

Reworked every component to be fully Auto Layout enabled and responsive in Figma. Introduced cross-platform design structure (mobile, Web, HMI).

03

Enabling Theming & Speed

Integrated Design Tokens via Tokens Studio, enabling live switching between Light & Dark Mode across the system in seconds. Later migrated the entire Design System to native Figma Variables, ensuring long-term viability without dependence on third-party tools.

04

Multi-Brand Transformation

After Viessmann's acquisition by Carrier, I led the initiative to evolve the system into a multi-brand framework (Viessmann, Carrier, Toshiba). With token architecture in place, teams can now switch entire UI designs to different corporate brands with a single click, including light/dark mode.

05

Brand Evolution Ready

When Viessmann introduced a new brand strategy and typeface, we integrated the new font system-wide within hours thanks to the flexible token setup.

06

Platform Adaptation (Web → Mobile → HMI)

Built a token-driven HMI mode adjusting UI to hardware specifications automatically. Screens designed for mobile can now be converted to HMI layouts in seconds using token-driven rules.

Impact

Design creation speed
Significantly accelerated
Design consistency
Major improvement across teams
Developer handoff
More precise, less rework
Multi-brand scalability
3 companies, light & dark, HMI
Design System adoption
High engagement across teams
Future readiness
Fully prepared for expansion

Technical Implementation

Design
Figma Variables & Tokens, responsive components, advanced Auto Layout
Development
System implemented in Flutter and Angular
Documentation
Custom tools for tech docs, Zeroheight for design docs

Key Takeaway

I transformed Viessmann's design system from a static component library into a highly scalable, multi-brand, token-driven ecosystem powering Web, mobile, and HMI. This shift dramatically increased design velocity, consistency, and adaptability during major company transitions including mergers, rebranding, and platform expansion.

Let's create something cool together.

I'm always excited to discuss new projects and opportunities. Whether you need a design system, UX improvements, or AI-powered workflows — let's talk.