Colour
The EDS’s look and feel is light and airy. Colour helps show hierarchy, champion the Equinor brand and indicate interactivity.
Guidelines
Use the colours provided in the EDS. These have been tested to make sure they will either meet or exceed the accessibility guidelines. Our colours include the brand colours, but also have supplementary colours for infographics and similar.
Tip:
Many people have trouble differentiating certain colours, so make sure colour is not the only way to convey certain information.
Don’t
- Do not add additional colours.
Styles
Interactive colours
Moss Green is dedicated to be the Interactive Primary colour for internal digital interfaces and experiences.
This is different from other branding seen in print and marketing. The decision was made to guarantee that there is no confusion with errors.
Slate Blue is dedicated to be the Interactive Secondary colour.
Energy Red is strategically not used for components in EDS since it is easy to misunderstand as an error or alert colour. If you are developing brand/communication related products, please refer to the Equinor Brand Center to see how to utilise Energy Red as part of the interface.
Feedback colours
Interactive feedback colours for Danger (red), Warning (orange) and Success (green) are also available for use.
Text + static icon colours
When building interfaces, only use the Primary text colour which is used for Headings and for Body text. The Secondary and Tertiary text colours are nested into components that are already assembled.
UI background colours
Choose between Default (which is white) or Light and Medium greys for the interface background.
The other UI Backgrounds are nested into components that are already assembled.
Please do not add additional background colours—the default theme is light and airy and does not allow for dark mode at this time.
Infographic colours
Please check the Equinor Brand Center for color usage and principles related to infographics. There are two sets of infographic colours to choose between: Infographic Primary and Infographic Substitute.
Primary infographic colours
Aim to avoid creating multi-coloured charts and diagrams. Monochrome charts and diagrams are preferred wherever possible. Please take care when using reds with blue and green colours to avoid making the red data points appear as a warning or negative data.
Substitute infographic colours
The Infographic Substitute colours have been developed for enhanced legibility. These can be used when the Infographic Primary colours do not offer enough clarity and definition.
Exceptions for interactive and infographic colours only
If it is needed to use additional interactive or infographic colours for domain-specific requirements, make sure to test the added colours for contrast. This is for domain-specific cases only, and new colours are not to be chosen based on personal preferences. Use high contrast colours, as this both increases general readability and includes the needs of users with impaired vision.