Often colour systems can be limiting and difficult to organise. Somewhere along the line you may require a myriad of different shades that sit on different background colours. This can make things difficult to keep track of.

To reduce complexity and add flexibility we're created a unique approach. By creating designated colour groups, which we refer to as "themes" it allows development teams to easily create and apply different text colour variants for each different background colour.

Backgrounds

To apply a background colour to a component or page:

1. Input the word "Theme"
2. Followed by a "-"
3. Followed by a numerical value.

For example .Theme-1

You can add this combo to the page wrapper or any component you’d like to switch the colour theme of. Every text element nested inside the parent theme will automatically inherit the text colour values.

Text

To apply a text colour to a text element or div block:

1. Declare the Theme. E.g .Theme-1
2. Followed by a space
3. Followed by the word "Text"
4. Followed by a "-"
5. followed by a variant letter (A-Z)

For example .Theme-1 Text-A

This above example tell the user that this text element is sitting on the background of "Theme-1" and a text colour with the variant of "A" has been applied.

Borders

In instances where a components border colour or shadow needs to be changed to suits the theme you can simply add the combo class

1. Declare the action. E.g .is
2. Followed by --
3. Followed by the Theme variant E.g Theme-1

Once this combo has been applied make adjustments to the styles.

1. Background Colours

Each different background colour that lives in your design need's it's own dedicated and unique theme.

Instructions

1. Navigate to the 'colour' style guide page.
2. Click on the 'background colour' box.
3. Open & Edit the global background colour swatch in the style panel.
4. Select your new hue and click "save"
5. Repeat for each different theme.
   

2. Text Colours

Now that all of our individual theme background colours are set, it's time to move onto text colours. You'll notice that each card's background colour underneath the heading "text colours" should now match. This enables us to set our text colours in a contextual manner.

Instructions

1. Click on the placeholder text "AaBb" found inside the center of each card.
2. Open & Edit the global text colour swatch in the style panel.
3. Select your new hue and click "save"
4. Repeat for each different theme. Most projects don't require more then 4 text variants per theme, however if you're working a complex UI you may find you need more. If this is the case be sure to continue the naming convention of Theme-[#] Text-[X].

3. Link Colours

It's time to declare our hover colours for global text links. The text colours we setup in the previous step can be reused and applied as a combo to .Text Link elements.

Instructions

1. Click on the placeholder text "AaBb" found inside the center of each card.
2. Navigate to the select field in the style panel, hit the dropdown and select "hover" state.
3. Edit the text colour swatch in the style panel.

4. Fill Colours

Each theme has it's own set of fill colours. Fill colours can be as accents on UI elements such as shapes, pills and buttons.

Instructions

1. Navigate to "Fill Colours" heading.
2. Click the coloured square on the bottom right of the card.
3. Open & Edit the global background colour swatch in the style panel.
4. Select your new hue and click "save"
5. Repeat for each different theme.