Colors
2 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.
| Name | Type | HEX | |
|---|---|---|---|
| Gray | Aa |
Neutral colors | #394D55 |
| Orange | Aa |
Brand colors | #E75420 |
| Amber | Aa |
Brand colors | #F0801A |
| Yellow | Aa |
Supported colors | #FFC100 |
| Red | Aa |
State colors | #CC1D1D |
| Crimson | Aa |
Supported colors | #990035 |
| Green | Aa |
State colors | #138719 |
| Lime | Aa |
Supported colors | #8DA930 |
| Petrol | Aa |
Brand colors | #258998 |
| Turquoise | Aa |
Supported colors | #6AA9A0 |
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.
| Name | Usage | HEX | |
|---|---|---|---|
| Primary | Aa |
Primary colors | #E75420 |
| Brand | Aa |
Brand colors | #F0801A |
| Secondary | Aa |
Secondary colors | #258998 |
Neutral colors
Neutral gray colors are used for text, dividers, borders and backgrounds.
| Name | Usage | HEX | |
|---|---|---|---|
| Neutral | Aa |
Neutral colors | #394D55 |
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.
| Name | Type | HEX | |
|---|---|---|---|
| Red | Aa |
Error colors | #CC1D1D |
| Green | Aa |
Success colors | #138719 |
| Petrol | Aa |
Information colors | #258998 |
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.
| Name | Type | HEX | |
|---|---|---|---|
| Yellow | Aa |
Graphic elements colors | #FFC100 |
| Crimson | Aa |
Graphic elements colors | #990035 |
| Lime | Aa |
Graphic elements colors | #8DA930 |
| Turquoise | Aa |
Graphic elements colors | #6AA9A0 |
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.
Brand colors
Brand colors.
| Name | Value | HEX | |
|---|---|---|---|
| Amber | 50 | Aa |
#FDEFE2 |
| Amber | 100 | Aa |
#FBD9BA |
| Amber | 200 | Aa |
#F8C392 |
| Amber | 300 | Aa |
#F5AC6A |
| Amber | 400 | Aa |
#F39642 |
| Amber | 500 | Aa |
#F0801A |
| Amber | 600 | Aa |
#C66A15 |
| Amber | 700 | Aa |
#9C5311 |
| Amber | 800 | Aa |
#723D0C |
| Amber | 900 | Aa |
#482608 |
| Name | Value | HEX | |
|---|---|---|---|
| Orange | 50 | Aa |
#FCEAE3 |
| Orange | 100 | Aa |
#F8CCBC |
| Orange | 200 | Aa |
#F4AE95 |
| Orange | 300 | Aa |
#EF906E |
| Orange | 400 | Aa |
#EB7247 |
| Orange | 500 | Aa |
#E75420 |
| Orange | 600 | Aa |
#BF451A |
| Orange | 700 | Aa |
#963715 |
| Orange | 800 | Aa |
#6E280F |
| Orange | 900 | Aa |
#45190A |
| Name | Value | HEX | |
|---|---|---|---|
| Petrol | 50 | Aa |
#E4F0F2 |
| Petrol | 100 | Aa |
#BEDCE0 |
| Petrol | 200 | Aa |
#97C7CE |
| Petrol | 300 | Aa |
#71B2BC |
| Petrol | 400 | Aa |
#4B9EAA |
| Petrol | 500 | Aa |
#258998 |
| Petrol | 600 | Aa |
#1F717D |
| Petrol | 700 | Aa |
#185963 |
| Petrol | 800 | Aa |
#124148 |
| Petrol | 900 | Aa |
#0B292E |
Neutral colors
Neutral colors.
| Name | Value | HEX | |
|---|---|---|---|
| Gray | 50 | Aa |
#F5F6F7 |
| Gray | 100 | Aa |
#E1E4E6 |
| Gray | 200 | Aa |
#BAC1C4 |
| Gray | 300 | Aa |
#889499 |
| Gray | 400 | Aa |
#617177 |
| Gray | 500 | Aa |
#394D55 |
| Gray | 600 | Aa |
#2E3E44 |
| Gray | 700 | Aa |
#222E33 |
| Gray | 800 | Aa |
#171F22 |
| Gray | 900 | Aa |
#0B0F11 |
State colors
State colors.
| Name | Value | HEX | |
|---|---|---|---|
| Green | 50 | Aa |
#E7f3E8 |
| Green | 100 | Aa |
#D0E7D1 |
| Green | 200 | Aa |
#A1CFA3 |
| Green | 300 | Aa |
#71B775 |
| Green | 400 | Aa |
#429F47 |
| Green | 500 | Aa |
#138719 |
| Green | 600 | Aa |
#0F6C14 |
| Green | 700 | Aa |
#0B510F |
| Green | 800 | Aa |
#08360A |
| Green | 900 | Aa |
#041B05 |
| Name | Value | HEX | |
|---|---|---|---|
| Red | 50 | Aa |
#F9E3E3 |
| Red | 100 | Aa |
#F0BBBB |
| Red | 200 | Aa |
#E79494 |
| Red | 300 | Aa |
#DE6C6C |
| Red | 400 | Aa |
#D54545 |
| Red | 500 | Aa |
#CC1D1D |
| Red | 600 | Aa |
#A81818 |
| Red | 700 | Aa |
#851313 |
| Red | 800 | Aa |
#610E0E |
| Red | 900 | Aa |
#3D0909 |
Supported colors
Supported colors.
| Name | Value | HEX | |
|---|---|---|---|
| Yellow | 50 | Aa |
#FFF7DF |
| Yellow | 100 | Aa |
#FFECB3 |
| Yellow | 200 | Aa |
#FFE286 |
| Yellow | 300 | Aa |
#FFD759 |
| Yellow | 400 | Aa |
#FFCC2D |
| Yellow | 500 | Aa |
#FFC100 |
| Yellow | 600 | Aa |
#D29F00 |
| Yellow | 700 | Aa |
#A67D00 |
| Yellow | 800 | Aa |
#795C00 |
| Yellow | 900 | Aa |
#4D3A00 |
| Name | Value | HEX | |
|---|---|---|---|
| Crimson | 50 | Aa |
#F2DFE6 |
| Crimson | 100 | Aa |
#E0B3C2 |
| Crimson | 200 | Aa |
#CF869F |
| Crimson | 300 | Aa |
#BD597C |
| Crimson | 400 | Aa |
#AB2D58 |
| Crimson | 500 | Aa |
#990035 |
| Crimson | 600 | Aa |
#7E002C |
| Crimson | 700 | Aa |
#630022 |
| Crimson | 800 | Aa |
#795C00 |
| Crimson | 900 | Aa |
#4D3A00 |
| Name | Value | HEX | |
|---|---|---|---|
| Lime | 50 | Aa |
#F1F4E5 |
| Lime | 100 | Aa |
#DDE5C1 |
| Lime | 200 | Aa |
#C9D69D |
| Lime | 300 | Aa |
#B5C778 |
| Lime | 400 | Aa |
#A1B854 |
| Lime | 500 | Aa |
#8DA930 |
| Lime | 600 | Aa |
#748B28 |
| Lime | 700 | Aa |
#5C6E1F |
| Lime | 800 | Aa |
#435017 |
| Lime | 900 | Aa |
#2A330E |
| Name | Value | HEX | |
|---|---|---|---|
| Turquoise | 50 | Aa |
#ECF4F3 |
| Turquoise | 100 | Aa |
#D2E5E3 |
| Turquoise | 200 | Aa |
#B8D6D2 |
| Turquoise | 300 | Aa |
#9EC7C1 |
| Turquoise | 400 | Aa |
#84B8B1 |
| Turquoise | 500 | Aa |
#6AA9A0 |
| Turquoise | 600 | Aa |
#578B84 |
| Turquoise | 700 | Aa |
#456E68 |
| Turquoise | 800 | Aa |
#32504C |
| Turquoise | 900 | Aa |
#203330 |
Figma Tokens
Nova uses design tokens with Figma Tokens, a plugin for Figma allowing you to define and use design tokens in Figma. You can store your design tokens in JSON, sync them with a sync provider such as GitHub and define tokens even for properties that have no native support yet in Figma, such as borderRadius or spacing.