Get started with the design system (for designers)
If you’re a designer, you can start here to make sure you have everything you need to start using the design system and our UI prototyping kit.
Built-in visual identity
The visual style of components in the design system offers a clean, flexible and modern aesthetic that meets high standards of usability and accessibility while promoting credibility and trust.
The design system contains HTML examples of common UI components designed to follow Ontario’s visual identity. Most components will have design properties available for you to use in your prototyping tools. You can also use your browser’s developer tools to view the specs of each example (for example, padding, margins, stroke weight, line-height and so on).
UI prototyping kit
The prototyping kit makes it easy for you to build mockups or prototypes of your product using Design System components and styles.
In the prototyping kit, you’ll find:
- grid and sample breakpoint artboards
- colour swatches with hex codes
- typography and heading styles
- components
- templates
Using Figma
The kit is built in Figma, which is a free tool that can be used in a web browser or installed on your desktop computer. If you haven’t used Figma before, you will need to create a Figma account. The kit uses the team library feature of Figma, so once you add it to your projects you will automatically receive any updates or additions we publish.
To start using the prototyping kit:
- Install the correct fonts.
- Open the prototyping kit.
- Sign in to Figma, if you’re not already signed in.
- Create a new document in Figma or open an existing project.
- At the upper left of the screen, click on Assets, then click on the Team Library icon.
- Click the toggle next to the Ontario Design System UI prototyping kit to enable the team library.
You should now have access to the grid breakpoints, colours, and font styles from the prototyping kit to begin creating mockups.
Tips for using the prototyping kit
Install the correct fonts
The Ontario Design System primarily uses two font sets: Open Sans and Raleway modified. You will need to download and install these fonts to use with the prototyping kit. You should also read the fonts and typography guidance before you start.
Download Ontario Design System fonts
Once you install the fonts, accessing them will depend on how you use Figma:
- If you’re using the Figma Desktop app, local fonts will already be available to use.
- If you’re using Figma in your browser, you will need to install the Figma Font Helper application, which allows you to access local fonts in the browser. Learn how to use the Figma Font Helper.
Add the grid to your project
- Create a new frame or click on an existing frame in your document where you would like to apply the grid style.
- On the right side design panel, select the four-dot icon in the “Layout Grid” section.
- If you’ve already added the Ontario Design System prototyping kit team library, you should see desktop/tablet/mobile grid breakpoints available. If not, refer to the instructions above to add the team library.
- Select the desired breakpoint to add the grid to your existing frame.
Ontario logo
If you need a high resolution version of the Ontario logo or have any questions around logo usage, please contact visual.Identity@ontario.ca.
The Ontario logo is trademarked and is restricted to official Government of Ontario products. An exception is made for sponsorships and transfer payment recipients. If there is no official partnership agreement that outlines their use of our official mark(s), then the logo cannot be used.
Illustrations and images
- We recommend using images and photography to align with Ontario’s visual identity
- If you are going to create custom illustrations, read the images and photography guidance
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.