Why choose a white-label design system?

‍

The idea of a single design system having the capacity to adapt to any number of brand languages was difficult to imagine until quite recently. These types of systems, called white-label or multi-brand systems, are becoming more and more relevant. Even though they have many advantages in the long-term, it can present a challenge to create one correctly.

The main advantage of this customizable system is that it can adapt to the style of any brand, not just the one it was created for. By reusing existing components designed for the first brand, immense cost and time efficiencies are gained across any new brand plugging into the system. And because the scalable system acts as the single source of truth for all brands that use it, teams can ensure a consistent and effective evolution of all connected products.

8x faster

A result of the white-label solution, Huckleberry can bring on new partners 8x faster through the use of their white-label design system.

80% cost-savings

A result of the white-label design system, Spanish bank Caja Rural saves 80% in time and costs adapting its mobile app to each new bank partner.

As an additional business benefit, a white-label design system also opens the possibility for future business models. A traditional B2C experience can easily become a B2B product, sold to partners who want to integrate the experience within their own brand. In the case of Caja Rural, the Spanish bank is selling it’s white-label consumer app to new bank entities. The American insurance company Huckleberry is selling it’s white-label consumer web to other business partners.

Technical considerations as you begin to build a white-label design system.

Flexibility through tokens

When we create a traditional design system, we establish rules and patterns that ensure maximum efficiency and scalability with a certain brand style in mind.

But what if one design system needs to accommodate multiple brands? How can we stay equally efficient and still have each brand look unique?

The key is how we define Design Tokens. Design Tokens are variables that name and store fundamental design decisions (colors, font styles, spacing, border styles, etc) in an abstract way.

This approach is based on three considerations that build on each other:

1. By establishing the necessary tokens and assigning their roles correctly, we create a structure capable of "styling" any brand simply by changing the values of its variables.
2. We call these brand “stylings” themes. Each theme is a set of token values that represent the visual appearance of each part of the experience.
3. Thus, by applying one theme or another to the same component or to the same experience, we allow each brand to express its own style while preserving a common structure.

The challenge with color

Defining color usage with tokens is particularly complex in white-label design systems. Because there are a variety of color uses within a digital experience, and most need to pass accessibility criteria, it is especially important that we make holistic decisions related to color.

In a design system for one brand, color tokens are defined be tier—primary, secondary, etc. But in a multi-brand design system, this type of tier approach is not flexible enough and will be impossible to scale to more than one brand.

For this reason, it is necessary to elevate the level of abstraction in the token structure to an additional semantic layer. With this new elevated framework, we not only have general tokens that describe the value of a color, but also semantic tokens that define the purpose of each color.

Thanks to this semantic approach, we can isolate decisions about color and their relationship between each other in order to work for any brand.

Customization beyond tokens

Thanks to design tokens we can customize a large number of brand attributes such as color, typeface, border styles, shadows, spacing, or even animations through variables.

But there are other brand elements such as logo, icons, illustrations, image style or even tone of voice that we cannot manage through tokens. These types of assets, very important in the expression of a brand, can also be customizable parts in the design system if we treat them as interchangeable collections.

Layout and component limitations

Although there is significant flexibility with a white-label design system, its important to understand that certain component structures and layouts may not be scalable to all brands.

For example, we don’t recommend using excessive type over photography in white-label design systems. If we were to apply a new brand with an especially thin typeface, or extreme x height, legibility would be sacrificed and the layout discarded.

One solution that we have implemented to maintain an efficient and scalable system, but also ensure each brand is represented in the most impactful way is to include a small amount of custom components or modules per brand. This allows each brand to take advantage of the system efficiencies but also not be handicapped by a system that does not fit their brand perfectly.

Tokens and themes in Figma

Figma, for the moment, does not include among its functionalities the use of design tokens as they are conceived in development. Although we can create color and text styles, it is not possible to reference other styles, nor to store certain design decisions such as border radii or spacing.

Even so, the use of styles and components grouped in interchangeable libraries can replicate a new theme throughout the designed pages.

For the library exchange to work correctly it is necessary to be very meticulous when it comes to naming and applying styles, in addition to having all our components and pages perfectly designed with autolayout.

Development versatility

In terms of development, white label design systems are compatible with any ecosystem. The front-end can be applied to all kinds of languages and environments, from React, Vue, Angular or Vanilla to mobile applications or other devices.

The token logic is perfectly adaptable to the many different stacks or practices. We can work with the tokens in the file format that best suits our project: native CSS, SCSS, JS, JSON... as well as apply them to design system development tools like StoryBook.

Design and development alignment

Even though Figma currently does not treat Design Tokens natively as we do in development, there are plugins capable of bridging this gap.

Tokens Studio, for example, not only allows us to unleash the full potential of the tokens in Figma, it also offers us several options to sync with development making the design files a single source of truth. It also allows us update the tokens in code directly from the plugin.

Conclusions

White label design systems can bring immense value if planned and implemented correctly with the right expectations.

Complexity

Even though they will produce significant ROI in the long-term, these types of systems are complex and require a high level of abstraction. Every design decision must be taken from a global agnostic approach, making sure it can scale to multiple brands.

Limitations

You have to be aware that white-label systems have some creative limitations and certain component structures and layouts may not scale to all brands.

Timing

Even though building a white-label design system requires an initial investment of additional time to define the framework, the ROI that we will obtain is enormous and will multiply as we implement new brands.

Team Lineup

It is essential that the design and development teams work together. From our experience, one designer and one developer working hand in hand are enough to lay the foundations and define the token structure.

‍

Author: Gonzalo Sánchez, Lead Product Designer at Far Co

For more information: gonzalo.sanchez@farcostudio.com