The EDS's look and feel is light and airy. Colour helps show hierarchy, champion the Equinor brand and indicate interactivity.
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.
Many people have trouble differentiating certain colours, so make sure colour is not the only way to convey certain information.
- Do not add additional 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.
Interactive feedback colours for
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
Tertiary text colours are nested into components that are already assembled.
UI background colours
Default (which is white) or
Medium greys for the interface background.
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.
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
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
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.✏️ Edit this page on GitHub