Colours

Primary colours

Our primary brand colors are Volue Deep, a dark teal, a light green and a subtle light yellow, as well as white. These are the colours we use for the overall Volue brand, and are used to provide recognition and consistency throughout all brand communication.

Volue Deep, the teal and the green are important colours, unique to Volue, and should be used for identification and recognition, with the subtle light yellow bring the warmth to the solid, clean base. White plays an important role in all brand communications and should provide balance, ensuring a light, clean feeling with enough space to breathe within the compositions of text and images.

Volue Deep and white are also the two colours we use for our logo – using dark logo on white and light backgrounds, and white logos on blue, and dark coloured backgrounds. Read more about logo use in the logo chapter.

Colour hierarchy

This is not intended to be an exact representation of the amount to be used of each colour, but can be used as a guide to indicate the hierarchy and balance between the colours to ensure a consistent expression of the overall Volue brand.

Secondary colours

Our secondary palette is expanded with a range of colours; we have defined a set of hues, or key colours as we call it, graded in increments of value.

The secondary palette can be used for illustrations, infographics, visualizations and details in typography as well, to complement the blue, green and white, when communicating about Volue in general.

This set of colours balance out the primary colours, providing a versatile experience of depth and vibrancy in our communication.

It is important to remember that these colours are secondary, and should therefore not be used in logos.

Blue

Teal

Green

Yellow

Orange

Red

Pink

Plum

Purple

Aqua

Generatives

This palette ensure a rich colour landscape with flexibility and character. The main use of the expanded palette is for our wide range of product families, in which each family has their own key colour assigned to their generative expression.

Our digital brand tool, for generating visuals to use in marketing and communication, can be accessed here.

Read more about the colours for generatives here.

Background colours

In the expanded colour palette we have defined a set of subtle colours used primarily for backgrounds, and complementing the key colours. This for example can be for details in the generative illustrations to get more depth and substance in the expression, than a flat, single colour would achieve on its own.

These colours can be a supplement in infographics and visualizations, as well as a contrast to white backgrounds.

Grey tones

Grey tones, along with black and white, are used for functional details within communication and interfaces.

Product families

Every product family has its own generative pattern along with assigned colours. For each generative we define three colours; background colour, line colour and highlight colour.

All generatives for product families use a dark blue background, Blue120, so that is the same for everyone. Then each product family has their assigned key colours for the line colour and highlight colour.

Colours and patterns are not interchangeable. A pattern should never be used in other colours than the ones assigned to them. Nor should a pattern be used for another product family than its own.

For Water the key colour is blue

For Energy Market Services the key colour is teal

For Optimisation the key colours are yellow and teal

For Construction the key colours are red and blue

For Power Grid the key colours are aqua and blue

For Insight the key colours are purple and blue

For Trading the key colours are yellow and red

For Spark the key colours are purple and green

Products

For singular products within the product families the generative patterns are inverted to a light theme of colours.

Each one of the products has their individual generative. The pattern follows their parent family, but for the colours we use the full range of the expanded palette so that no two products have to share the same generative, and each product within the same product family has their own key colour.

Generatives for products use a light background of value 10 of their assigned key colour. The line colour should be of value 25 of the key colour, and the highlight colour is value 50.

The formula is as follows:

Background colour:
KeyColour10

Line colour:
KeyColour25

Highlight colour:
KeyColour50

Below are examples of the visual expressions for singular products within the Construction Software product family. The pattern itself is the same as their parent, but we switch to a light colour theme, with the option to utilize the full key colour range of our palette.

UX colour palette

Wave is our digital design system – a tailor-made library of user interface components, behaviours and utilities for designers and developers designing our products and digital services.

Based on our brand colour palette, we have defined a selection of colours specifically for Wave, and are classified as UX colours, as we like to call it. For our products and digital services, this palette of colours are used exclusively. Each colour in Wave has it's defined purpose. Colours should not be mixed about, nor should any new colours be added in the mix.

Read more about Wave and the use of UX colours here.

Primary

Volue Deep is our base primary colour, and is accompanied by a darker shade and three lighter shades. These colours make our primary colour palette.

The primary colour palette is used only for the main navigation elements, such as left panel and top headers.

Accent

We have defined Teal100 from the brand colour palette as our base accent colour, with darker and lighter shades as well, for flexibility and optimization.

The accent colour palette is used for all interactive elements, such as buttons and inputs, including highlights of labels and messages. The accent colour is differentiating the content from the main navigation elements, and should therefore never be used for the navigation elements themselves.

Shades

Our shade palette range from black to white, with a defined selection of functional greys.

The shade colour palette is used for displaying texts, disabled states of elements, and alternative backgrounds, and ensure your content is contrasted correctly.

Notification

Each color in the Notification colour palette is selected intentionally to provide meaningful feedback within our products.

These colours are defined specifically for their functional purposes in digital systems, and are not available in the brand colour palette.

Blue
Blue is used to indicate informative notifications, progress, and labels in the system.

Green
Green is used to indicate the success of the process. Green can also be used for highlighting labels and notifications in the system.

Orange
Orange indicates a warning or that progress is hindered. Also can be used for highlighting labels and notifications in the system.

Red
Red indicates error states and messages. Also can be used for highlighting labels and notifications in the system.

Extended palette

The extended colour palette is used only for data visualisation purposes, and information highlighting.

These colours are found in the brand colour palette as well, as secondary brand colours.

Universal design

It’s important that communication and ­services are ­user-friendly and accessible for as many people as ­possible, regardless of abilities or disabilities. Therefore, there are some important rules to remember when applying colours and deciding on sizes, to ensure that all our communication and materials are designed consistently.

To ensure good readability, all text must have sufficient contrast to the background. This is important for all users, especially under demanding lighting conditions. When working with small print, it is doubly important to have good colour contrast against ­backgrounds. Avoid using light shades for text on light backgrounds, or dark shades for text on dark backgrounds.

Colour contrast

Contrast is based on brightness, where ­maximum contrast is 21:1 for black to white. For contrast ­measurements it doesn’t matter what the foreground or background colours are, because user experiences vary greatly. A great many users are very light sensitive and may prefer dark background with light text. Contrast requirements depend on the size of
 the text.

Large text is defined as 18 pt and larger, and 14 pt and larger for bold text style. If you're designing for web and prefer text sizes in pixels, 18 pt equals to approximately 24 px, and 14 pt to approximately 19 px.

WCAG 2.1 sets out the size of the text:

Contrast requirements – AA (minimum)
Large text: 3.0:1
Small text: 4.5:1

Contrast requirements – AAA (recommended)
Large text: 4.5:1
Small text: 7:1

Read more about accessibility here

Interactive contrast checker

Colour systems

In order to reproduce colour accurately in different applications, it is important to use our specific colour formulas which have been tested and converted to be consistent across different media.

Be sure to choose the correct colour system according to your paper type and printing method, which is explained as following:

Pantone (PMS):

This colour formula is used only when offset printing with spot (Pantone) colours. It is the most accurate method of reproducing colours. For example: stationery.

CMYK:

This colour formula is used for 4-colour process printing and digital printing. It is the most commonly used formula for Volue printed materials, since it is best for printing applications that contain full colour images. For example: brochures, posters and product sheets.

RGB / Hex:

This colour formula is used for digital, on-screen applications only. For example: our website, web banners, animations and powerpoint presentations.

Download