GitHub
Colour
Colour is used to convey our brand’s values and personality. It also helps communicate status and bring meaning to an interface. Maintaining colour consistency is essential for visual balance and ensures our users understand our products at Shell.
Structure
In order to understand how colour is used in Shell DS, it’s useful to recap on how the design system is structured.
This layered structure enables designers and developers to easily change the colour theme of a product built using the design system. Foundations and Fabrics are where colours are defined and consumed.
Foundations
Foundations contain all colours from Shell’s main brand palette and are exposed as a style library in Figma and as Design Tokens in code.
Learn more about colours in foundations and how to use them in our foundation colour guidelines.
Fabrics
Fabrics define how a colour should be used. They connect foundation colours to their semantic meaning. They are exposed as a style library in Figma and as Design Tokens in code.
Learn more about colours in fabrics and how to use them in our fabric colour guidelines.
Is this page useful for you?
Your feedback helps to improve our documentation.