Always use the TPR colour palette.
You must make sure that the contrast ratio of text and interactive elements in your service meets level AA of the Web Content Accessibility Guidelines (WCAG 2.1).
Brand Colours |
||
| Logo |
#CDD500
|
|
|---|---|---|
| Main header BKGD / Primary BTN Hover / Link Visited |
#483B8B
|
|
Text |
||
| Header and Body text |
#3D3D3D
|
|
| Help and hint text |
#585858
|
|
| Overline subtitle |
#777777
|
|
Links |
||
| Link colour |
#006EBC
|
|
| Link hover |
#557B97
|
|
| Disabled link |
#98C4E4
|
|
| Link focus |
#FED100
|
|
Border |
||
| Border |
#CACACA
|
|
| Footer top border |
#546163
|
|
Focus state |
||
| Focus colour |
#FED100
|
|
Buttons |
||
| Primary button |
#0381A2
|
|
| Primary button hover |
#483B8B
|
|
| Secondary button |
#006EBC
|
|
| Secondary button hover |
#557B97
|
|
| Disabled button |
#98C4E4
|
|
| Warning button |
#A91717
|
|
Success state |
||
| Positive confirmation (success messages) |
#1E7E34
|
|