Colours
You must provide the hex value for all tokens unless marked as optional or using the default or neutral option. See Inputting theming values into the CMS for more details.
Theming specifications
Primary
Hex / Value |
| Token / Key |
|---|---|---|
# |
| rpl-clr-primary |
# |
| rpl-clr-primary-alt |
rgba(#, #, #, 0.5) |
| rpl-clr-primary-alpha |
Accent
Hex / Value |
| Token / Key |
|---|---|---|
# |
| rpl-clr-accent |
# |
| rpl-clr-accent-alt |
Link
Hex / Value |
| Token |
|---|---|---|
# |
| rpl-clr-link |
Focus
Hex / Value |
| Token / Key |
|---|---|---|
# |
| rpl-clr-focus |
Gradient (optional)
Hex / Value | Position |
| Token / Key |
|---|---|---|---|
# | % |
|
|
# | % |
|
|
# | % |
|
|
# | % |
|
|
# | % |
|
|
| 180deg |
| rpl-clr-gradient-vertical |
| 90deg |
| rpl-clr-gradient-horizontal |
Typography
Hex / Value | Base Token |
| Token / Key |
|---|---|---|---|
# |
|
| rpl-clr-type-primary-contrast |
# |
|
| rpl-clr-type-primary-accessible |
# |
|
| rpl-clr-type-primary-alt-accessible |
rgba(255, 255, 255, 0.75) | rpl-clr-type-primary-contrast
 (75% opacity) |
| rpl-clr-type-primary-contrast-alpha |
# |
|
| rpl-clr-type-accent-contrast |
# |
|
| rpl-clr-type-focus-contrast |
Footer
Note: Ignore this section if using the footer neutral variant.
Hex / Value | Base Token [if using default theme] |
| Token / Key |
|---|---|---|---|
# |
|
| rpl-clr-footer |
# |
|
| rpl-clr-footer-alt |
# |
|
| rpl-clr-type-footer-accessible |
# |
|
| rpl-clr-type-footer-contrast |
Neutral theme components
Component | Yes/No |
|---|---|
Header | No |
Button | No |
Footer | No |
Visual
XS | XL |
|---|
XS | XL |
|---|---|
Primary navigation (logo) | |
| |
TBD | TBD |
Header graphic | |
Retain Ripple 1 header graphic | |
|
|
Mega menu | |
Mockup example | |
|
|
Landing page | |
Mockup example | |
|
|
Design assets
You must provide the following design assets:
top and bottom header corner graphics
a favicon pack which contains different size files for different screen resolutions. You can use https://realfavicongenerator.net/
social share image
site logos
mobile
desktop
footer
print