What’s new with the Ontario Design System
Editor’s Note: As we create more responsive and flexible public services, the Ontario Design System helps us make all of our services look and feel consistent, building trust and familiarity with our users. Read more on a previous blog post about Building the Ontario Design System.
Here are some notes on how we’re continuing to grow and improve the design system, including the end of our Alpha phase, some recently-added components, the release of our Figma prototyping kit, and an example of how the design system is being used.
Moving out of Alpha
After more than a year of development, testing, and iteration, the design system has finished its Alpha phase. Going forward, we will be labeling individual components as “ready” or “in progress” to indicate what stage of development they have reached and how extensively they have been tested.
The design system in French
Ontario government websites are bilingual, and as part of wrapping up our Alpha phase, we introduced a French-language version of the design system: the Système de conception de l’Ontario.
Component additions
We have added several components over the past few months, including:
- Blockquote — to draw attention to a quotation; commonly used in public announcements.
- Callouts and asides — to highlight in-page content.
- Critical alerts — to bring a user’s attention to a significant situation, such as a site-wide service disruption or other information that will impact most users.
- Page alerts — to inform a user of changes on a page.
- Headers — to show users that they are on an official Ontario site and unify Ontario’s web presence.
- Footers — to show users that they are on an official Ontario site and provide consistent access to accessibility, privacy, copyright, and contact links.
Prototyping kit
The new Ontario Design System prototyping kit, built in the Figma prototyping tool, makes it faster and easier for designers to create prototypes that follow design system guidance and styles.
Design system components in action
As the design system has matured, more Government of Ontario websites and applications are using design system components.
Teams working to support the government’s pandemic response took advantage of the design system to speed up development. One example of their work, the COVID-19 self-assessment tool, has been used more than 12 million times since its launch in March 2020.
What’s next
You can view our backlog to see which components are prioritized for upcoming development.
Let us know what you think
The design system team would love to hear from you. Send us an email with any questions, comments, or suggestions you have at design.system@ontario.ca.
