At Caplin we got to 200,000 lines of code before we made a proper implementation of White-labelling. Don't wait that long for your product.
Often a product is made with a single customer in mind, so you can push off thinking about the customer needs in a broad sense for years. It's great because it gets your product out the door, but the longer you wait the more the future work piles up for when you want your designs to adjust to the custom colours, fonts and icons a given customer needs.
What makes a White-label design
The colours used must be configurable with defaults out of the box. At minimum you want a configurable Primary Branding colour. Some brands use two colours in their branding, so supporting a Secondary Branding colour in your designs makes a lot of sense depending on how prominent the look of your product is. Typically background colours are white or light greys and would not be changed. Generally grey tones would not be changed for specific customers and the relationship between them must be carefully planned and alternate approaches are hard to come up with beyond light and dark modes.
Fonts is another configuration point. Most of todays user interfaces have settled on using a Sans Serif font. It works well and gives a clean look. Larger companies typically have a corporate font, often they have a default Sans Serif choice and an alternative Serif font. At a minimum you should support configuring the default(body) font in the product. For headers you might want to support a second configuration choice so a Serif or Script font can be chosen.
Another common configuration is the type of icons used. This can be done by switching between collections of icons bundles as an Icon Font Face or SVG icon sheet. You can also do it by replacing individual icons at a time with a dedicated SVG file. The very important point here is the define standard icon sizes and how the drawing must fill the available space in terms of distance to the edge and visual weight. Mixing fully filled icons with lightweight or padded ones looks at best slightly odd and at worst unprofessional. As a minimum you need to support a configurable customer logo.
Components Design
At a minimum you need to get a handle on the types of components the product uses or will be using. The components that you use every day may seem exactly the same, but when you dive in different implementations work slightly different, which leads to different use of colour in different interactive states.
Don’t forget to look at the components used from a Technical, Usability, Product Feel and Future-proofing perspective.
Later you need to build on this by looking at Design Patterns, Templates and Pages, but before that you need to look at and decide which foundation to build on.
From Scratch vs Derivative Work
Unlike in the past there are several well documented Design Systems available as Open Source or very affordable. You can get very far using a modified variant of an existing system such as Material Design, Carbon Design System, or Fluent Design System. The downside is that they each are based on assumptions that can become a constraint to you. If you for instance need to support dual branding colours Material Designs concept of primary colour by topic may not be a fit.
Technically you also want to consider which libraries can be changed to follow the adopted design rules. Especially layout rules have a myriad of details that may break the consistency.
So make a careful analysis on the available options before deciding. Once committed it is hard to change tracks.
Some Design Systems to consider;
Choosing one can often be part rational part political. People unused to design thinking will tend towards a quick decision based more on mainstream credibility of the sponsoring company rather than the detailed fit to the product at hand. When thinking about whether to change the existing Design System at Swisscom there was a strong voice internally to base everything on Material Design with little modification. The danger of adopting a popular system wholesale is that you give up uniqueness and become bland. Our visual system treats the familiar like air, so it becomes invisible, leading to your product being easier to glance over. Consider that sometimes it is better to have a look that is slightly off, leading to being remembered by more people.
Foundation, Tone and Language
Independent of components there are many details that make up a design system and some of them are customer brand specific.
When creating digital products the influence of language is often forgotten. Not only does the general length of words vary, but also the length of phrases. A common guideline for writing is to prefer shorter phrases because they are easier to comprehend by humans. The cultural defaults in German and French language of longwinded wording doesn’t work well for User Interfaces where space is limited and the eye needs to scan a form or table to locate a specific piece of information.
Will you allow the customer to configure vocabulary?
Onboarding Process
For white-labelling you want to plan a key branding dimension outside the everyday product development.
The journey the user takes to start using your product and the journey taken to resume work will normally be highly customer dependent.
Branding images are often used as background or illustrations for the Login and Signup process. The places to navigate to during these processes as well as what to do after logging out should be configurable.
People to Involve
When creating a White-label Design System you should be aware that creating anything with any sort of quality will take at least 6 months work and involve both technical and product discussions. For good results I’d suggest creating regular meetings between the Product Manager, UX Designer, Visual Designer and a Frontend Developer. Questions that you need to address are,
- What UI implementation libraries will be used?
- What range of branding and tweaking is supported?
- What are the types of page layouts used?
- What UI Components are used?
- How are UI Components typically combined?
- Will both light mode and dark mode be supported?
- Will the UI adjust between systems such as Web / iOS / Android?
- How are component states reflected visually? (Hover, Active, Focus, Selected, Expanded)
- Will you offer additional configuration of Login / Sign-up / Onboarding?
- How are colours allocated to Chart elements?
- Do specific widgets have dedicated colour palettes?
- Do you have colour scales for urgency / error level / tags?
- Where and how to capture our source of truth in a central place?
Customers
Customers we have helped build White-label Design Systems
- Caplin
- Finnova
- DXC
At Caplin we got to 200,000 lines of code before we made a proper implementation of White-labelling. Don't wait that long for your product.
Often a product is made with a single customer in mind, so you can push off thinking about the customer needs in a broad sense for years. It's great because it gets your product out the door, but the longer you wait the more the future work piles up for when you want your designs to adjust to the custom colours, fonts and icons a given customer needs.
What makes a White-label design
The colours used must be configurable with defaults out of the box. At minimum you want a configurable Primary Branding colour. Some brands use two colours in their branding, so supporting a Secondary Branding colour in your designs makes a lot of sense depending on how prominent the look of your product is. Typically background colours are white or light greys and would not be changed. Generally grey tones would not be changed for specific customers and the relationship between them must be carefully planned and alternate approaches are hard to come up with beyond light and dark modes.
Fonts is another configuration point. Most of todays user interfaces have settled on using a Sans Serif font. It works well and gives a clean look. Larger companies typically have a corporate font, often they have a default Sans Serif choice and an alternative Serif font. At a minimum you should support configuring the default(body) font in the product. For headers you might want to support a second configuration choice so a Serif or Script font can be chosen.
Another common configuration is the type of icons used. This can be done by switching between collections of icons bundles as an Icon Font Face or SVG icon sheet. You can also do it by replacing individual icons at a time with a dedicated SVG file. The very important point here is the define standard icon sizes and how the drawing must fill the available space in terms of distance to the edge and visual weight. Mixing fully filled icons with lightweight or padded ones looks at best slightly odd and at worst unprofessional. As a minimum you need to support a configurable customer logo.
Components Design
At a minimum you need to get a handle on the types of components the product uses or will be using. The components that you use every day may seem exactly the same, but when you dive in different implementations work slightly different, which leads to different use of colour in different interactive states.
Don’t forget to look at the components used from a Technical, Usability, Product Feel and Future-proofing perspective.
Later you need to build on this by looking at Design Patterns, Templates and Pages, but before that you need to look at and decide which foundation to build on.
From Scratch vs Derivative Work
Unlike in the past there are several well documented Design Systems available as Open Source or very affordable. You can get very far using a modified variant of an existing system such as Material Design, Carbon Design System, or Fluent Design System. The downside is that they each are based on assumptions that can become a constraint to you. If you for instance need to support dual branding colours Material Designs concept of primary colour by topic may not be a fit.
Technically you also want to consider which libraries can be changed to follow the adopted design rules. Especially layout rules have a myriad of details that may break the consistency.
So make a careful analysis on the available options before deciding. Once committed it is hard to change tracks.
Some Design Systems to consider;
Choosing one can often be part rational part political. People unused to design thinking will tend towards a quick decision based more on mainstream credibility of the sponsoring company rather than the detailed fit to the product at hand. When thinking about whether to change the existing Design System at Swisscom there was a strong voice internally to base everything on Material Design with little modification. The danger of adopting a popular system wholesale is that you give up uniqueness and become bland. Our visual system treats the familiar like air, so it becomes invisible, leading to your product being easier to glance over. Consider that sometimes it is better to have a look that is slightly off, leading to being remembered by more people.
Foundation, Tone and Language
Independent of components there are many details that make up a design system and some of them are customer brand specific.
When creating digital products the influence of language is often forgotten. Not only does the general length of words vary, but also the length of phrases. A common guideline for writing is to prefer shorter phrases because they are easier to comprehend by humans. The cultural defaults in German and French language of longwinded wording doesn’t work well for User Interfaces where space is limited and the eye needs to scan a form or table to locate a specific piece of information.
Will you allow the customer to configure vocabulary?
Onboarding Process
For white-labelling you want to plan a key branding dimension outside the everyday product development.
The journey the user takes to start using your product and the journey taken to resume work will normally be highly customer dependent.
Branding images are often used as background or illustrations for the Login and Signup process. The places to navigate to during these processes as well as what to do after logging out should be configurable.
People to Involve
When creating a White-label Design System you should be aware that creating anything with any sort of quality will take at least 6 months work and involve both technical and product discussions. For good results I’d suggest creating regular meetings between the Product Manager, UX Designer, Visual Designer and a Frontend Developer. Questions that you need to address are,
- What UI implementation libraries will be used?
- What range of branding and tweaking is supported?
- What are the types of page layouts used?
- What UI Components are used?
- How are UI Components typically combined?
- Will both light mode and dark mode be supported?
- Will the UI adjust between systems such as Web / iOS / Android?
- How are component states reflected visually? (Hover, Active, Focus, Selected, Expanded)
- Will you offer additional configuration of Login / Sign-up / Onboarding?
- How are colours allocated to Chart elements?
- Do specific widgets have dedicated colour palettes?
- Do you have colour scales for urgency / error level / tags?
- Where and how to capture our source of truth in a central place?
Customers
Customers we have helped build White-label Design Systems
- Caplin
- Finnova
- DXC
Ready to take off?
