Theming

What are we trying to achieve?

Every decision we make in the creation of this design system needs to serve the overarching goal of allowing brands to create websites at least 50% cheaper and 2x as fast without compromising quality and scalable by design.

We want to create a design system that is flexible and can allow every brand to express their brand style throughout the site and every component within it (within reason and alignment with our design system strategy).

What are the requirements?

1. Must be able to deliver for multiple brands

• The design system must be flexible and work with any brand.

2. Internationalisation

• The design system must support internationalisation

  • RTL

  • Long languages

  • Character based languages

Example use case:

• Dettol Germany offers both a German version and an English version. Because German has longer words, they want to reduce the heading sizes on the German language but not on the English language.

• Vanish Arabia offers both English and Arabic language versions, but on the Arabic site the text size is larger and we don’t allow bolding.

3. Theming - Changes that affect the whole site

• Brands must be able to apply whole site themes that reflect their Brand goals and strategies - For example:

  • Light and dark mode - Not to be confused with individual component colouring or “mode”

  • Character based languages

Example use case:

• Finish wants to support a “Dark Mode” theme which changes all of the colours across the entire site to darker versions – but still maintains “green” for Eco, etc (see context).

4. Context (not to be confused with theme) - Style part of a site differently than the rest

• Brands must have the ability to change individual instances of a component’s style to reflect brand or campaign design goals.

• Brands must be able to accommodate multiple brands on the same site

• Brands must be able to accommodate internationalisation on the same site

Example use cases

• Schiff Vitamins is a multi-brand site which has pages for Neuriva and Mucinex. The Mucinex content needs to reflect the Mucinex brand; the Neuriva pages need to reflect the Neuriva brand

• Finish wants to apply a specific colour palette for each product range. So a teaser for “Eco” has different token values to a teaser for “Quantum Ultimate”

• Dettol Germany offers both a German version and an English version. Because German has longer words, they want to reduce the heading sizes on the German language but not on the English language.

5. Maintenance

• Brands must be able to adjust their themes & sites (on initial setup and in-life) with cost and time efficiencies. I.e minimise hands on effort.

• Developer's time must be protected by reducing the amount of manual effort required for theming and automating as much as possible.

6. Propagation

• When new components and tokens are available. Brands must have a way to obtain these new items with no breaking changes.

• When the Design System Team decide a component or token is no longer needed, we must be able to depreciate that item and propagate that decision to all websites with no breaking changes.

• All brands must have the ability to make use of any new component or token we create. I.e We don’t create brand specific components and tokens in the base design system.

7. Performance & accessibility

• Theming must meet Reckitt’s performance and accessibility standards

What theming capability does the MVP have?

• As of now we have no token capability. We are using CSS variables

  • In the future we will look at token management which will deliver the development efficiency that we need.

• We are going live without tokens

What is our ambition - post MVP?

tdb