The Fortum Web Colour Palette is an extension of the Fortum brand colours, for use on websites, digital applications, and services. It includes lighter and darker shades of the brand colours to ensure a wide range of accessible colour combinations. In addition, it includes two additional colours and colour shades for Energetic Orange and Power Red, as well as the Neutrals Palette, which includes the grey shades and black.
The colours are documented in the photo and the table below. They are also available in the Elemental (Design System) Figma library for designers and anyone working with Figma as a tool. For developers the colours are available from the Elemental codebase as colour tokens.
For more details about the Design System and how to get in touch, please visit our Design System website: https://design.fortum.com/
Colour variant (s) | Documentation |
|---|---|
| IvyGreen-900 | One of the brand primary colours. Can be used for backgrounds, and to be paired with PoweringGreen-500. Also to be used as a text colour on IvyGreen-100 and IvyGreen-200 backgrounds. One of the primary logo colours. |
| IvyGreen-600 | The primary colour for Design System web and native components. |
| Colours-500 (Except PoweringGreen-500) | Graphics AA (on primary (white) + secondary (light grey) background). PoweringGreen-500 is not accessible on these backgrounds. |
| IvyGreen-400 | Dark theme primary colour for Design System Web and Native components. |
| Colours-100 & 200, ElectricYellow- 400, ElectricYellow- 300, EnergeticOrange-400 | Backgrounds. ElectricYellow-300 and BalancingBeige-100 are brand additional colours. |
| PoweringGreen-500 | Accent colour in Dark theme. Text colour on IvyGreen-900 background. One of the brand primary colours and one of the primary logo colours. |
| BroadBlue-900, Colours-700 (text colour accessible on the 100-200 shades within their own palettes) | BroadBlue-900: One of the brand additional colours. Text colour on blue backgrounds. LavenderPurple-700: Also a component colour on purple backgrounds. BroadBlue-700: Lightest text AA (on primary (white), secondary (light grey) backgrounds. Link colour in some cases. |
| Colours-600 | Lightest text AA (on primary (white) + secondary (light grey) background). PowerRed-600: Alert colour in light theme. |
| LavenderPurple-300 | One of the brand primary colours. |
| BroadBlue-400 | Colour tokens: info, text.link and notification.info.background in dark theme. |
| DuskOrange-400 | One of the brand additional colours. |
| PowerRed-400 | Alert colour in dark theme |