EDS Colour Palette

[vnys]

TL;DR We need to fix the colour palette, the light colours are too bright.

In order to be as much in line as possible with the official style guide in Equinor, we have re-used the brand colour palette where we can in the Equinor Design System. That means avoiding the primary colour, Energy Red, as the colour red has a specific meaning in monitoring dashboard applications – and using the secondary colour Moss Green instead as the primary colour in the default theme, and Slate Blue in the dark theme. We have also deliberately used a dulled-down colour palette to focus the user’s attention on the alarm colours instead of the ui components, and we have used the very light colours such as Lichen Green, Mist Blue and Spruce Wood as backgrounds and to denote state, such as hover, active etc. And lastly, when designing the dark mode,

There are some problems with this strategy:

1. Using a dulled-down palette in applications with alarm colours makes perfect sense. In a case where we want to promote content however, such as in Energy Vision, it does not work.
2. Using the light secondary colours to denote state does not work on projectors, citrix and old monitors. We have received feedback from several users about this issue, the latest one being clients complaining that they cannot see which page they’re on in the <Pagination /> component.

We have discussed several solutions to the problem, one of them being to use bold text in hover states – but the underlying problem is that the colour palette itself is not optimal, and without a robust foundation to build on, we cannot expect anything that’s based on it to function robustly either.

There are several possible directions we can investigate:

1. Should we expand the original scope of EDS from “data heavy desktop applications”? In his article “8 point grid typography on the web”, Elliot Dahl uses three main archetypes of typography systems – which can easily be translated into colour systems too in our case – marketing sites, blog/info sites and product sites. Perhaps we should define the different use cases for EDS using a similar approach. This would also mean talking to our users, and preferably get read access to some Figma projects.
2. The media-query “prefers-contrast” is coming soon. One way to solve the light colours could be to design a high-contrast theme.
3. We need to test all the components on bad monitors to pinpoint all the areas where the colours fail. This is as easy as visiting focus rooms and meeting rooms and pulling up the storybook – or we could visit the team in Stavanger who had the specific problem with the <Pagination /> component.
4. We need to fix light mode before we can fix dark mode, whether we like or not.