Colours
Always use the GOV.CY color palette.
Theme colours
Use theme colours for buttons, alerts, list groups, borders, text and backgrounds
Colour | Colour name | hex | Where to use |
---|---|---|---|
primary | #31576F |
To be used as the colour for primary buttons and other classes as primary colour. | |
secondary | #B09038 |
To be used as the colour for secondary buttons and other classes as secondary colour. | |
success | #00703C |
To be used to mark success in messages and alerts. | |
danger | #d4351c |
To be used to mark danger or errors in messages and alerts. | |
info | #487d93 |
To be used in informational messages and alerts. | |
light | #ebf1f3 |
To be used as a light background on specific components such as Footer. |
Typography colours
Colours used for text based content.
Colour | Colour name | hex | Where to use |
---|---|---|---|
headings | #272525 |
To be used for heading text colour. | |
body | #272525 |
To be used for body text colour. | |
hint | #6D6E70 |
To be used for hint text colour. |
Link colours
Colours related to links.
Colour | Colour name | hex |
---|---|---|
link standard | #1d70b8 |
|
link hover | #003078 |
|
link visited | #4c2c92 |
|
link active | #272525 |
|
link danger hover | #942514 |
Border Colours
Colours related to borders.
Colour | Colour name | hex |
---|---|---|
border standard | #BBBCBF |
|
border input | #272525 |
Button / Input colours
Colours related to buttons
Colour | Colour name | hex |
---|---|---|
brand-primary | #31576F |
|
button primary hover | #254355 |
|
button secondary | #D0D1D3 |
|
button secondary hover | #A6A8AA |
|
button tirtiary | #D4351C |
|
button tirtiary hover | #AA1D13 |
|
button success | #00703C |
|
button success hover | #274e13 |
|
button active / input focus | #ffdd00 |