Colours
Carefully curated palette used consistently throughout a project establish a visual identity, guide user attention, and aid in communication. By adhering to a set of defined colors, a website maintains cohesion and enhances recognition, fostering a harmonious and engaging user experience.
Brand colours
Brand colors should be used consistently throughout a design system to reinforce the brand identity and create a cohesive visual experience. Incorporate brand colors in elements such as buttons, headings, icons, and backgrounds ensure a unified and memorable user experience across different interfaces and platforms.
| Colour | Colour Name | Hex code | CSS variable | Uses |
|---|---|---|---|---|
| Tribunals Ontario Blue | #1a3a5c | –primary_blue | Primary color for text (headings, subheadings, and content) | |
| Tribunals Ontario Dark blue | #0A1F36 | –secondary_blue | Secondary color for headings and subheadings | |
| Kelly Green | #4bba17 | –primary_green | Default green for text |
Communicative colours
Communicative colors in a design system should be used strategically to convey meaning and enhance user understanding. Employ these colors to visually communicate information, such as status (success, warning, error), hierarchy (primary, secondary), or guiding users through interactive processes.
| Colour | Colour Name | Hex code | CSS variable | Uses |
|---|---|---|---|---|
| Success | #41cf00 | –to-colour-success | Primary colour of ‘success’ containers and objects | |
| Success light | #e0ffe9 | –to-colour-success-light | Background colour of ‘success’ containers and objects | |
| Success dark | #0f461d | –to-colour-success-dark | Text and icon colour of ‘success’ containers and objects | |
| Important | #e40000 | –to-colour-importan | Accent colour of ‘important’ containers and objects | |
| Important light | #ffecec | –colour-important-light | Background colour of ‘important’ containers and objects | |
| Important dark | #440000 | –to-colour-important-dark | Text and icon colour of ‘important’ containers and objects | |
| Warning | #ffd900 | –to-colour-warning | Primary colour of ‘warning’ containers and objects | |
| Warning light | #fffadb | –to-colour-warning-light | Background colour of ‘warning’ containers and objects | |
| Warning dark | #393000 | –to-colour-warning-dark | Text and icon colour of ‘warning’ containers and objects | |
| Info | #1080a7 | –to-colour-info | Primary colour of ‘info’ containers and objects | |
| Info light | #eaf6ff | –to-colour-info-light | Background colour of ‘info’ containers and objects | |
| Info dark | #092935 | –to-colour-info-dark | Text and icon colour of ‘info’ containers and objects |
Greyscale
Greyscale colors are used to establish a clean and organized aesthetic while allowing other colors to stand out for specific purposes, like highlighting call to actions or important information.
| Colour | Colour Name | Hex code | CSS variable | Uses |
|---|---|---|---|---|
| Greyscale 1 | #f5f5f5 | –to-grey-1 | Primary grayscale for container backgrounds | |
| Greyscale 2 | #dddddd | –to-grey-2 | Main container border color (to seperate white and Greyscale 1) | |
| Greyscale 3 | #888888 | –to-grey-3 | ||
| Greyscale 4 | #444444 | –to-grey-4 |