Customisation
Brand colours
Brand colours are those that can be customised to match the brand requirements of a site.
Components and core styles inherit these colours to create a consistent yet flexible theme to optimise your user's experience. The default colour palette below reflects master brand colours used as default in the Design System.
How to customise colours
On our platform, you can modify the colours by using the CSS variables (detailed below).
By leveraging CSS variables, any updates to branding or themes will seamlessly apply to your project. You can discover more about CSS variables below, or explore the developer documentation.
There are 48 colour variables that users can customise. These variables are divided into 2 light and dark themes with variables grouped under categories related to the colours purpose within the site.
Backgrounds
Therere 5 primary background colours form the base that all other components sit on top of. The white background and white background shade colours are system defaults and are not customisable.
Background shades work best as a darker tint of the primary background colour.
| Colour description | Variable | Value |
|---|---|---|
| Default (White) | $QLD-color-neutral--white | #FFFFFF |
| Default shade (Neutral lightest) | $QLD-color-neutral--lightest | #F5F5F5 |
| Light background | --QLD-color-light__background | #E6F6FF |
| Light background shade | --QLD-color-light__background--shade | #CEEDFF |
| Light background alternative | --QLD-color-light__background--alt | #E3E7EA |
| Light background alternative shade | --QLD-color-light__background--alt-shade | #D6DCE0 |
| Dark background | --QLD-color-dark__background | #005EB8 |
| Dark background shade | --QLD-color-dark__background--shade | #003E96 |
| Dark background alternative | --QLD-color-dark__background--alt: | #001D74 |
| Dark background alternative shade | --QLD-color-dark__background--alt-shade | #000764 |
Background colour example
There are four background colours, and four background shades. Background shades determin the colour of components that sit on top of a specific background colour. This callout uses a background shade that responds the the colour of the background.
Borders
There are 4 border colours, they're used for dividers and borders for containers. The alternative border must have a contrast ratio of 3:1 because it's used for form borders, the standard foreground border is more decorative and isn't required to have as high a contrast.
| Colour description | Variable | Value |
|---|---|---|
| Light border | --QLD-color-light__border | #BEDFFF |
| Light alternative border | --QLD-color-light__border--alt | #848484 |
| Dark border | --QLD-color-dark__border | #418FED |
| Dark alternative border | --QLD-color-dark__border--alt | #63B1FF |
Border example
Borders for text inputs and dividers for menu items. They change depending on the background they are situated on. Alternative borders are used for form all form fields to ensure optimum contrast.
Actions
Colours for buttons and interactive elements.
| Colour description | Variable | Value |
|---|---|---|
| Light primary action | --QLD-color-light__action--primary | #005EB8 |
| Light primary action hover | --QLD-color-light__action--primary-hover | #003E96 |
| Light secondary action | --QLD-color-light__action--secondary | #307EDB |
| Light secondary action hover | --QLD-color-light__action--secondary-hover | #004EA7 |
| Dark primary action | --QLD-color-dark__action--primary | #84D3FF |
| Dark primary action hover | --QLD-color-dark__action--primary-hover | #A6F7FF |
| Dark secondary action | --QLD-color-dark__action--secondary | #84D3FF |
| Dark secondary action hover | --QLD-color-dark__action--secondary-hover | #A6F7FF |
Action colour example
Actions colours are used for interactive elements, primary colours are used for more important actions and secondary actions are used for icons and less important actions.
Accent
There are 2 accent colours, used for decorative elements. Accent colours are purely decorative and thus don't require an accessibility check, they're best used for implementing brand colours that are difficult to make accessible.
| Colour description | Variable | Value |
|---|---|---|
| Light accent | --QLD-color-light-designAccent | #84D3FF |
| Dark accent | --QLD-color-dark-designAccent | #84D3FF |
Accent colour example
Accent colours are often used to draw some attention to text elements such as callouts and quotes.
The goal of the Web is to serve humanity. We build it now so that those who come to it later will be able to create things we cannot ourselves imagine.
Focus
The focus state is the state of an element in a web page that has been selected by the user or is currently in focus. When an element is in focus, it's the active element that is ready to receive user input, such as typing into a form field or clicking a button. In web design, the focus state is important for accessibility and usability, especially for users who navigate the web using a keyboard or other input device.
The focus colour is used for the outline that indicates this state. Focus colours should be as consistent as possible and ideally not the same as any action colour. Focus colours must meet a contrast ratio of 3:1.
| Colour description | Variable | Value |
|---|---|---|
| Light focus | --QLD-color-light__focus | #002E85 |
| Dark focus | --QLD-color-dark__focus | #C6FFFF |
Focus colour example
Focus colours determine the outline colour that appears when as element is in focus. Select the input field below to display the focus state.
Text links
Colours for secondary button text, in text links, menu links and calls to actions text.
| Colour description | Variable | Value |
|---|---|---|
| Light text link colour | --QLD-color-light__link | #005EB8 |
| Light visited link colour | --QLD-color-light__text--visited | #551A8B |
| Light link on action | --QLD-color-light__link--on-action | #FFFFFF |
| Dark text link colour | --QLD-color-dark__link | #FFFFFF |
| Dark visited link colour | --QLD-color-dark__link--visited | #F2CDFF |
| Dark Link on action | --QLD-color-dark__link--on-action | #001C37 |
Text link example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in vel leo at molestie. Tempor a feugiat dictum sit nisl, vitae dolor, nulla. Lectus sed urna pharetra id.
Text
Colours for headings, body text and muted or disabled type.
| Colour description | Variable | Value |
|---|---|---|
| Light heading colour | --QLD-color-light__heading | #000053 |
| Light foreground text | --QLD-color-light__text | #353535 |
| Light foreground text lighter | --QLD-color-light__text--lighter | #636363 |
| Dark heading colour | --QLD-color-dark__heading | #FFFFFF |
| Dark foreground text | --QLD-color-dark__text | #FFFFFF |
| Dark foreground text lighter | --QLD-color-dark__text--lighter | #DEEBF9 |
Heading colour example
Body text colour example - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in vel leo at molestie. Tempor a feugiat dictum sit nisl, vitae dolor, nulla. Lectus sed urna pharetra id.
Muted text colour example - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in vel leo at molestie. Tempor a feugiat dictum sit nisl, vitae dolor, nulla. Lectus sed urna pharetra id.
Underlines
Underline colours for interactive elements. They work best a slightly lighter version of the text link colour. On hover the default is that the underline colour changes to the text link colour.
| Colour description | Variable | Value |
|---|---|---|
| Light default underline | --QLD-color-light__underline | #3F7AB4 |
| Light visited link underline | --QLD-color-light__underline--visited | #8B63B0 |
| Dark default underline | --QLD-color-dark__underline | #B5CCE2 |
| Dark visited link underline | --QLD-color-dark__underline--hover-visited | #C6AED9 |
Underline colour example
Underline colours are slightly lighter version of the original text link colour, this is to to reduce distracting impact that underlines can have in hyperlinks.
Underline colour example
Site title
This determines the colour of the site title text in the header.
| Colour description | Variable | Value |
|---|---|---|
| Light site title colour | --QLD-color-light__site-title | #005EB8 |
| Dark site title colour | --QLD-color-dark__site-title | #FFFFFF |