Colours

We use colours purposefully to communicate how things function in the interface and express uniqure branding

Primary colours

The maroon colours serve as the primary colours serve as the primary action colour, bringing the boldness to the brand, it is used in logical ways through the website to highlight the important bits such as call to action. We use Primary for actions, buttons and text links wherever necessary.

Primary #751c24

Primary Light #a02842

Secondary colours

Our secondary colour is navy blue, making the visual look professional and authoritative, at the same time balancing the intensity of the primary colour. We use the secondary colour for components and headers. As dark colour may grab attention, use it sparingly and purposefully.

Secondary #283c61

Tertiary colours

Our tertiary colour is royal gold, the colour creates a sense of prestige and elegance to the design. Use this colour on small design elements only, such as icons, as using it too much may cause the design to look unapproachable and exclusive.

Tertiary #c4ad89

Supplementary colours

Supplementary colours are used as backgroud colours to divide different sections within a page. The light beige colour creates a sense of calmness and softness when use as background colour. Supplentary colour 1

Supp. 1 Light #faf7f7

Supp. 1 #d1cfcf

Supplentary colour 2

Supp. 2 #0e1524

Extended colours

The extended colours have varying degree of saturation tot cater to various use case. Typically they are used for text and border colour.

Black #282624

Grey Darkest

#51565f

Grey Dark

#939599

Grey #d4d6d9

Grey light

#eaecef

Grey Lighter

#f7f7f9

White

#ffffff

System colours

When we need to communicate an information to digest or the status of an update, we use this palette of colors.

Info

Blue is used to highlight important piece of information. You'll find blue in a "Note" tooltip components.

Info #283c61

Info Light

#eeeff2

Success

We use green to indicate success. It is also used in a comparison table to help users to differentiate the information better (i.e. do’s and don’ts, yes’s and no’s).

Success #01b99d

Success Light

#e6f8f5

Success Dark

#016f5e

Warning

Warning colours indicate a warning or important tip. It is used to in "Tip" tooltip components.

Warning #ffd975

Warning Light

#fdf6e6

Error

Error colours are mainly used for backgrounds in messages and in error states to draw attention to important information. You'll find red used in component such as alert.