Colours
Brand colours can be defined at brand level. Their individual style guides will need to serve as the guiding document to inform the colour palette for their website including primary, secondary and tertiary schemes. Example colour palettes can be seen below.
Primary colour palette
Colour 2
| Property | Value |
|---|---|
| Hex | #B2BFD5 |
| RGB | rgb(178, 191, 213) |
Colour 3
| Property | Value |
|---|---|
| Hex | #1F8EFA |
| RGB | rgb(31, 142, 250) |
Colour 1
| Property | Value |
|---|---|
| Hex | #324262 |
| RGB | rgb(50, 66, 98) |
Secondary colour palette
Black
| Property | Value |
|---|---|
| Hex | #090E16 |
| RGB | rgb(9, 14, 22) |
Light 1
| Property | Value |
|---|---|
| Hex | #F3F6F8 |
| RGB | rgb(243, 246, 248) |
Tertiary colour palette
Accent 1
| Property | Value |
|---|---|
| Hex | #24AAE1 |
| RGB | rgb(36, 170, 225) |
Accent 2
| Property | Value |
|---|---|
| Hex | #D83269 |
| RGB | rgb(216, 50, 105) |
Accent 3
| Property | Value |
|---|---|
| Hex | #67C600 |
| RGB | rgb(103, 198, 0) |
Colour tags
Once colours have been added, they should have tagging system. This is a way of restricting what colours are available within components. For example you may not want an interaction colour being used as a background colour on a component.
Example tags
h1-font-color
p-font-color
bg-color
h2-h3-h4-h5-font-color
border-color
pre-heading-font-color
footnote-font-color
interaction-color
product-color