If you’re a developer, you can start here to make sure you have everything you need to use the design system.
Install the distribution package
In the distribution package, you will find all the necessary files (HTML, CSS/SCSS, JS) to build into your development projects. The package also includes font files and the favicon. You can find SCSS variables and usage in each component section.
Download latest version (0.12.0)
Release notes and past versions
We recommend you create a folder where you can put all your files to keep them consistent and separate from other project files. When a new version is released, you can easily replace this folder with the new version.
- Unzip the distribution package
- Rename the extracted folder to
- Move this folder into your project (i.e. the same place as your other static assets)
ontario-design-system/styles/ds-theme.css (or ds-theme.min.css) globally into your own project. Example using SCSS and CSS:
Now that the design system is a part of your project, all of the global styles are applied automatically (header styles, paragraph spacing, etc). You can also use any of the component classes to create buttons, checkboxes and more.
Building custom components
The design system distribution package contains SCSS files with variables that can help you build new custom components and pages in alignment with the design system. Simply import
ontario-design-system/styles/sass/_variables-import.scss into your component. This file will import several categories of variables all at once (grid, colour, font, spacing, etc).
Example: colour variables
Help improve the design system
If you have other suggestions, advice or any questions, the design system team would love to hear from you.
Find out what to do if you don’t see the component you need .