Colours

Our colour system inherits the brand colours and leverage those to create Elia Group compliant experiences.

Introduction

The Nova colour system helps you apply colour to your UI in a meaningful way. We define colours based on the role they play in the interface. There are 2 colour palettes, which we use to generate the values of all the colour variants in the palette.

Brand colours

The brand colours characterize the overall visual appearance. Both primary and secondary are available in the brand, but are used for different purposes. Within the Nova context, we call them primitives.

Primary colours characterize the brand.

Secondary colors are mostly used for visualisations.

Primary colours

Orange

Petrol

Turquoise

Dark Grey

Secondary colours

Ligh Red

Red

Dark Blue

Green

Light Blue

Yellow

Intentional colours

Intentional colours are the semantic layer of our system. They communicate meaning, state, and provide clear feedback to the user.

Unlike brand colours (primitives), which express identity, intentional colours express a specific purpose. We map these roles from our primitive palettes to ensure brand alignment, but their function is purely communicative.

Layering

Layering colours control the elevation and visual stacking of your UI. They are used for surfaces like page backgrounds, cards, and containers. Using these tokens ensures a consistent and accessible depth-of-field, helping users understand the structure of the application at a glance.

Emphasis

Emphasis colours create content hierarchy. These colours are applied to text and icons to guide the user's eye toward what is most important (primary content) versus what is secondary or tertiary (supplemental information). This creates a clear reading order and reduces cognitive load.

Emphasis high

Emphasis medium

Emphasis low

Feedback

Feedback colours convey status information. They provide immediate and clear feedback about the result of an action or the state of the system.

This includes colours for:

Information: Helpful information.

Neutral: drawing attention with neutral colours

Success: Confirming a completed action.

Warning: Alerting the user to a potential issue.

Error / Danger: Communicating a critical failure or a destructive action.

Interaction

Interaction colours create affordance and communicate the state of an interactive element. They show users what they can (or cannot) do by providing visual cues for different states, such as:

Hover: The user is considering an element.

Focus: An element is selected (often via keyboard).

Active / Pressed: The user is currently interacting with the element.

Disabled: The element is not available for interaction.