Colour
Colour is a key part of the Government of the Northwest Territories brand identity. It helps create visual hierarchy, establish tone, and support accessibility. Our colour palette balances flexibility with consistency, ensuring that content is clear, legible, and visually engaging across all platforms. This section outlines the primary and secondary colours, their usage guidelines, and accessibility considerations to maintain contrast and readability.
Colour Palette
The colour palette defines the core theme and text colours used across the design system. Theme colours provide consistent options for branding, emphasis, and communicating meaning in UI components such as buttons, alerts, and messages. By using these predefined variables, designers and developers can maintain visual consistency and ensure accessible contrast throughout the system.
Theme Colors
Semantic colors used for buttons, alerts, and other UI components throughout the system.
| Color | Name | Hex Value | CSS Variable | Usage |
|---|---|---|---|---|
| Blue | #2699D5 |
--bs-blue |
Ice Blue brand color | |
| Primary | #005D8F |
--bs-primary |
Primary actions, links | |
| Success | #15870D |
--bs-success |
Success messages, confirmations | |
| Announcement | #004A73 |
--bs-announcement |
Important announcements | |
| Info | #C4DAF1 |
--bs-info |
Informational messages | |
| Warning | #F3CD4E |
--bs-warning |
Warning messages, cautions | |
| Danger | #C20020 |
--bs-danger |
Errors, alert messages, destructive actions | |
| Light | #EDEDED |
--bs-light |
Light backgrounds, subtle elements | |
| Dark | #001F30 |
--bs-dark |
Dark backgrounds, high contrast | |
| Background Color Accent Light | #F2F7FD |
--bs-background-color-accent-light |
Light accent backgrounds | |
| Border Color Accent | #2699D5 |
--bs-border-color-accent |
Accent borders and dividers | |
| Border Color | #C2C4C6 |
--bs-border-color |
Default border color for components | |
| Border Color Dark | #8B8D90 |
--bs-border-color-dark |
Dark border color for enhanced contrast |
Text Colors
Colors specifically designed for text content and emphasis levels.
| Color | Name | Hex Value | CSS Variable | Usage |
|---|---|---|---|---|
| Body Color | #333333 |
--bs-body-color |
Primary body text | |
| Body Color Lighter | #676869 |
--bs-body-color-lighter |
Lighter body text | |
| Link Color | #005D8F |
--bs-link-color |
Default link color | |
| Link Hover Color | #001F30 |
--bs-link-hover-color |
Link hover state |
Dark Mode Variables
Color variables that adapt automatically in dark mode contexts for optimal contrast and readability.
To use darkmode and take advantage of the adaptive colour variables, apply the data-bs-theme="dark" attribute to the html tag.
| Color | Name | Dark Mode Value | CSS Variable | Usage |
|---|---|---|---|---|
| Body Background | #001F30 |
--bs-body-bg |
Main page background | |
| Body Color | #fff |
--bs-body-color |
Primary text color | |
| Border Color | rgba(255,255,255,0.5) |
--bs-border-color |
Default borders | |
| Link Color | #fff |
--bs-link-color |
Default link color in dark mode | |
| Link Hover Color | #C4DAF1 |
--bs-link-hover-color |
Link hover state in dark mode |
In some cases you will also need to apply the bg-dark class to the HTML tag in addition to the data-bs-theme="dark" attribute in order to apply the default dark background colour.
Ice Blue
Complete blue color scale from lightest to darkest, based on the GNWT Ice Blue primary color.
| Color | Name | Hex Value | CSS Variable |
|---|---|---|---|
| Ice Blue 100 | #F2F7FD |
--bs-blue-100 |
|
| Ice Blue 200 | #DBE9F7 |
--bs-blue-200 |
|
| Ice Blue 300 (Ice Blue Light) | #C4DAF1 |
--bs-blue-300 |
|
| Ice Blue 400 | #8CC7E8 |
--bs-blue-400 |
|
| Ice Blue 500 (Ice Blue) | #2699D5 |
--bs-blue-500 |
|
| Ice Blue 600 (Ice Blue Dark) | #0076B6 |
--bs-blue-600 |
|
| Ice Blue 700 | #005D8F |
--bs-blue-700 |
|
| Ice Blue 800 (Dark Blue) | #004A73 |
--bs-blue-800 |
|
| Ice Blue 900 | #001F30 |
--bs-blue-900 |
Grayscale Palette
Neutral colors for backgrounds, borders, and text with varying levels of contrast.
| Color | Name | Hex Value | CSS Variable |
|---|---|---|---|
| White | #fff |
--bs-white |
|
| Gray 100 | #EDEDED |
--bs-gray-100 |
|
| Gray 200 | #D8DCDD |
--bs-gray-200 |
|
| Gray 300 | #C2C4C6 |
--bs-gray-300 |
|
| Gray 400 | #A7A9AC |
--bs-gray-400 |
|
| Gray 500 | #8B8D90 |
--bs-gray-500 |
|
| Gray 600 | #676869 |
--bs-gray-600 |
|
| Gray 700 | #49494A |
--bs-gray-700 |
|
| Gray 800 | #333333 |
--bs-gray-800 |
|
| Gray 900 | #1A1A1A |
--bs-gray-900 |
|
| Black | #000 |
--bs-black |