Colours

Colour Colour name Hex codeSCSS variable Notes
System-black #1A1A1A $ontario-colour-black Default colour for most text (such as body, headings, subheadings)
System-white #FFFFFF $ontario-colour-white Text on primary buttons, dark backgrounds
 Alert #CD0000 $ontario-colour-alert Alert-level icons, left-hand vertical bar of alert box or error box
 Alert light #FCEFF0 $ontario-colour-alert-light Background of alert box
 Success #118847 $ontario-colour-success Success-level icons, left-hand vertical bar of success box
 Success light #E5f0E9 $ontario-colour-success-light Background of success box
 Warning #FFD440 $ontario-colour-warning Warning-level icons, left-hand vertical bar of warning box
 Warning light #FEF6DC $ontario-colour-warning-light Background of warning box
 Information #1080A6 $ontario-colour-information Information-level icons, left-hand vertical bar of information box
 Information light #E2F0F4 $ontario-colour-information-light Background of information box
 Link #0066cc $ontario-colour-link Buttons and unvisited links
 Link - hover #00478F $ontario-colour-link--hover Button and link hover state
 Link - active #002142 $ontario-colour-link--active Button and link active state
 Link - visited #551A8B $ontario-colour-link--visited Link visited state (but not buttons – they remain blue)
 Secondary - hover #E0F0FF $ontario-colour-secondary--hover Secondary button hover state
 Secondary - active #C2E0FF $ontario-colour-secondary--active Secondary button active state
 Tertiary - hover #E8E8E8 $ontario-colour-tertiary--hover Tertiary button hover state
 Tertiary - active #D1D1D1 $ontario-colour-tertiary--active Tertiary button active state
 Focus ring #009ADB $ontario-colour-focus Focus state outline for inputs, links and buttons

Typegraphy

Header samples

Some text, H1 header

Some text, H2 header

Some text, H3 header

Some text, H4 header

Some text, H5 header
Some text, H6 header

Ul, ol, li, p tags samples

  • Element list 1
  • Element list 2
  • Element list 3
  1. Element list 1
  2. Element list 2
  3. Element list 3

Paragraph

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis exercitationem beatae consequatur saepe possimus impedit ipsa libero adipisci, accusantium obcaecati placeat distinctio numquam enim voluptatem eum? Iste dicta perspiciatis voluptatem, architecto inventore tempore autem corporis praesentium delectus soluta sunt similique deleniti sed omnis nihil voluptatum optio enim quas sapiente aliquam nobis ullam facilis at aspernatur! Aut consequuntur similique non porro soluta placeat veniam expedita harum accusantium ratione dolore corporis ex quia deleniti vel magnam illum maxime, est officiis tempora! Ullam asperiores aut quos quia ipsum nisi neque quae repudiandae saepe reiciendis. Ullam, sit dolores a officiis corrupti natus reprehenderit ipsum dolorum id minus veniam deleniti officia doloremque amet delectus earum exercitationem nobis eaque maxime rerum labore est minima distinctio? Autem repellat in ad facilis fugiat quo voluptates vel. Alias suscipit beatae rem minus nulla voluptates possimus aut porro quis tempora fugiat in pariatur dolorem sequi nobis odio temporibus, explicabo harum!

12col grid

ontario-column ontario-small-1
ontario-column ontario-small-11
ontario-column ontario-small-1 ontario-medium-3
ontario-column ontario-small-11 ontario-medium-9
ontario-column ontario-small-1 ontario-medium-3 ontario-large-5
ontario-column ontario-small-11 ontario-medium-9 ontario-large-7
Link to something

Blockquote default

In the past few years, Ontario has gained a high level of respect for its visionary work in early education. The changes have been profound, and thoughtfully introduced. The views that guide the work are articulated clearly, and express great respect for children, families, and educators. We now have a solid foundation upon which to build a more coherent system.

Academic partners Ontario’s Pedagogy for the Early Years

Blockquote short

Access to high-quality child care is an issue that impacts our entire society.

Survey respondent

Callouts asides asides

Callouts asides default

Get notified

Sign up for email reminders and we’ll notify you 60 and 30 days before your licence expires.

Critical alerts

COVID-19 State of emergency extended until May 12, 2020.

Page alerts default

Licence plates

ServiceOntario centres may issue either a blue licence plate or a white embossed ‘Yours to Discover’ licence plate depending on availability. Learn more about replacing a licence plate.

Page alerts error

There is a problem

Errors were found on this page:

Page alerts success

Your payment was successful and your order is now complete.

Please look out for an email confirmation with your receipt and order number. Your licence plate sticker should arrive in 2-4 weeks.

Page alerts warning

Service wait times

We are experiencing longer than normal wait times at this ServiceOntario centre. You can check out our Service Finder to see if the service you need is offered online or at a different centre nearby.

Buttons default

Buttons secondary button

Buttons tertiary button

Checkboxes

Checkbox legend(required/optional)

Dropdown lists default

Dropdown lists with default option selected

Hint text

Hint text placeholder

Labels default

Labels labels as page headings

Labels large label

Radio buttons

Radio legend(required/optional)

Text areas

Text inputs

Default
Input width overrides

Footers

'
'

Icons primary

  • ontario-icon-accessibility
  • ontario-icon-add-alt
  • ontario-icon-add
  • ontario-icon-alert-error
  • ontario-icon-alert-information
  • ontario-icon-alert-success
  • ontario-icon-alert-warning
  • ontario-icon-chevron-down
  • ontario-icon-chevron-left
  • ontario-icon-chevron-right
  • ontario-icon-chevron-up
  • ontario-icon-close
  • ontario-icon-collapse
  • ontario-icon-credit-card
  • ontario-icon-critical-alert-warning
  • ontario-icon-dropdown-arrow
  • ontario-icon-email
  • ontario-icon-expand
  • ontario-icon-help
  • ontario-icon-menu
  • ontario-icon-new-window
  • ontario-icon-phone
  • ontario-icon-remove-alt
  • ontario-icon-remove
  • ontario-icon-search
  • ontario-icon-tty

Icons secondary

  • ontario-icon-account
  • ontario-icon-attach
  • ontario-icon-bookmark-off
  • ontario-icon-bookmark-on
  • ontario-icon-calendar
  • ontario-icon-camera
  • ontario-icon-clock
  • ontario-icon-cloud
  • ontario-icon-delete
  • ontario-icon-document
  • ontario-icon-download
  • ontario-icon-edit
  • ontario-icon-export
  • ontario-icon-facebook-alt
  • ontario-icon-facebook
  • ontario-icon-favourite-off
  • ontario-icon-favourite-on
  • ontario-icon-filter
  • ontario-icon-flickr
  • ontario-icon-grid
  • ontario-icon-instagram
  • ontario-icon-interac-en-alt
  • ontario-icon-interac-en
  • ontario-icon-interac-fr-alt
  • ontario-icon-interac-fr
  • ontario-icon-link-url
  • ontario-icon-linkedin-alt
  • ontario-icon-linkedin
  • ontario-icon-list
  • ontario-icon-live-chat
  • ontario-icon-location-off
  • ontario-icon-location-on
  • ontario-icon-location-searching
  • ontario-icon-lock-off
  • ontario-icon-lock-on
  • ontario-icon-map
  • ontario-icon-mastercard-alt
  • ontario-icon-mastercard
  • ontario-icon-media-fast-forward
  • ontario-icon-media-fast-rewind
  • ontario-icon-media-pause
  • ontario-icon-media-play
  • ontario-icon-media-stop
  • ontario-icon-microphone-off
  • ontario-icon-microphone-on
  • ontario-icon-more-vertical
  • ontario-icon-next
  • ontario-icon-notification
  • ontario-icon-password-hide
  • ontario-icon-password-show
  • ontario-icon-photo
  • ontario-icon-pin-location-off
  • ontario-icon-pin-location-on
  • ontario-icon-previous
  • ontario-icon-print
  • ontario-icon-replay
  • ontario-icon-rss-feed
  • ontario-icon-save
  • ontario-icon-sentiment-1
  • ontario-icon-sentiment-2
  • ontario-icon-sentiment-3
  • ontario-icon-sentiment-4
  • ontario-icon-sentiment-5
  • ontario-icon-settings
  • ontario-icon-share
  • ontario-icon-sort
  • ontario-icon-tag
  • ontario-icon-text-message
  • ontario-icon-timer
  • ontario-icon-transport-bicycle
  • ontario-icon-transport-bus
  • ontario-icon-transport-car
  • ontario-icon-transport-walk
  • ontario-icon-twitter-alt
  • ontario-icon-twitter
  • ontario-icon-upload
  • ontario-icon-video
  • ontario-icon-visa
  • ontario-icon-vote-dislike
  • ontario-icon-vote-like
  • ontario-icon-vpn-key
  • ontario-icon-wheelchair
  • ontario-icon-wifi
  • ontario-icon-youtube