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:

  1. Install the correct fonts.
  2. Open the prototyping kit.
  3. Sign in to Figma, if you’re not already signed in.
  4. Create a new document in Figma or open an existing project.
  5. At the upper left of the screen, click on Assets, then click on the Team Library icon.
  6. Click the toggle next to the Ontario Design System UI prototyping kit to enable the team library.
Screenshot of the Figma screen showing the locations of the Assets tab, Team Library icon, and Ontario Design System prototyping kit 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:

Add the grid to your project

  1. Create a new frame or click on an existing frame in your document where you would like to apply the grid style.
  2. On the right side design panel, select the four-dot icon in the “Layout Grid” section.
  3. 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.
  4. Select the desired breakpoint to add the grid to your existing frame.

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

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.