Multi-branding in Nucleus

Nucleus as the design system for British Gas brand enables British Gas customers to have a better web experience. Nucleus is built from small elements, such as colours, fonts, typographic styles, and visual assets - these form its foundation. These foundations were brought together to form components. Nucleus components were originally designed for British Gas products and journeys. But as the system evolves and components mature, Nucleus wanted to discover its adaptability as a design system for other Centrica brands as well.

Can Nucleus support other brands?

In order to support other brands, we wanted to discover how the Nucleus components will look like for another Centrica brand. This effort includes the discovery of any technical debt in the path to achieve multi-brand. We chose the British Gas Evolve brand to do a proof of concept to explore Nucleus as a multi-brand design system.

How did we start discovery?

Header & Footer

Firstly, we wanted to make small and simple changes and visualise its impact. So, we started with Evolve brand change in ns-header and ns-footer components. With few changes in the Nucleus template and style, Evolve brand header was recreated in Nucleus. We were able to visualize the changes parallelly in our Nucleus Storybook.

CTA

Then we decided to pick a component that would have an impact across all journeys in Evolve brand. We identified ns-cta as a vital component to assess multi-brand support for Evolve which is used in all pages of Evolve. Nucleus offered 2 variations in CTA - direct, and text. We faced our first challenge when Evolve brand needed an additional variation of CTA – bare. The ns-cta component was then enhanced in the component's template and style to support the Evolve brand bare CTA variation.

Approach

We were able to make progress for decorations and form elements too. As we progressed to recreate Evolve brand in Nucleus, we realised we must provision Nucleus to enable multi-brand support with both British Gas and British Gas Evolve templates and styles without compromising each other’s features. This paved the path to split the styles from Nucleus to brand-specific style files for each component. Also, the build script was updated to introduce the BRAND-TYPE variable to hold brand names. This variable takes care of picking the right brand-specific styles file for each component while packaging the Nucleus design system application for deployment.

This was a major stepping stone in the Multi-brand approach.

Nucleus CTA Style

.text {
   &:hover,
   &:focus {
        color: @blue-dark;
        text-decoration: underline;
      }
}

British Gas CTA Style

.text {
  &:hover,
  &:focus {
       text-decoration-color: rgba(@slate, 0.25);
   }
}

Design Tokens

After splitting brand-specific styles from Nucleus styles, we hit our next roadblock on how to define core foundation like fonts, colours, typography, spacing for each of the brands in Nucleus common style file.

In Nucleus, we have already defined British Gas foundation colours in the form of name/value JSON pair - design tokens. The design tokens had the advantage of accessing their value within any web component JavaScript, styles files and another JSON token. So, we decided to leverage design tokens to define all foundation layer identities for each brand.

  "colour": {
   "primary": {
     "slate": {
       "name": "Slate",
       "value": "#333F48"
     },
     "white": {
       "name": "White",
       "value": "#FFFFFF"
     },
     "cyan": {
       "name": "Cyan",
       "value": "#0099FF"
     }
   }
 }

From the above colour foundation design tokens, slate colour definition can be accessed in any component as COLOUR_PRIMARY_SLATE, in style as @ns-colour-primary-slate and in another token as { colour.primary.slate.value }. This provided reusability and helped to peel off as much as the branding details from components and styles into design tokens.

Typography Tokens

Next, we started to focus on tokenising typography foundations. Unlike other foundational elements which had single value dependency, typography had dependencies on fonts, font families, sizes and styles like bold, italic, regular, thin etc. The font sizes were derived using the modular scale approach for British Gas. But what if another brand uses a different approach to derive its font sizes?

The team gathered to discuss the approach for tokenising typography and decided to handle the sizing approach at each brand level token so that each brand has the flexibility to choose its modular or linear scale values and also the unit of representation like px, em or rem.

Spacing Tokens

Finally, we reached our last piece of work on the road to Multi-branding. Spacing tokens.

Spacing Techniques

We used linear scale and modular scale sizes to scale components across viewports for better user experience as well as to design different layouts for better use of available viewport sizes.

We did iterations to audit all spacing sizes used in components and decided to unify the approach in defining spacing tokens.

Challenges ahead

• A definite set of spacing sizes has to be identified.
• Scalability across viewports with new spacing sizes has to be verified.

What Next ?

With foundations being tokenised, Nucleus will be ready for other Centrica brands to adopt the Nucleus design system for a better user experience. We will also be exploring more ways to enable other brands on our design system... stay tuned!