Foundations

Last updated on August 27, 2024

Guidance on layout, typography, colour and iconography.


Design tokens 

Design tokens provide a simple way to apply a standardised visual language, and make it easy to implement changes in the future.

An illustration of how multiple design tokens are used to style a user interface component

Typography

An illustration of the design system type scale

Good typography maintains a clear hierarchy of information and structures content to help users understand and navigate it.

Colour

An illustration of the design system colour scale

Consistent use of colour across B.C. government services helps maintain a coherent visual identity.

Layout and spacing

An illustration of user interface layout

Proper spacing and proportion of UI components is important for usability.

Iconography

An illustration of a user interface icon

The design system uses a standardised set of open-source icons.

Create accessible web products

Digital services must meet the Web Content Accessibility Guidelines (WCAG) Level AA standard.