Nova Design System uses a color system to guide our users, create a branded look-and-feel, draw attention to important information, and make content more accessible for everyone.

Banner Colors

Color palette

Nova colors palette consists of primary brand colors, and two complementary UI state colors. It has also an array of grey colors to use for text and backgrounds. Our color system helps you apply color to your UI in a meaningful way. In this system, you select a primary and a secondary color to represent Elia's brand.

Foundation Colors

Brand colors

The brand colours characterise 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.

Banner Brand Colors

State colors

Nova also offers 3 main UI colors used through your components such as action buttons, alert messages, or form elements. Input fields, for example, can get a positive or destructive feedback.

Banner State Colors

Supported colors

The supported colours are mainly used for graphical visualisations. In annual reports, brochures and flyers, but also in PowerPoint presentations, complex content is often visualised; here, a broader colour palette is needed for a very diverse design.

Banner Supported Colors

Color tones

Color tones are tints that apply color to the UI, and their values are generated from the color palette. Each color will have 10 variants available. Color variations are important when implementing styles for different states, such as your buttons.

Banner Tones Colors