GitHub
Themes
The layered structure of Shell DS enables designers and developers to easily change the theme of the products we build using the design system.
Fabrics
Fabrics are the theming layer of the design system. Multiple fabrics are available depending on whether you need light or dark mode, or a theme for one of Shell’s sub-brands like Shell Recharge.
Fabrics consist of design tokens including colours, typography, spacing and other design decisions which govern how a product should look.
Currently, colours are the only tokens which change between each fabric. Although it’s feasible to extend or change other tokens, doing so could affect consistency and brand alignment and so needs to be carefully considered. We advise against overriding rules defined in the Design System and recommend contacting the Shell DS team if the need arises.
Tokens
Naming
Semantic naming of our design tokens is key to our fabrics and is a constant between each fabric; they do not change between major versions.
Naming has been carefully considered and structured. We avoid naming which suggests a colour is light or dark and never refer directly to a specific colour. Instead, we use names which show our intent.
For example, we use the terms subtle, medium and strong to describe intensity in light or dark mode without ambiguity. The terms primary, secondary and tertiary refer to accents to reflect the overarching Shell brand colours.
Management
Figma is the source of truth for our colour and typography tokens which we make available by publishing style libraries from the Shell DS teams on Figma.
We have built development tools which connect to Figma, to download and translate tokens to modules. These can be imported and used within an application.
Changing fabrics
In design
In Figma, designers can switch themes using a plug-in called Themer. Themer works by synchronising with JSONBin.io , a cloud-based storage service. To save designers creating their own fabrics, we can configure Themer with the same config. Once configured, the plug-in will load all fabrics available at Shell. To change fabric, with the plug-in running, select elements from your design, select a fabric and apply.
Reach out to the Shell DS team for the Themer API key.
Note: we are developing our own version of Themer at Shell which will make changing fabrics even easier.
In development
Since Figma is our source of truth, we have scripts which are read from Figma that create our fabrics dynamically. On GitHub we have a single repository called Shell DS Patchwork which contains all packages for handling fabrics.
The package containing the fabrics which can be used with Shell DS is called Shell DS Fabrics and is published to the sede-enterprise organisation on GitHub.
New fabrics can easily be added by following the README file included in the repository.
Resources
Is this page useful for you?
Your feedback helps to improve our documentation.