Primary text colour for headings or high-priority content.

Neutral colour for light backgrounds, text, and default states.

Core brand color. Primary buttons, links, and CTAs (call-to-action). Key components requiring alignment with brand identity. Use sparingly to avoid overwhelming users.

A darker variation of the primary brand color for enhanced contrast. Hover states for primary buttons or links.

Highlights for subtle hover states or decorative elements. Supporting components like tooltips or banners.

Attention-grabbing color to pull focus to things like discounts to encourage goal completions

A deep accent color used for high-emphasis elements or dark themes.

Backgrounds for supporting components like badges or tags. Supporting text highlights (e.g., hints or subtle visual cues).

The primary colour in the secondary palette, complementing the primary brand colours. Secondary buttons, alternative CTAs, or complementary actions.

A deep tone of the secondary palette, used for emphasis or alternative actions.

Used for backgrounds and subtle emphasis

Base background colour for general use. This is the primary background colour for the full site, including the main canvas or body area.

The alternating background colour, used to break up sections or rows for better readability,

A muted variation of bg-secondary, designed for low-emphasis areas such as footers, summaries, or low-priority content.

Used sparingly to highlight promotional sections, limited-time offers, or important calls-to-action. Reserve this for attention-grabbing sections that demand focus without overwhelming the user.

A subtle emphasis colour, ideal for featured elements or sections requiring soft attention without pulling focus. Good for important but non-transactional sections.

Used for dark backgrounds to introduce contrast

Used for borders around containers, cards, or inputs to visually separate elements while maintaining a clean aesthetic.

Used specifically for star ratings, ensuring visibility and alignment with brand colors. Used in product reviews or feedback components.

Primary link and button color

Used for strokes or outlines on selected items, such as color swatches or selected filters

A vibrant primary icon color used for most icons

For icon sections requiring higher contrast or less vibrant icons

Used for subtle emphasis

Used to invert icon colours for emphasis on darker backgrounds.

Indicates successful actions, such as order confirmations, form submissions, or positive feedback.

Highlights warnings, such as low inventory alerts, delivery time constraints, or system-related cautions.

Communicates errors, such as payment failures, invalid inputs, or high-severity warnings.

Primary text colour for most content, including product descriptions, headings, and general text across the site.

Secondary text colour for subheadings, labels, or secondary information

Used for placeholder text, hints, or less important text like timestamps or supporting information.

Used for text on dark backgrounds, such as in footers, buttons, or dark-themed hero sections.