Colours
The colour palette provides the colour structure of gov.cy websites and services.
Always use the gov.cy colour palette.
Consistency is very important, so do not deviate from the colours used in the guidance and coded examples of the Unified Design System. If you are using the developers assets and the code in our documentation, you will not need any additional styling.
Main Colours
The main colours frame the brand and provide the signature of gov.cy.
| Name | Colour | Hex | When to use |
|---|---|---|---|
| Primary | #31576F |
Used as the colour for primary buttons, navigation bars and other classes to help elevate the branding of gov.cy. | |
| Secondary | #FFAD2D |
Used as a filler colour for classes, lines and sections to elevate the branding of gov.cy. |
Text
Colours used for text based content.
| Name | Colour | Hex | When to use |
|---|---|---|---|
| Headings | #272525 |
Used as text heading text colour | |
| Body | #272525 |
Used as body text colour | |
| Secondary | #474545 |
Used as a filler colour for classes, lines and sections to elevate the branding of gov.cy. | |
| Hint | #6D6E70 |
Used as hint text colour. |
Links
Colours related to links.
| Name | Colour | Hex | When to use |
|---|---|---|---|
| Link standard | #1D70B8 |
Used as the default link colour | |
| Link hover | #003078 |
Used as the default link hover | |
| Link visited | #4C2C92 |
Used as the visited link status colour | |
| Link active | #272525 |
Used as the active link colour | |
| Link danger | #D4351C |
Used to convey caution in links | |
| Link danger hover | #942514 |
Used to convey caution in link’s hover |
Background
Colours to fill the background of the below sections.
| Name | Colour | Hex | When to use |
|---|---|---|---|
| Panel | Text |
Background: #00703CText: #ffffff |
Used to mark success on panels |
| Footer | Text |
Background: #EBF1F3Text: #272525 |
Used as the footer colours |
| Header | Text |
Background: #31576FText: #ffffff |
Used as the header colours |
Borders
Colours related to borders.
| Name | Colour | Hex | When to use |
|---|---|---|---|
| Border standard | #BBBCBF |
Used as the default border state colour | |
| Border input | #272525 |
Used as border input state colour | |
| Border single line | #999999 |
Used as visited link status colour |
Buttons
Colours related to buttons.
| Name | Colour | Hex | When to use |
|---|---|---|---|
| Primary button | Text |
Background: #31576FText: #ffffff |
Used as the primary button colours |
| Secondary button | Text |
Background: #D0D1D3Text: #272525 |
Used as the secondary button colours |
| Warning button | Text |
Background: #D4351CText: #ffffff |
Used as the warning button colours |
| Success button | Text |
Background: #00703CText: #ffffff |
Used as the success button colours |
| Primary button hover | Text |
Background: #254355Text: #ffffff |
Used as the primary button hover colours |
| Secondary button hover | Text |
Background: #A6A8AAText: #272525 |
Used as the secondary button hover colours |
| Warning button hover | Text |
Background: #AA1D13Text: #ffffff |
Used as the warning button hover colours |
| Success button hover | Text |
Background: #274E13Text: #ffffff |
Used as the success button hover colours |
| Active button | Text |
Background: #FFDD00Text: #272525 |
Used for the active button states |
Focus
Colours that display the focus state of elements when a user navigates the website or a service using tab.
| Name | Colour | Hex | When to use |
|---|---|---|---|
| Focus colour | #FFDD00 |
Used for focused elements | |
| Focus text | #272525 |
Used for focused text |
Status
Colours that display and alert the status of elements.
| Name | Colour | Hex | When to use |
|---|---|---|---|
| Success | #00703C |
Used to mark success | |
| Danger | #D4351C |
Used to convey caution | |
| Info | #487D93 |
For informational messages and alerts | |
| Alpha banner light | #ffffff |
Used for light banner that displays the version of a service. | |
| Alpha banner dark | #31576F |
Used for dark banner that displays the version of a service. |
Additional Colours
Additional colours are extra colours to be used on components or sections when the main colours might not be the best fit.
Should be used only when the main colours wont suffice.
| Name | Colour | Hex | When to use |
|---|---|---|---|
| light-gray | #E6E6E7 |
Mostly used as background | |
| dark-gray | #999999 |
Mostly used for lines and to seperate content | |
| main-shade-0 | #2E5268 |
For items above the header | |
| main-shade-1 | #CCDBE2 |
Mainly used for menu double dropdown | |
| main-shade-2 | #DAE5EA |
Mainly used for menu double dropdown | |
| main-shade-3 | #EBF1F3 |
Mostly used as background | |
| main-shade-4 | #F5F8F9 |
Used for lighter backgrounds. Used at cookies popup |
Colours with gov.cy CSS
Using our developers assets and the code in our documentation, colours adjust automatically for each design element.
Accessibility
It is important to always test your implementation’s colours against the minimum contrast ratio of 4.5:1.
All elements presented in the Unified Design System documentation, use colours in a manner so as to comply with the minimum contrast ratio, but that does not mean that any implementation that uses the gov.cy CSS, automatically complies with the contrast ratio.
Be extra careful when including components within other components, when you are overwriting the default appearance of elements, or when you are implementing custom elements. For example if you use an anchor with class="govcy-link-inverse" on a light backgrounds, it will fail the contrast test.