Colors
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.
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.
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.
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.
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.
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.
