Umbrella Design System

A security company sells trust. Trust also comes from protection software looking and behaving the same on every device. That was not the situation: Windows, macOS, mobile and the web services each had their own story, their own exceptions, internally even their own names.

We asked before we built. Should protection software look like the operating system it runs in, or like the brand you trust? We designed the scale in steps and tested it with users. The result was not what we expected: customers wanted to see more brand, not less.

Avira · Design System

From silos to a system

Siloed security products became a tokenised, cross-brand system that redefined the pace, standing and strategy of product design.

60 % Brand over operating system Result of user testing

4 Platforms, one system Swift · Kotlin · Windows · React Native

2 Tage to proof Hackathon: tokens in native code

4 Wochen to a brand switch Norton macOS – previously not possible

Inventory

Take stock, then consolidate

Umbrella Design was more than a component library: colour, typography, grid and layout, an icon library — and the content voice, the question of how a security product speaks when it reports danger without causing panic.

The decisive step came in 2022: semantic design tokens. Not „this blue“ but „the colour for a warning“. The architecture separated global from semantic values, kept light and dark mode apart and was built per brand from the outset.

We proved it goes beyond a presentation at a two-day hackathon — the token structure carried into real native development: Swift, Kotlin, the Windows environment and React Native. A proof you can deliver in two days convinces an engineering organisation faster than a concept discussed for half a year.

A system that redefined the pace, standing and strategy of product design.

Semantic tokens

Tokens made the team fast

With semantic tokens the team became so fast and effective that it became the foundation for validating a new design strategy.

Impact

New standing for product design

The impact went beyond tooling: product design was repositioned, UX research spun out into its own team, plus a strong design-maturity assessment and three promotions. Design strategy set directly with the CTO.

On the tokenised stack a launch-ready Norton macOS proof of concept later came together in roughly four weeks: proof that a white-label system can carry a brand switch with little engineering overhead.

Access

Umbrella Design System

From silos to a system

Take stock, then consolidate

Tokens made the team fast

New standing for product design

More projects for Avira / Gen Digital

North Star (Norton App)

Next Design

Product Platforms