Ontario Design System

Use this design system to create accessible and user-centred digital products and services that are consistent with the Ontario brand.

Using the design system

The design system is currently in alpha. We will be adding more elements as they are developed.

Begin with the Getting started page or browse the system using the tabs on the left. For each of the basics and components, you will find:

  • guidance on using the elements
  • draft code in:
    • html
    • css
    • scss

Our vision

The design system is an OPS community-driven collaborative product that provides an up-to-date, easy-to-use, and robust repository to share:

  • foundational assets and elements
  • styles
  • components
  • patterns

With everything in one place, the design system will empower and enable OPS staff to create accessible, consistent and user-centred digital products and services.

We welcome your feedback on our design system. You can email us at design.system@ontario.ca or complete our survey.