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.
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).
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:
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:
You should now have access to the grid breakpoints, colours, and font styles from the prototyping kit to begin creating mockups.
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.
Once you install the fonts, accessing them will depend on how you use Figma:
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.
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.