Ontario.ca homepage
Français

Ontario Design System

Our npm namespace has changed. Developers should update their projects to continue accessing our components.

Design system release notes

Find current and past versions of the design system, with information about feature additions, bug fixes, and platform improvements.

Latest version

1.9.1 Release – December 2, 2024

Platform

  • Fonts guidance updates
  • Accordion guidance updates
  • Header guidance updates
  • npm package migration guidance

Elements

Added in this release:

  • Search autocomplete

Bugs and known issues

  • Fixed: Bottom margin added to step indicator component
  • Fixed: Removed extra class from radio button labels
  • Fixed: Search box clear button alignment
  • Fixed: Header language toggle attribute updates
  • Fixed: Summary list padding
  • Fixed: Missing Table of Contents Smooth Scroll Script

Distribution package

2024 releases

1.8.0 Release – May 14, 2024

Elements

Added in this release:

  • In-page navigation
  • Summary list
  • Form review

Platform

  • Updated links to Design System npm packages under their new namespace, @ongov

Bugs and known issues

  • Reduced the margin between cards on mobile

Distribution package

1.7.0 Release – March 15, 2024

Elements

Added in this release:

  • Back button

Platform

  • Removed: component status badges

Bugs and known issues

  • Fixed: visual design issues and focus management behaviour for the search box component
  • Fixed: improved accessible labels and better focus management in the ontario.ca header
  • Fixed: the menu button in the application header became misaligned when used with long application names

Distribution package

2023 releases

1.6.0 Release – December 8, 2023

Elements

Added in this release:

  • Search box
  • Badges

Platform

  • Added: information about our npm packages

Distribution package

1.5.0 Release – October 5, 2023

Elements

Added in this release:

  • Cards

Updated:

  • Social media icons for X (formerly Twitter) and Facebook

Platform

  • Added: information about the Angular web components library

Bugs and known issues

  • Fixed: improved aria label for the menu in the Ontario.ca header

Distribution package

1.4.0 Release - July 19, 2023

Elements

Added in this release:

  • ServiceOntario application header

Bugs and known issues

  • Fixed: the live validation script was missing from the distribution package
  • Fixed: the path for the fonts was incorrect in the distribution package CSS
  • Fixed: the ontario-icon-arrow-up PNG icon was missing from the distribution package

Distribution package

1.3.0 Release - June 16, 2023

Elements

Added in this release:

  • Live validation pattern for alerting users to form errors

Bugs and known issues

  • Fixed: base SASS has been reinstated in the distribution package after being moved to the Global Styles NPM package
  • Fixed: duplicate $line-height-default variable has been removed
  • Fixed: the alt text for the Ontario logo now indicates that it is a link to the ontario.ca homepage in all versions of the header
  • Fixed: the menu label in French has been changed from “Sujets” to “Menu” in all versions of the header

Distribution package

1.2.1 Release - March 7, 2023

Elements

Added in this release:

  • Favicon files and implementation guidance

Bugs and known issues

  • Fixed: broken links to fonts from ds-theme-min.css
  • Fixed: missing aria-label for the search button in the mobile version of the ontario.ca header
  • Fixed: missing role="img" on Ontario logo in all versions of the header
  • Fixed: date input now includes aria-describedBy and role="group" to improve accessibility

Distribution package

1.1.0 Release - January 26, 2023

Platform

  • The design system website is now using the design system’s global styles package.

Elements

  • Application header: the language toggle label is now spelled out in full at the mobile breakpoint.

Bugs and known issues

  • Fixed: application header menu button was shifting position on mobile
  • Fixed: error messaging now includes aria attributes to improve accessibility
  • Fixed: minor display issue with back to top component in Firefox
  • Fixed: loading indicator display issue in older versions of Safari

Distribution package

2022 releases

1.0.0 Release - December 1, 2022

Platform

Introducing web components, a new way for developers to work with the design system.

Elements

Added in this release:

  • Loading indicator

Updated:

  • Guidance on placement of a Terms of use link in the footer.

Bugs and known issues

  • Fixed: headings have been reinstated in the accordion component.
  • Fixed: error message text lacked a max-width property.
  • Fixed: layout issues in the distribution package index.html file.

Distribution package

0.12.13 Release - October 4, 2022

Elements

Updated:

  • Copyright link in footer components now refers to King’s Printer.

Distribution package

0.12.12 Release - September 29, 2022

Elements

Added in this release:

  • Dates - patterns for date input and display

Updated:

  • Footers now include standard top margin

Bugs and known issues

  • Fixed: the accordion component was failing HTML validation due to a heading hierarchy issue
  • Fixed: heading line heights were incorrect (desktop had the height intended for mobile and vice versa)
  • Fixed: the distribution package was missing some generic footer styles

Distribution package

0.12.11 Release - August 4, 2022

Platform

  • We have improved the design of images in our guidance content.

Elements

  • Guidance on footers has been updated and clarified

Bugs and known issues

  • Fixed: the header menu was not closing when a menu item was clicked

Distribution package

0.12.10 Release - June 3, 2022

Elements

Added in this release:

  • Error messaging

Bugs and known issues

  • Multiple bug fixes for the Tables component

Distribution package

0.12.9 Release - May 13, 2022

Elements

Added in this release:

  • Fieldsets

Updated:

  • Labels: clarification of the use of labels as headings

Bugs and known issues

  • HTML improvements to the ontario.ca header

Distribution package

0.12.8 Release - April 29, 2022

Distribution package

0.12.7 Release - April 25, 2022

Elements

Added in this release:

  • Tables

Updated:

  • Ontario.ca header menu behaviour

Distribution package

0.12.6 Release - February 25, 2022

Elements

Added in this release:

  • Application header (code)
  • Back to top

Known bugs and issues

  • Replaced deprecated use of / as a division in SASS

Distribution package

0.12.5 Release - January 13, 2022

Platform

  • Updated prototyping kit information and instructions for designers

Known bugs and issues

  • Replaced deprecated use of / as a division in SASS

Distribution package

2021 releases

0.12.4 Release - December 3, 2021

Known bugs and issues

  • Fixed: broken French header link
  • Fixed: accordion caret alignment
  • Fixed: hint text padding adjustment
  • Fixed: spacing variables for headings are consistent

Distribution package

0.12.3 Release - November 26, 2021

Platform

  • We have improved the full-screen preview for components.

Elements

  • Added in this release:
    • Form step indicator

Known bugs and issues

  • Fixed: Icons no longer use the deprecated xlink:href attribute.

Distribution package

0.12.2 Release - November 2, 2021

Platform

  • In the spirit of applying the design system to the design system, this site now uses the design system header and footer components.
  • The navigation design has been updated to make it easier to read and to better reflect design system styles.

Elements

  • Header component: the Ontario logo now links to the ontario.ca landing page rather than the splash page.

Known bugs and issues

  • Fixed: broken links to earlier versions of the distribution package.

Distribution package

0.11.7 Release - July 8, 2021

Elements

  • Added in this release:
    • Application header (design and guidance only)

Platform

  • Fixed: component preview had fixed height on mobile that prevented viewing entire component

Known bugs and issues

  • Fixed: dropdown max-width changed from 46rem to 48rem to match paragraph max-width
  • Fixed: broken reference in alerts and highlights ARIA ID (spaces instead of dashes)

Distribution package

0.11.0 Release - May 19, 2021

Elements

  • Added in this release:
    • Accordion
    • Hint expander

Distribution package

0.10.5 Release - March 2, 2021

Platform

Known bugs and issues

  • Fixed: header accessibility bug - pressing enter on search input does not trigger search
  • Fixed: hyphen replaced with en-dash in footer component
  • Fixed: order of menu items in French version of design system

Distribution package

0.9.2 Release - January 15, 2021

Elements

  • Added in this release:
    • Blockquote component now uses French quotation marks when html lang=”fr”

Known bugs and issues

  • Added missing graphics to distribution package
  • Removed extra margin-bottom property in checkboxes.scss
  • Changed icon from transparent to white for informational alerts
  • Removed invisible characters that showed up in guidance text on Chrome for Windows

Distribution package

2020 releases

0.9.0 Release - December 17, 2020

Elements

  • Added in this release:
    • Headers
    • Footers
    • Images and photography

Distribution package

0.8.4 Release - December 4, 2020

Platform

Known bugs and issues

  • Fixed: platform language toggle on IE
  • Fixed: dist index layout and titles
  • Fixed: markup for asides/callouts

Distribution package

0.7.0 Release - November 9, 2020

This is the seventh Alpha release of the Ontario Design System.

Platform

  • Added an index.html file to the distribution package to allow developers to quickly review available components and styles.

Elements

  • Added guidance for disabled buttons.

Known bugs and issues

  • Fixed: an issue with text not wrapping for radio button and checkbox labels and hint text.
  • Fixed: missing background colour for system-white in colours table

Distribution package

0.6.1 Release - November 5, 2020

This is the sixth Alpha release of the Ontario Design System.

Platform

  • Fixed issue with component preview window on Android devices

Elements

  • Alerts and highlights added
  • Added a maximum line length for text components

Known bugs and issues

  • Fixed: issue with grid breakpoints not being triggered at the exact pixel width expected
  • Fixed: square highlight on click of radio button
  • Fixed: label length wrapping for longer texts

Distribution package

0.5.2 Release - October 2, 2020

This is the fifth Alpha release of the Ontario Design System.

Platform

  • Release date added to navigation
  • Form components grouped in menu
  • Faster webpages loading with Gzip compression
  • Minified CSS styles

Elements

  • List styles added
  • Radio buttons: label width bug fixed
  • Open Sans font 700 weight added; bold style changed to use 700 weight
  • Missing SVG icon added to distribution package
  • Fixes for SASS import paths
  • Minified theme file
  • Checkbox missing icon and styles fixes

Distribution package

0.4 Release - June 9, 2020

This is the fourth Alpha release of the Ontario Design System.

Platform

As of this release:

  • The Design System is available in both English and French
  • Notes are integrated into the components pages
  • Component guidance pages work on mobile devices
  • Distribution package: Design System 0.4.0

Elements

  • The system colour palette has some minor additions

Known bugs and issues:

  • Fixed: the order of the icons in the preview box does not match the order of the “Notes” table

Distribution package

0.3 Release - April 27, 2020

This is the third Alpha release of the Ontario Design System.

Platform

  • We released our design system theme for developers
  • We improved the display of variations in the component preview window

Elements

Known bugs and issues

  • We’re still having issues with the design system on mobile that we’re working to resolve
  • The order of the icons in the preview box does not match the order in the “Notes” table

Distribution package

0.2 Release - February 6, 2020

This is the second Alpha release of the Ontario Design System.

Platform

  • We’ve designed a new landing page which is way more fun than what we use to have
  • We’ve also improved the accessibility of the site with better tab order, alt text on buttons and better performance in IE11

Elements

  • In this release, we’ve included:
    • a new radio button design
    • checkboxes
    • grid
    • spacing
  • We’ve also updated the content and layout of some pages, based on your feedback

Known bugs and issues

  • We’re still having issues with the design system on mobile that we’re working to resolve

0.1 Release - December 3, 2019

This is the first Alpha release of the Ontario Design System.

Platform

  • We’ve released the first version of our design system platform using Fractal, an open source solution
  • Fractal works well on desktop with Chrome, Safari and Firefox

Elements

  • In this release, we’ve included:
    • design principles
    • colours
    • fonts and typography
    • buttons
    • dropdown lists
    • hint text
    • labels
    • radio buttons
    • text inputs
    • textareas
  • Elements have been tested on IE11, Microsoft Edge, Firefox, Chrome, Safari on PC, Mac, iPhone and Android
  • This release includes the HTML, CSS and SCSS

Known bugs and issues

  • We are testing these components for accessibility issues. There may be more issues we identify through the testing
  • We’re still having issues with the design system in IE11
  • We know there are issues with accessibility and navigation, particularly on mobile
  • We are currently using images in the guidance where they help to illustrate the guidance, and many of the images include text. In future releases, we want to move away from images and use code snippets to improve accessibility

If you have any questions or feedback, please get in touch.