Notes in blue to be expanded.
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.
Changing CSS variables (not tokens) in manual way
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.
Each component supports RTL via HTML lang tag and has supporting css
See direction in storybook
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).
Brand creates new CSS file with new css values, hands to a developer to implement
mode and context are delivered through component prop.
Theme is delivered by overriding tokens. “Dark switch needs to be investigated“
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.
CSS Class name overrides. Use the theme/mode prop to pass string for pre-defined css values
Work out what the process is for the 3 levels of overrides.
We’re not using theme provider we’re using css variables
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.
Manual intervention is done by developers. There are a lot of tokens, it will take several days to apply tokens. There is no automation. Automation comes next.
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.
Manual developer intervention to update component versions + tokens
Brands can react, but don’t need to, and then get a developer to make the change.
This is a back end responsibility
7. Performance & accessibility
Theming must meet Reckitt’s performance and accessibility standards
Enter text…