This is a older version. Check out the latest version of the design system.
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 |