Bank of Canada Design System

# Bank of Canada Design System — Design Style Reference

```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: partial
confidence: medium
verified_at: unknown
source_page: https://www.designsystems.one/design-systems/boa-design
sources:
  - https://design.bankofcanada.ca/
```

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Bank of Canada. "Bank of Canada 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:** Bank of Canada Design System
**Owner:** Bank of Canada
**Official documentation:** https://design.bankofcanada.ca/
**Visual character:** Central-bank composure: a single deep teal-green, conservative grays, and typography that reads like a policy statement.

---

## Summary

The Bank of Canada's design system for the public-facing sites of Canada's central bank.

_Editorial confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. Public token documentation is limited; values are a conservative reading of the published guidance. Field-level evidence: 0/50 claims source-linked, 0/50 dated. Confidence is not verification; validate canonical values before implementation._

[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=boa-design)

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| BoC Green | `#005c5b` | `--boc-primary` | Bank of Canada brand and primary actions |
| Text | `#333333` | `--boc-text` | Primary text |
| Secondary Text | `#5e6a71` | `--boc-secondary-text` | Secondary text |
| White | `#ffffff` | `--boc-white` | Surfaces |
| Light Grey | `#f4f4f4` | `--boc-light-grey` | Subtle background |
| Border | `#dddddd` | `--boc-border` | Borders |
| Error | `#b10e1e` | `--boc-error` | Errors |

## Typography

- **Body:** Aventa / system — weights 400, 600, 700 — `Aventa, 'Segoe UI', Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| h1 | `36px` | `44px` |
| h2 | `28px` | `36px` |
| body | `16px` | `26px` |

## Spacing

Base unit: `8px`

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

## Corner radius

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

## Quick start (CSS)

```css
/* Bank of Canada Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Native dp/sp values are omitted, never silently converted.
   Official reference: https://design.bankofcanada.ca/
   Reference scope: Public token documentation is limited; values are a conservative reading of the published guidance.
   Field evidence: https://www.designsystems.one/api/style-spec?system=boa-design */

:root {
  /* Color */
  --boc-primary: #005c5b; /* Bank of Canada brand and primary actions */
  --boc-text: #333333; /* Primary text */
  --boc-secondary-text: #5e6a71; /* Secondary text */
  --boc-white: #ffffff; /* Surfaces */
  --boc-light-grey: #f4f4f4; /* Subtle background */
  --boc-border: #dddddd; /* Borders */
  --boc-error: #b10e1e; /* Errors */

  /* Typography */
  --font-body: Aventa, 'Segoe UI', Arial, sans-serif;

  /* Type scale */
  --text-h1: 36px; /* line-height 44px */
  --text-h2: 28px; /* line-height 36px */
  --text-body: 16px; /* line-height 26px */

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

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

## Engineering profile

- **Source model:** Closed

## Apply this style with an AI tool

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

> Design in the spirit of Bank of Canada Design System by Bank of Canada — The Bank of Canada's design system for the public-facing sites of Canada's central bank. Character: Central-bank composure: a single deep teal-green, conservative grays, and typography that reads like a policy statement. Use a primary colour near #005c5b, the typeface "Aventa / system" (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

- [Bank of Canada Design System documentation](https://design.bankofcanada.ca/)

---

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