rpl-clr-primary

Any single HEX colour code
Example: #AC3077

Top navigation bar.

Image Modified

Block quote quotation marks.

Image Modified

Header Page title/heading

Image Modified

Button fill (not text)

Image Modified

Topic and tag (outline not text)

Image Modified

rpl-clr-primary-alt

Any single HEX colour code
Example: #8A265F

Top navigation search background

Image Modified

Top navigation mega menu background

Image Modified

rpl-clr-primary-alpha

Any single rgba colour code
Must be entered as the example shows below.

Example: rgba(172,48,119,0.5)

Note: this must be your rpl-clr-primary at 50% opacity.

Mega Menu hover and selected links

Image Modified

rpl-clr-accent

Any single HEX colour code
Example: #465870

Expanded accordion left side border

Image Modified

Callout left border

Image Modified

Header Highlight page title blocking (dark theme)

Image Modified

rpl-clr-accent-alt

Any single HEX colour code
Example: #ECEEF1

Header Highlight introduction text blocking (dark theme)

Image Modified

Callout background

Image Modified

rpl-clr-link

Any single HEX colour code
Example: #AC3077

Card heading when hovering

Image Modified

Banner journey link icons

Image Modified

Social share icons

Image Modified

Contact block icons

Image Modified

Accordion 'open/close all' text and icons

Image Modified

File icon

Image Modified

Pagination ‘next/previous’ arrows

Image Modified

Inline text links

Image Modified

rpl-clr-focus

Any single HEX colour code
Example: #75D9A0

Button background when in focus

Image Modified

Outline of a selected input field (eg search)

Image Modified

rpl-clr-gradient-horizontal

Use multiple HEX colour codes and percentages to get your desired gradient.

Must be entered as the example shows below (only change being desired HEX codes and percentages. Percentages represent the position of each colour).

Example: linear-gradient(90deg, #D61634 0%, #D42B8B 40%, #652484 80%)

(note hyphenation of linear-gradient and no space before open bracket)

Anywhere the ‘highlight’ horizontal gradient elements are used (eg promo cards)

Image Modified

rpl-clr-gradient-vertical

Use multiple HEX colour codes and percentages to get your desired gradient.

Must be entered as the example shows below (only change being desired HEX codes and percentages. Percentages represent the position of each colour).

Example: linear-gradient(90deg, #D61634 0%, #D42B8B 40%, #652484 80%)

(note hyphenation of linear-gradient and no space before open bracket)

Table of contents left line

Image Modified

Line next to address in contact block

Image Modified

rpl-clr-type-primary-accessible

Only your primary HEX or #1A1A1A. The HEX value will be your primary colour if it is accessible with white text. If it is not, you must use #1A1A1A.
Example: #FDDA24

Back to top button content

Image Modified

Example: #1A1A1A

Text inside tag and topic bubbles

Image Modified

rpl-clr-type-primary-alt-accessible

Only your primary-alt HEX or #1A1A1A. The HEX value will be your primary colour if it is accessible with white text. If it is not, you must use #1A1A1A.
Example: #1A1A1A

Outline button text on hover

Image Modified

rpl-clr-type-primary-contrast

Only #1A1A1A or #FFFFFF HEX colour codes. The HEX value will be determined by which is accessible with your primary colour.
Example: #1A1A1A

Button text

Image Modified

rpl-clr-type-primary-contrast-alpha

Only one of the following rgba values.

• rgba(255,255,255,0.75)

• rgba(26,26,26,0.75)

This must be your rpl-clr-type-primary-contrast colour at 75% opacity.
Must be entered as the example shows below.

Example: rgba(255,255,255,0.75)

Mega menu search placeholder and underline (on default)

Image Modified

rpl-clr-type-accent-contrast

Only #1A1A1A or #FFFFFF HEX colour codes. The HEX value will be determined by which is accessible with your accent colour.
Example: #FFFFFF

Header Highlight page title (dark theme)

Image Modified

rpl-clr-type-focus-contrast

Only #1A1A1A or #FFFFFF HEX colour codes. The HEX value will be determined by which is accessible with your focus colour.

Example: #1A1A1A

Focus state content (text)

Image Modified

rpl-clr-footer

Any single HEX colour code
Example: #006676

Note: If using the default footer theme, the rpl-clr-footer must use the same HEX as the rpl-clr-primary-alt token.

Footer background

Image Modified

rpl-clr-footer-alt

Any single HEX colour code
Example: #008094

Note: If using the default footer theme, the rpl-clr-footer-alt must use the same HEX as the rpl-clr-primary token.

Line in footer below acknowledgement statement

Image Modified

*Note: If using the default footer theme, the rpl-clr-footer-alt must use the same HEX as the rpl-clr-primary token.

rpl-clr-type-footer-accessible

Only your footer HEX or #1A1A1A. The HEX value will be your footer colour if it is accessible with white text. If it is not, you must use #1A1A1A.
Example: #1A1A1A

Line separating footer from page content

Image Modified

rpl-clr-type-footer-contrast

Only #1A1A1A or #FFFFFF HEX colour codes. The HEX value will be determined by which is accessible with your footer colour.

Example: #FFFFFF

Footer text and links

Image Modified