Introduction
The Nova colour system helps you apply colour to your UI in a meaningful way. In this system, you select a primary and a secondary colour to represent Elia's brand.
Colour palette
We define colours based on the role they play in the interface. There are 6 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. Especially orange and petrol are predominant, dark grey is not really a filling colour, but is used around other brand colours for headlines, text, dividers, borders and backgrounds.
Neutral colours
Neutral gray colours are used for text, dividers, borders and backgrounds.
State colours
Nova also offers 2 main UI colours used through your components such as action buttons, alert messages, or form elements. Input fields, for example, can get a positive or destructive feedback.
Colour tones
Colour tones are tints that apply colour to the UI, and their values are generated from the colour palette. Each colour will have 10 variants available. Colour variations are important when implementing styles for different states, such as your buttons.