Design system
Colour tokens, button classes, and shared utilities used across the site.
Design system
Description
The site's colours, buttons, and a handful of shared utilities are defined once and reused everywhere. Using them instead of styling a widget by hand is what keeps pages consistent, and it means a colour change made in one place updates the whole site.
The colours are set up as Elementor global colours with friendly CSS variable names pointing at them. So --maroon is a nickname for one of Elementor's global colours rather than a separate value, which is why changing that global colour in Site Settings updates everything using --maroon.
How to edit
- When styling a widget, use Elementor's global colours and typography — the globe icon beside a colour or font property — rather than picking a one-off value.
- For buttons, apply one of the button classes below in Advanced → CSS Classes instead of restyling the button.
- Ask a developer before adding a new colour, a new token, or a hard-coded colour value.
The shared stylesheet is pasted into Elementor → Site Settings → Custom CSS, so changing the styles themselves is a developer task rather than an editor one.
Colour tokens
Each token is a nickname for an Elementor global colour. The plain name is the base shade and the numbered names are lighter and darker steps of it, with the lower numbers lighter.
Maroon is the primary brand colour, used for headings, primary buttons, and icons.
| Colour | Tokens |
|---|---|
| Maroon | --maroon, --maroon-500, --maroon-400, --maroon-300, --maroon-200, --maroon-100 |
| Pink | --pink, --pink-400, --pink-300, --pink-200, --pink-100 |
| Yellow | --yellow, --yellow-500, --yellow-400, --yellow-300, --yellow-200, --yellow-100 |
| Grey | --grey, --grey-700, --grey-600, --grey-500, --grey-400, --grey-300, --grey-100 |
| Cream | --cream, --cream-400, --cream-300, --cream-200, --cream-100 |
These sit outside the numbered scales:
| Token | What it's for |
|---|---|
--white | White |
--accent-pink | The brighter pink used for hovers and highlights |
--border-grey | Borders and dividers |
--text-burgundy | Burgundy text |
--text-primary | The default text colour |
Buttons
Button styles are applied by adding a class to the button widget in Advanced → CSS Classes. The class goes on the widget and styles the button inside it.
| Class | What it looks like | On hover |
|---|---|---|
btn-primary-black | Maroon fill with white text. The main call to action. | Turns accent pink |
btn-primary-pink | Accent pink fill with white text. | Turns maroon |
btn-secondary | Outlined, with a maroon border and maroon text on a transparent background. | Fills with maroon |
btn-tertiary | Text with an arrow to its right and no fill or border. | The arrow slides further right |
btn-tertiary-reverse | The same as tertiary, but with the arrow on the left, pointing left. Use it for back links. | The arrow slides further left |
btn-link | Plain underlined text with no padding around it. | — |
Modifiers
Add these alongside a button class:
| Class | What it does |
|---|---|
btn-dark | For buttons on a dark background. Gives secondary buttons a translucent white border and white text, makes tertiary text and arrows white, and makes a pink primary button turn white on hover. |
btn-disabled | Greys the button out and stops it responding to clicks. It is set up for btn-primary-black, btn-primary-pink, and btn-secondary only, so it will not visibly change a tertiary or link button. |
Utilities
| Class | What it does |
|---|---|
accent-pink and accent-yellow | Colour a word or phrase inside a heading or paragraph. These only work on a span, so apply them to a selected piece of text rather than to the whole widget. |
icon-fit-24 | Forces an icon widget to 24 by 24 pixels, which fixes icons that come through at the wrong size. |
q-mastercard-badge | Turns a badge accent pink with white text, used to highlight the Q Mastercard badge on offer cards. It only takes effect when the badge is the only element in its container. |
qcard-only and qmastercard-only | Show a piece of content on one product's pages only. See Q Card vs Q Mastercard. |
Global fixes
These apply automatically, and are worth knowing about if something looks different from what you set:
- The last paragraph in a widget has its bottom margin removed, so the gap between stacked text widgets comes from the widget spacing rather than from the paragraph.
- Sideways scrolling is clipped at the page level, so an element that overhangs the edge is cut off rather than making the whole page scroll sideways.