If you’re a developer, start here to make sure you have everything you need to use the design system.
There are two ways to develop your website or application with the Ontario Design System.
- Most flexible option to create custom applications/sites
- Complete set of design system components
- Includes complete styles, in both CSS and SASS
- Bundled with HTML, JS examples
- Easy-to-download Zip file
Learn more about the distribution package.
- Rich HTML elements that are ready to use
- Created and tested to follow the Ontario Design System
- Versioned releases via NPM
- Rolling releases
Learn more about the web components.
About the distribution package
One option to get started with using the design system within your own application/site is to use the official Ontario Design System distribution package.
The package also includes assets, such as:
- font files
- the Ontario favicon set
You can find SCSS variables and usage in each component section.
Read the release notes and download previous versions.
Get the distribution package
Create a folder where you can put all your files to keep them consistent and separate from other project files (for example, in a folder called
When a new version is released, you can easily replace the contents of this folder with the new version.
Download latest version (1.1.0)
- Unzip the distribution package.
- Rename the extracted folder to
- Move this folder into your project (for example, the same place as your other static assets).
ds-theme.min.css) globally into your own project. Read the import guidance for more details.
Download with a script
You may also integrate the distribution package into your project using a script (instead of manually), and organize it to fit your needs.
For example, the following script will download a particular release version and move the contents to a folder under
Note: remember to update the
DS_VERSION number to the version you’d like to download.
export DS_VERSION=1.1.0 && \
export DS_ZIP_NAME=ontario-design-system.zip && \
export VEN_DIR=src/assets/vendor && \
export DS_UNZIP_DIR=$VEN_DIR/ontario-design-system && \
curl https://designsystem.ontario.ca/dist/ontario-design-system-dist-$DS_VERSION.zip > $VEN_DIR/$DS_ZIP_NAME && \
unzip -o $VEN_DIR/$DS_ZIP_NAME -d $DS_UNZIP_DIR && \
rm $VEN_DIR/$DS_ZIP_NAME && \
rm $DS_UNZIP_DIR/version-release-notes-*.* && \
rm -rf $DS_UNZIP_DIR/html-samples && \
rm $DS_UNZIP_DIR/index.html && \
rm $DS_UNZIP_DIR/package.json && \
rm -rf $DS_UNZIP_DIR/styles/components && \
rm -rf $DS_UNZIP_DIR/styles/sass && \
rm -rf $DS_UNZIP_DIR/fonts/ds-fonts.zip
You may customize the items that the script deletes if you’d like to keep them within your project.
Import the styles
In your main CSS file, add an import statement to import the Design System styles into your project.
@import and the path to your assets, add the Design System styles to your application/site’s 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 may also use any of the component classes to create buttons, checkboxes and more.
Font assets — contains various versions of each font, including TTF, WOFF, WOFF2 and SVG.
HTML samples that give an example of each component’s HTML and CSS.
Icon files — learn more about icons in the Primary icons and the Secondary icon guidance.
Sample highlighting the different components that can be opened up in a browser.
Copies of the Ontario logo.
Styles used by the Design System, including component styles as well as the combined styles (
Building custom components
The design system distribution package contains SCSS files with variables. These can help you build new custom components and pages in alignment with the design system standards.
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