Skip to Main Content


Using Colours

Coming soon!

Black, White, Grey, and Theme Colours

If you're using Clone through NPM, it comes with a built in theme system to help you build in your brand aesthetic. There are customizable variables for black, white, gre/ay, and 5 distinct theme colours.

In practice, theme colours are accessed using cX, where X can be any number between 1 and 5. We recommend setting up your theme colours in order of importance: 1 being your primary, 2 being your secondary, etc. Black, white, and gre/ay are accessed using their respective names (and yes, we included both spellings!).

Theme 1
Theme 2
Theme 3
Theme 4
Theme 5

Go, Slow, Stop

Clone also provides you with three customizable action colours: go (good), slow (attention), stop (error).


Sitewide Colour Settings

Clone allows you to customize the following sitewide colour settings:

Hover Colors

Clone offers a sitewide variable that allows you to customize the generic hover color of links and buttons, but in some instances you'll want to customize the hover color to accommodate for accessibility or color schemes. In order to do this, Clone provides an attribute that provides access to the entire theme palette discussed above.

To set the sitewide hover colour, you can use the $clone-hover-colour variable.

To set a custom hover color on an element, you can use the data-c-hover-color="COLOR" attribute. The options available to this attribute are outlined below.


gray / grey
c1 (Theme Colour 01)
c2 (Theme Colour 02)
c3 (Theme Colour 03)
c4 (Theme Colour 04)
c5 (Theme Colour 05)

Component Colours

Clone allows you to customize the following component specific colour settings:


Version 2.4.12

Version 2.3.9

Version 2.3.1