Assets you must provide to create a new site (for independent sites and semis on SDP)
- Emma Cameron
- Jo Tayler
- 1 Design assets - images and logos
- 2 Colours
- 2.1 Theming specifications
- 2.1.1 Primary
- 2.1.2 Accent
- 2.1.3 Link
- 2.1.4 Focus
- 2.1.5 Gradient (optional)
- 2.1.6 Typography
- 2.1.7 Footer
- 2.1.8 Neutral theme components
- 2.1.9 Visual
- 2.1 Theming specifications
- 3
Design assets - images and logos
You must provide the following design assets:
top and bottom header corner graphics
a favicon pack that contains different size files for different screen resolutions. You can use https://realfavicongenerator.net/
social share images - square and landscape format
site logos
mobile
desktop
footer
print (black and white version)
See https://digital-vic.atlassian.net/servicedesk/customer/portal/23/article/2304212993 for details on dimensions and file sizes.
Colours
You must provide the hex code or RGBA 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/key |
|---|---|---|
# |
| 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 | |
|
|