Colour

Last updated on August 27, 2024

Consistent 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

Colours used for text, including headings and hyperlinks
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

Colours used to style user interface elements
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.

Primary theme colours for the B.C. Design System
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

Colours used for status messages and indicators
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

Colours used to style 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 

Utility 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: