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.
Blue
Blue is the primary EcoOnline colour. It is used in both products in marketing materials.
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.