Colours

The 'Colours' tab in the 'Design' node allows you to adjust the colours for various aspects of your website and apply different visual styles, such as gradients.

What colour adjustments can I make?

You can adjust the base colours for your website's: 

• Body (background)
• Header (background, text, borders and highlight)
• Logo (link and link hover)
• Main navigation (link, link hover and link active)
• Secondary navigation (link, link hover)
• Navigation dropdowns (background, link, link hover and link active)
• Content (background, heading, secondary heading, text, link, link hover, border, highlight background and highlight text)
• Button (background, text, border, background hover, text hover and border hover)
• Footer (background, heading, secondary heading, text, link, link hover, borders and highlight)

Ensure you follow your organization's brand guidelines and implement appropriate colour contrast ratios for each element on your website, which helps web accessibility.

Update the base colours for your website

To select and adjust the base colours for your website, you need to:

1. Navigate to the 'Design' node in the Govstack back office
2. Then, pick the design style that is currently in use for your website (there is likely only one option)
3. Select the 'Colours' tab
4. Select the element that you would like to adjust the colour settings for
5. Select the dropdown arrow on the specific colour element you would like to change. You can choose from the visual colour scale or manually enter a hex code in the hex code field. Click 'select' when you are finished
6. For various colour element options, you can also choose between a solid colour or a gradient colour effect. 
7. Select 'Save and publish' when you are finished

Gradient colour options

If you'd like to add a gradient colour option, you can choose between the following options:

• Linear - which is a progressive transition between two colours along a straight line
• Radial - which is a progressive colour transition from a centre point of origin

You can choose where on the grid option you would like the gradient effect to take place.

Add new content colour combinations

Within the 'Colours' tab, you can build out the colour palette for your website by choosing additional colour combinations for the background, headings, text and links. Each 'c#' represents a new combination.

Select the '+' button to add a new colour combination. Once you have set a combination, it will be available for you to select when editing the content components and pods on your website.

You can add an unlimited number of content colour combinations. To adjust the additional content colour option order, you need to click and drag an option above or below other options within your list. 

Additional button colours

You can also build out additional colour options to be applied whenever a button is added throughout your website. Each 'c#-btn' represents a new button colour option. Select the '+' button to add a new button colour option. Once you have set an additional button colour combination, it is available for you to select when editing a button. 

You can control the background (including solid, linear gradients or radial gradients), text and borders of both the initial and hover/active/focus states. You can add unlimited additional button colour combinations. You can adjust the additional button colour option order by clicking and dragging an option above or below other options within your list.