Colour
Last updated on August 27, 2024Consistent use of colour across B.C. government services is important to help users navigate easily, and to maintain a coherent visual identity.
On this page:
B.C. government branding
The B.C. Visual Identity Program is managed by Government Communications and Public Engagement (GCPE). Core Policy and Procedures Manual Chapter 22 requires government digital services to align with these standards.
BC Sans
BC Sans is the standard font for the Government of British Columbia. The B.C. Visual Identity Program requires B.C. government digital services to use BC Sans.
Colour palettes
The easiest way to implement the design system colour palettes is by using design tokens.
The design system offers an expanded colour palette, to help you implement a consistent look and feel for your site or service.
Categories
Typography
| Category | Description | Token | Value | Preview |
|---|---|---|---|---|
| Typography | Default colour for all body text and headings | typography.color.primary | #2D2D2D | |
| Typography | Alternative colour for secondary/miscellaneous text | typography.color.secondary | #474543 | |
| Typography | Use only for text in inactive user interface elements | typography.color.disabled | #9F9D9C | |
| Typography | Use for placeholder text in forms | typography.color.placeholder | #9F9D9C | |
| Typography | Use for hyperlinks in body text and headings | typography.color.link | #255A90 | |
| Typography | Use for error, failure or danger message text | typography.color.danger | #CE3E39 | |
| Typography | Default colour for text on dark backgrounds | typography.color.primaryInvert | #FFFFFF | |
| Typography | Secondary colour for text on dark backgrounds | typography.color.secondaryInvert | #ECEAE8 |
Layout and components
| Category | Description | Token | Value | Preview |
|---|---|---|---|---|
| Buttons | Default fill colour for primary buttons | surface.color.primary.button.default | #013366 | |
| Buttons | Fill colour used when user hovers over primary button | surface.color.primary.button.hover | #1E5189 | |
| Buttons | Fill colour for inactive primary buttons | surface.color.primary.button.disabled | #EDEBE9 | |
| Buttons | Fill colour for secondary buttons | surface.color.secondary.button.default | #FFFFFF | |
| Buttons | Fill colour used when user hovers over secondary button | surface.color.secondary.button.hover | #EDEBE9 | |
| Buttons | Fill colour for inactive secondary buttons | surface.color.secondary.button.disabled | #EDEBE9 | |
| Buttons | Default fill colour for tertiary buttons | surface.color.tertiary.button.default | #FFFFFF | |
| Buttons | Fill colour used when user hovers over tertiary button | surface.color.tertiary.button.hover | #ECEAE8 | |
| Buttons | Fill colour for inactive tertiary buttons | surface.color.tertiary.button.disabled | #EDEBE9 | |
| Buttons | Default fill colour for buttons in danger/warning state | surface.color.primary.dangerButton.default | #CE3E39 | |
| Buttons | Fill colour used when user hovers over danger/warning button | surface.color.primary.dangerButton.hover | #A2312D | |
| Buttons | Default fill colour for disabled danger/warning button | surface.color.primary.dangerButton.disabled | #EDEBE9 | |
| Forms | Default fill colour for form/input fields | surface.color.forms.default | #FFFFFF | |
| Forms | Fill colour used when user hovers over form/input field | surface.color.forms.hover | #EDEBE9 | |
| Forms | Fill colour for inactive/disabled form/input fields | surface.color.forms.disabled | #EDEBE9 | |
| Menus | Default fill colour for menu items | surface.color.menus.default | #FFFFFFF | |
| Menus | Fill colour used when user hovers over a menu item | surface.color.menus.hover | #EDEBE9 | |
| Surface | White background | surface.color.background.white | #FFFFFF | |
| Surface | Default background colour for layout | surface.color.background.lightGray | #FAF9F8 | |
| Surface | Light blue background | surface.color.background.lightBlue | #F1F8FE | |
| Surface | Dark blue background | surface.color.background.darkBlue | #013366 | |
| Surface | Lighter border colour for UI elements | surface.color.border.light | #D8D8D8 | |
| Surface | Default border colour for UI elements | surface.color.border.medium | #898785 | |
| Surface | Used as a hover colour for form fields and inputs | surface.color.border.dark | #353433 | |
| Surface | Used as the active stroke colour for UI elements | surface.color.border.active | #2E5DD7 | |
| Surface | Background overlay colour for images and modal dialogues | surface.color.overlay.default | #00000073 | |
| Surface | Primary theme colour for components and layout | surface.color.primary.default | #013366 | |
| Surface | Hover variant of surface.color.primary.default | surface.color.primary.hover | #1E5189 | |
| Surface | Selected/pressed variant of surface.color.primary.default | surface.color.primary.pressed | #01264C | |
| Surface | Disabled/inactive variant of surface.color.primary.default | surface.color.primary.disabled | #EDEBE9 | |
| Surface | Secondary theme colour for components and layout | surface.color.secondary.default | #FFFFFF | |
| Surface | Hover variant of surface.color.secondary.default | surface.color.secondary.hover | #EDEBE9 | |
| Surface | Selected/pressed variant of surface.color.secondary.default | surface.color.secondary.pressed | #E0DEDC | |
| Surface | Disabled/inactive variant of surface.color.secondary default | surface.color.secondary.disabled | #EDEBE9 | |
| Surface | Tertiary theme colour for components and layout | surface.color.tertiary.default | #FFFFFF00 | |
| Surface | Hover variant of surface.color.tertiary.default | surface.color.tertiary.hover | #ECEAE8 | |
| Surface | Selected/pressed variant of surface.color.tertiary.default | surface.color.tertiary.pressed | #E0DEDC | |
| Surface | Disabled/inactive variant of surface.color.tertiary default | surface.color.tertiary.disabled | #EDEBE9 |
Theme colours
The design system uses an alternative blue/yellow pairing with higher contrast than the official brand colours. These theme colours are approved for use in digital services.
| Category | Description | Token | Value | Preview |
|---|---|---|---|---|
| Theme | Primary blue | theme.primaryBlue | #013366 | |
| Theme | Primary gold | theme.primaryGold | #FCBA19 | |
| Theme | Gold colour scale — lightest | theme.Gold10 | #FEF8E8 | |
| Theme | Gold colour scale | theme.Gold20 | #FEF0D8 | |
| Theme | Gold colour scale | theme.Gold30 | #FDE9C4 | |
| Theme | Gold colour scale | theme.Gold40 | #FCE2B0 | |
| Theme | Gold colour scale | theme.Gold50 | #FBDA9D | |
| Theme | Gold colour scale | theme.Gold60 | #FBD389 | |
| Theme | Gold colour scale | theme.Gold70 | #FACC75 | |
| Theme | Gold colour scale | theme.Gold80 | #F9C462 | |
| Theme | Gold colour scale | theme.Gold90 | #F8BA47 | |
| Theme | Gold colour scale — darkest | theme.Gold100 | #FCBA19 | |
| Theme | Blue colour scale — lightest | theme.Blue10 | #F1F8FE | |
| Theme | Blue colour scale | theme.Blue20 | #D8EAFD | |
| Theme | Blue colour scale | theme.Blue30 | #C1DDFC | |
| Theme | Blue colour scale | theme.Blue40 | #A8D0FB | |
| Theme | Blue colour scale | theme.Blue50 | #91C4FA | |
| Theme | Blue colour scale | theme.Blue60 | #7AB8F9 | |
| Theme | Blue colour scale | theme.Blue70 | #5595D9 | |
| Theme | Blue colour scale | theme.Blue80 | #3470B1 | |
| Theme | Blue colour scale | theme.Blue90 | #1E5189 | |
| Theme | Blue colour scale — darkest | theme.Blue100 | #013366 |
Support and status
| Category | Description | Token | Value | Preview |
|---|---|---|---|---|
| Support | Background colour for general/informational messages | support.surfaceColor.info | #F7F9FC | |
| Support | Background colour for error, failure or danger messages | support.surfaceColor.danger | #F4E1E2 | |
| Support | Background colour for success messages | support.surfaceColor.success | #F6FFF8 | |
| Support | Background colour for warning messages | support.surfaceColor.warning | #FEF1D8 | |
| Support | Border stroke for general/informational messages | support.borderColor.info | #053662 | |
| Support | Border stroke for error, failure or danger messages | support.borderColor.danger | #CE3E39 | |
| Support | Border stroke for success messages | support.borderColor.success | #42814A | |
| Support | Border stroke for warning messages | support.borderColor.warning | #F8BB47 |
Icons
| Category | Description | Token | Value | Preview |
|---|---|---|---|---|
| Icons | Default colour for icons | icons.color.primary | #2D2D2D | |
| Icons | Default colour for icons on dark backgrounds | icons.color.primaryInvert | #FFFFFFF | |
| Icons | Alternative colour for secondary/miscellaneous icons | icons.color.secondary | #474543 | |
| Icons | Use only for inactive/disabled icons | icons.color.disabled | #9F9D9C | |
| Icons | Use for hyperlinked icons | icons.color.link | #255A90 | |
| Icons | Emphasis colour for icons in general/informational state | icons.color.info | #053662 | |
| Icons | Emphasis colour for icons in error, failure or danger state | icons.color.danger | #CE3E39 | |
| Icons | Emphasis colour for icons in success state | icons.color.success | #42814A | |
| Icons | Emphasis colour for icons in warning state | icons.color.warning | #F8BB47 |
Greyscale
| Category | Description | Token | Value | Preview |
|---|---|---|---|---|
| Theme | White | theme.gray.white | #FFFFFF | |
| Theme | Greyscale — lightest | theme.gray10 | #FAF9F8 | |
| Theme | Greyscale | theme.gray20 | #F3F2F1 | |
| Theme | Greyscale | theme.gray30 | #ECEAE8 | |
| Theme | Greyscale | sheme.gray40 | #E0DEDC | |
| Theme | Greyscale | theme.gray50 | #D1CFCD | |
| Theme | Greyscale | theme.gray60 | #C6C5C3 | |
| Theme | Greyscale | theme.gray70 | #9F9D9C | |
| Theme | Greyscale | theme.gray80 | #605E5C | |
| Theme | Greyscale | theme.gray90 | #3D3C3B | |
| Theme | Greyscale | theme.gray100 | #353433 | |
| Theme | Greyscale — darkest | theme.gray110 | #252423 |
Accessibility
B.C. government digital services must meet the Level AA requirements defined in the Web Content Accessibility Guidelines (WCAG).
How you use colour can have a significant affect on your product's accessibility.
Be mindful of the colour combinations you use in your project, especially for text and backgrounds. Use the WebAIM Contrast Checker to test colour combinations.
Refer to the simplified WCAG guidance to help you ensure your product is accessible:
- Make sure colour isn't the only way you convey information (WCAG Success Criterion 1.4.1, Level A)
- Use high contrast for text and images (WCAG Success Criterion 1.4.3, Level AA)
- Enhance visual contrast for user interface and graphics (WCAG Success Criterion 1.4.11, Level AA)