Canada.ca Design System

# Canada.ca 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 Canada. "Canada.ca 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:** Canada.ca Design System
**Owner:** Government of Canada
**Official documentation:** https://design.canada.ca/
**Visual character:** Bilingual federal sobriety: Lato headings over Noto body, a single flag-red accent, and layouts that survive translation to French.

---

## Summary

Design system for Government of Canada websites and 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 |
| --- | --- | --- | --- |
| FIP Red | `#eb2d37` | `--gc-red` | Federal Identity Program accent |
| Link Blue | `#284162` | `--gc-link` | Links (dark navy-blue) |
| Text | `#333333` | `--gc-text` | Primary text |
| White | `#ffffff` | `--gc-white` | Page background |
| Light Grey | `#f5f5f5` | `--gc-light-grey` | Subtle background |
| Accent Blue | `#26374a` | `--gc-accent` | Headers and footers |
| Error Red | `#d3080c` | `--gc-error` | Errors |
| Selected Link | `#7834bc` | `--gc-visited` | Visited links |

## Typography

- **Display:** Lato — weights 400, 700 — `Lato, sans-serif`
- **Body:** Noto Sans — weights 400, 700 — `'Noto Sans', sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `41px` | `46px` |
| h2 | `39px` | `44px` |
| h3 | `29px` | `33px` |
| body | `20px` | `33px` |

## Spacing

Base unit: `5px`

Scale: `5px` · `10px` · `15px` · `20px` · `30px` · `45px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `0` |

## Quick start (CSS)

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

:root {
  /* Color */
  --gc-red: #eb2d37; /* Federal Identity Program accent */
  --gc-link: #284162; /* Links (dark navy-blue) */
  --gc-text: #333333; /* Primary text */
  --gc-white: #ffffff; /* Page background */
  --gc-light-grey: #f5f5f5; /* Subtle background */
  --gc-accent: #26374a; /* Headers and footers */
  --gc-error: #d3080c; /* Errors */
  --gc-visited: #7834bc; /* Visited links */

  /* Typography */
  --font-display: Lato, sans-serif;
  --font-body: 'Noto Sans', sans-serif;

  /* Type scale */
  --text-h1: 41px /* line-height 46px */;
  --text-h2: 39px /* line-height 44px */;
  --text-h3: 29px /* line-height 33px */;
  --text-body: 20px /* line-height 33px */;

  /* Spacing */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 30px;
  --space-6: 45px;

  /* Radius */
  --radius-default: 0;
}
```

## Engineering profile

- **Ships for:** CSS-only, Web Components
- **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 Canada.ca Design System by Government of Canada — Design system for Government of Canada websites and digital services. Character: Bilingual federal sobriety: Lato headings over Noto body, a single flag-red accent, and layouts that survive translation to French. Use a primary colour near #eb2d37, the typeface "Noto Sans" (or a close equivalent), corner radius around 0, a spacing rhythm on a 5px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Canada.ca Design System documentation](https://design.canada.ca/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/canada-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._