Introduction
Colors to be used throughout the site. Be sure your text and background colors meet accesibility guidelines.
Setting information
Text
Heading text
The default color of all the heading 1 - 6's used across the site.
Body text
The default body text color.
Body links
The default body link color.
Body links - Hover
The default body link color on hover.
Backgrounds
Body background
The default website backrgound.
Alt background
The background color used on certain elements of the website, that normally would contrast with the default body background. For example, the megamenu navigation and the predictive search background color.
Card background
The default card background color. Applies to all - product, collection and article - cards across the website.
Primary buttons
Button background
The default background color of the primary buttons.
Button border
The default border color of the primary buttons.
Button text
The default text color of the primary buttons.
Button background - Hover
The default background color of the primary buttons on hover.
Button border - Hover
The default border color of the primary buttons on hover.
Button text - Hover
The default text color of the primary buttons on hover.
Secondary buttons
Button background
The default background color of the secondary buttons.
Button border
The default border color of the secondary buttons.
Button text
The default text color of the secondary buttons.
Button background - Hover
The default background color of the secondary buttons on hover.
Button border - Hover
The default border color of the secondary buttons on hover.
Button text - Hover
The default text color of the secondary buttons on hover.
UI
Icons
The default color of the icons used across the website.
Icons - Hover
The color of icons when they are inside of a link and are hovered.
Miscellaneous
Borders
The color of the borders around various element across the website.
Sale price color
The color of the sale price elements used in the product page and cards.
Overlay color
The color of the overlay that appears on click of the main navigation items, opening of the mini cart or product pickup availability sidebar and the predictive search dialog.
Overlay opacity
Controls the background opacity of the overlay.
Enable overlay blur effect
If enabled, the overlay will have a blur effect to blur out all the website content that it covers.
