Our npm namespace has changed. Developers should update their projects to continue accessing our components.

Getting started

What you need to know to get started with the Ontario Design System.


Overview

If you’re just starting out with the Ontario Design System, you’re in the right place. Keep reading for everything you need to get up and running.

The Ontario Design System is a repository of design and coding standards for building accessible, consistent, user-centred Ontario government websites and applications.

Learn more about the design system.


Who needs to use it

All public-facing Government of Ontario digital services must use the Ontario Design System. This includes services for both the general public and specialized audiences.

Digital services include:

  • websites
  • web applications
  • mobile apps
  • digital services delivered through vendor platforms

Commercial off-the-shelf (COTS) and software-as-a-service (SaaS) platforms are not exempt.

Who this applies to

  • ministries
  • agencies whose services are integrated with or primarily accessed through ontario.ca
  • vendors contracted by the government

Internal government services are not required to use the design system.


Designer and developer documentation

We’ve created guides to help designers and developers get up and running with the design system.

The design resources include our font sets and the Figma UI kit.

The developer resources include code packages and import guidance.


Components

Components are the reusable building blocks of our design system. Each component meets a specific interaction or UI need.

Use the components to build your product and ensure a seamless experience for users across the Ontario government.

Browse the component library.

If you have any questions or feedback, please get in touch.