Ontario Design System

# Ontario Design System — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Government of Ontario. "Ontario Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Ontario Design System
**Owner:** Government of Ontario
**Official documentation:** https://designsystem.ontario.ca/
**Visual character:** Provincial trust in Raleway and Open Sans: trillium-branded blue, generous body sizes, and bilingual-ready patterns.

---

## Summary

Design system for Ontario.ca and the Government of Ontario's digital services.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Ontario Blue | `#0066cc` | `--ontario-colour-link` | Links and primary actions |
| Text Black | `#1a1a1a` | `--ontario-colour-black` | Primary text |
| Greyscale 60 | `#666666` | `--ontario-greyscale-60` | Secondary text |
| White | `#ffffff` | `--ontario-colour-white` | Page background |
| Greyscale 5 | `#f2f2f2` | `--ontario-greyscale-5` | Subtle background |
| Gold Accent | `#ffd440` | `--ontario-colour-gold` | Focus and highlights |
| Error Red | `#cd0000` | `--ontario-colour-error` | Errors |
| Success Green | `#118847` | `--ontario-colour-success` | Success |

## Typography

- **Display:** Raleway Modified — weights 600, 700 — `'Raleway Modified', 'Open Sans', Arial, sans-serif`
- **Body:** Open Sans — weights 400, 600 — `'Open Sans', Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `40px` | `48px` |
| h2 | `32px` | `40px` |
| h3 | `24px` | `32px` |
| body | `18px` | `28px` |

## Spacing

Base unit: `8px`

Scale: `8px` · `16px` · `24px` · `32px` · `40px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `4px` |

## Quick start (CSS)

```css
/* Ontario Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://designsystem.ontario.ca/ */

:root {
  /* Color */
  --ontario-colour-link: #0066cc; /* Links and primary actions */
  --ontario-colour-black: #1a1a1a; /* Primary text */
  --ontario-greyscale-60: #666666; /* Secondary text */
  --ontario-colour-white: #ffffff; /* Page background */
  --ontario-greyscale-5: #f2f2f2; /* Subtle background */
  --ontario-colour-gold: #ffd440; /* Focus and highlights */
  --ontario-colour-error: #cd0000; /* Errors */
  --ontario-colour-success: #118847; /* Success */

  /* Typography */
  --font-display: 'Raleway Modified', 'Open Sans', Arial, sans-serif;
  --font-body: 'Open Sans', Arial, sans-serif;

  /* Type scale */
  --text-h1: 40px /* line-height 48px */;
  --text-h2: 32px /* line-height 40px */;
  --text-h3: 24px /* line-height 32px */;
  --text-body: 18px /* line-height 28px */;

  /* Spacing */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;

  /* Radius */
  --radius-default: 4px;
}
```

## Engineering profile

- **Ships for:** CSS-only
- **Token pipeline:** Custom
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Ontario Design System by Government of Ontario — Design system for Ontario.ca and the Government of Ontario's digital services. Character: Provincial trust in Raleway and Open Sans: trillium-branded blue, generous body sizes, and bilingual-ready patterns. Use a primary colour near #0066cc, the typeface "Open Sans" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 8px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Ontario Design System documentation](https://designsystem.ontario.ca/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/ontario-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._