Color

Our colour palette supports a wide range of colours intended to be used in products and promotional materials. Colours are grouped into Primary, Functional, and Alternative colours.

Monochrome

This palette is used for our Brand, Texts, Borders, and Surface colours.

Surface colours help us break up our product's interfaces into smaller and clearer components. This provides a feeling of depth and encourages interaction from our users.

 

 

core / color / monochrome

#16191d
1000
Default text
Collection
-
Token set
Core
Documented
#22282f
900
Collection
-
Token set
Core
Documented
#303841
800
Modal overlay (at 40% opacity)
Collection
-
Token set
Core
Documented
#414c58
700
Collection
-
Token set
Core
Documented
#566576
600
Input border & Reduced text
Collection
-
Token set
Core
Documented
#6b7d91
500
Collection
-
Token set
Core
Documented
#919ead
400
Placeholder text & Placeholder icons
Collection
-
Token set
Core
Documented
#b1bac5
300
Disabled border & Disabled text
Collection
-
Token set
Core
Documented
#d0d6dc
200
Border reduced
Collection
-
Token set
Core
Documented
#e4e7eb
100
Surface selected & Disabled component
Collection
-
Token set
Core
Documented
#edf0f2
75
Collection
-
Token set
Core
Documented
#f6f7f8
50
 Background colour & Marketing BG colour
Collection
-
Token set
Core
Documented
#fcfcfd
25
Reduced background
Collection
-
Token set
Core
Documented
#ffffff
0
Default surface (pure white)
Collection
-
Token set
Core
Documented

Blue

Blue is the primary EcoOnline colour. It is used in both products in marketing materials.

core / color / blue

#121647
1000
Primary CTA pressed status
Collection
-
Token set
Core
Documented
#1b2169
900
Primary CTA hover status
Collection
-
Token set
Core
Documented
#272f96
800
Primary CTA backgrounds, Secondary CTA border + text & Inline links
Collection
-
Token set
Core
Documented
#2a35c6
700
Collection
-
Token set
Core
Documented
#3c48e9
600
Collection
-
Token set
Core
Documented
#5b65f6
500
Collection
-
Token set
Core
Documented
#8088ff
400
Collection
-
Token set
Core
Documented
#a6acff
300
Collection
-
Token set
Core
Documented
#c2c8ff
200
Collection
-
Token set
Core
Documented
#d6d9ff
100
Collection
-
Token set
Core
Documented
#e5e7ff
75
Collection
-
Token set
Core
Documented
#f0f1ff
50
Hover over an interactive states & Marketing BG colour
Collection
-
Token set
Core
Documented

Examples

User interfaces can be broken down into different surfaces. Each surface plays a different role. Below are the guidelines for usage.

Background, Tiles & Inputs

Surfaces can be broken down into 3 key elements:

  • Background
  • Tiles
  • Inputs
  • Borders

The background is the largest surface and will contain all other elements.

Tiles are smaller surfaces that combine to create our UI layouts. They can contain other elements referred to as details. Additionally tiles can also contain inputs.

Inputs are points of interaction for the user. They can appear on the background or within a tile as a detail.

Borders help us to clearly separate groups of surfaces.

Brand colours inside our basic UI

Surface colours help us break up our product's interfaces into smaller and clearer components. This provides the feeling of depth and encourages interaction from our users. Surface colours also help us provide feedback to the user by presenting them with changes in colour to represent interactions such as hover and a press.