Brand assets sections
Brand assets
In this section you will find a complete set of brand assets for Park Christmas Savings, including Logo’s, Colour Guide, Typography, Icons and buttons.
Logos
Colours
The colour palette is carefully selected to complement the brand colours and avoid clashing with other colours in use across Park Christmas Savings product ranges.
New Colours
BRIGHT PLUM
| HEX | #7e27a2 |
| RGB | 126, 39, 162 |
| CMYK | 63,94,0,0 |
| PMS | 527 c |
VIBRANT PURPLE
| HEX | #ab0bf7 |
| RGB | 171, 11, 247 |
| CMYK | 55, 81, 0, 0 |
| PMS | N/A |
VIBRANT PINK
| HEX | #fc35ac |
| RGB | 252, 53, 172 |
| CMYK | 2, 87, 0, 0 |
| PMS | 806C |
VIBRANT YELLOW
| HEX | #fff200 |
| RGB | 255, 242, 0 |
| CMYK | 4, 0, 93, 0 |
| PMS | 803C |
Primary
COD GREY
| HEX | #1a1a1a |
| RGB | 26, 26, 26 |
| CMYK | 67,44,67,95 |
| PMS | PBlack 3c |
PURPLE
| HEX | #552773 |
| RGB | 85, 39, 115 |
| CMYK | 83, 91, 26, 16 |
| PMS | P269C |
PINK
| HEX | #D1368C |
| RGB | 209, 54, 140 |
| CMYK | 9, 85, 7, 0 |
| PMS | P232C |
YELLOW
| HEX | #FFCC00 |
| RGB | 255, 204, 0 |
| CMYK | 8, 21, 100, 0 |
| PMS | P116C |
GREY
| HEX | #736C77 |
| RGB | 115, 108, 119 |
| CMYK | 59, 51, 40, 13 |
| PMS | P436C |
WHITE
| HEX | #ffffff |
| RGB | 255,255,255 |
| CMYK | 0,0,0,0 |
Secondary
TUNDORA
| HEX | #474747 |
| RGB | 71,71,71 |
| CMYK | 72,55,54,41 |
| PMS | P425C |
BOULDER
| HEX | #7D7D7D |
| RGB | 125,125,125 |
| CMYK | 56,42,42,9 |
| PMS | P423C |
ALTO
| HEX | #D8D8D8 |
| RGB | 216, 216, 216 |
| CMYK | 18, 13, 13, 0 |
| PMS | P428C |
ALABASTER
| HEX | #F9F9F9 |
| RGB | 249, 249, 249 |
| CMYK | 3,3,2,0 |
| PMS | P Cool Gray 1C |
RIPE PLUM
| HEX | #3D0054 |
| RGB | 61, 0, 84 |
| CMYK | 90, 100, 33, 33 |
| PMS | P2617C |
PINK HOVER
| HEX | #BB074B |
| RGB | 187,7,75 |
| CMYK | 19,96,54,4 |
| PMS | P2040C |
YELLOW HOVER
| HEX | #F99F00 |
| RGB | 249,159,0 |
| CMYK | 0,42,82,0 |
| PMS | P2011C |
Tints
Tints are modified primary colours to be used for certain instances. Always use primary colours wherever possible.
PINK - 10%
| HEX | #FDEAF5 |
| RGB | 253, 234, 245 |
| CMYK | 1, 9, 1, 0 |
PINK - 5%
| HEX | #FEF5F9 |
| RGB | 254,245,249 |
| CMYK | 0,4,0,0 |
LIGHT PINK
| HEX | #FFF6FA |
| RGB | 255,246,250 |
| CMYK | 0, 5, 0, 0 |
| PMS | P7436C |
DARK PURPLE
| HEX | #3D0054 |
| RGB | 61, 0, 84 |
| CMYK | 90,100,33,33 |
| PMS | P2617C |
Accent
It is recommended that the accent colour is only used for decorative elements. The contrast is non-compliant when using on a white background. Therefore, it should only be used with other colours to create enough contrast to pass colour compliancy. Some examples of where it could be used are text over an image or on the Purple (#552773) background.
GOLD
| HEX | #E2C55E |
| RGB | 226, 197, 94 |
| CMYK | 13, 20, 64, 0 |
| PMS | P871C |
Typography
Northwell
Montserrat
Montserrat
Usage
HTML
CSS
Web typography
Desktop
Decorative
H1
H2
H3
H4
H5
H6
Standard paragraph
Large paragraph
Intro
Mobile (where different to Desktop)
H1
H2
H3
H4
Icons
Icons for communication
Buttons
High-impact buttons
High impact buttons should be used for actions that are critical to the user’s journey. Examples of this could include, “Submit form”, “Add to cart” or “Sign up”. As a guide, if there is one desired action the user should be doing then a high impact button will be adequate. If there are multiple routes to consider on a page, continue to use the general use buttons. High impact buttons should be used sparingly, and only used once per “view”. This means you should not see more than one high impact button on screen at one time. Overuse of the high impact button could reduce its impact and make it harder for users to know what to do next.
Primary button
Default:
Inactive:
HTML
CSS
General use buttons
This is the main button to be used throughout projects and should be considered as default. It compliments our ‘High Impact’ buttons for when they are needed.
Default:
Inactive:
HTML
CSS
Base link style
HTML
CSS
Brand assets sections