This version of the design system is deprecated and no longer maintained. To access the latest documentation, click the arrow next to the logo and select Nova Tycho.
Introduction
The Nova 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.
Color palette
We define colors based on the role they play in the interface. There are 6 color palette, which we use to generate the values of all the color variants in the palette.
Brand colors
The brand colors characterize the overall visual appearance. 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 colors
Neutral gray colors are used for text, dividers, borders and backgrounds.
State colors
Nova also offers 2 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.