CBC Brand Design System Deep Dive

1. Brand Overview

CBC’s design language is what you’d expect from a national broadcaster that has to juggle trust, clarity, and speed. It’s not trying to be trendy — the visual system is anchored in functional journalism. The tone feels designed for accessibility and mass public consumption, not a niche audience. You can tell they care about consistency: fonts are locked in, spacing is tight to an 8px rhythm, colors lean heavily on a specific blue range with clear accessibility thinking.

They’ve leaned into the “Radio Canada” typeface for basically every context — headings, links, buttons, captions — which gives a unified voice across platforms. The typography doesn’t try to dazzle, it’s all about being readable at multiple scales (down to sub-14px caption levels). The weights are thought through: big headlines are extra-bold, body text is medium to regular, action elements ramp up the weight for clarity.

Color-wise, CBC’s brand historically is red, but here the UI design uses blues for functional interaction states (links, hover, focus) and white for clean surfaces. Red only sneaks in for accents (brand heritage) and certain buttons. This is smart: in digital, red is often "alert" or error — using it sparingly avoids confusion.

The spacing system is strict, almost militaristic — you see the 8px base everywhere, with occasional smaller steps like 4px or 2px for micro-alignments. Components feel boxed-in, with consistent corner treatments — mostly 8px radii for cards and chips, 100px for true pill buttons.

If you’re building for an audience that spans teenagers to retirees, this system works because it’s predictable. You don’t have to relearn patterns from section to section.

2. Color System

2.1 Primary Colors

Their "primary" from the semantic map is pure white (#ffffff). This says something: the main "color" of the CBC brand site isn’t a color — it’s the canvas. It tells you they want content (photos, headlines) to be the focus, not chrome UI. Interaction cues come from blue (#0000ee classic link blue and #0550c8), which punches hard against white backgrounds. This is old-school web thinking, but it works because users instantly recognize blue text as clickable.

2.2 Complete Palette

2.3 Color Relationships

The #0000ee on white is a WCAG home run — Contrast ratio ~8.6:1. Great for accessibility. The hover blue #0550c8 is slightly softer but still strong at ~5.9:1 contrast on white. Almost black (#181818) against white scores 15+:1. This is safe design.

Dark mode isn’t represented in the extracted data — everything points to a light theme. They could easily pivot, given the palette’s simplicity: swap background #ffffff to #181818, reverse text colors, keep blues.

2.4 Usage Guide

Best combos:

• Links: #0000ee default, #0550c8 hover — don’t swap these; the hover color is calmer and communicates interaction without screaming.
• Buttons on white: Use deep blues (#0x) or red accents sparingly. Keep text white for readability.
• Avoid: Blue on blue — even #0000ee on #0074ad will fail contrast.
• Red is not your primary CTA in this palette — it’s a brand accent so reserve it for branding or critical alerts.

3. Typography

3.1 Font Families

One font to rule them all: Radio Canada (Google Fonts). No fallbacks listed — likely system defaults if unavailable. They even use it for headings, links, captions, buttons — that’s rare. It’s variable-capable, so weights range from 400 to 800 smoothly.

3.2 Type Scale

3.3 Hierarchy

It’s tight: Big jumps between 40px, 36px, 32px — each locked at 1.30 line-height. This keeps headlines compact but readable. Links at 16–20px with bold weights pop in body copy. Captions drop down to sub-14px sizes, some uppercased — great for metadata. The variable font means they can fine-tune weight for emphasis without changing size.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid, but with micro-steps (1px, 2px, 3.2px, 4px) for hairline spacing.

4.2 Layout

Breakpoints are numerous, almost obsessive — smallest at 270px (tiny devices) scaling through every phone/tablet step to 1360px. This says they’re doing a lot of fine-grain responsive tuning. Likely a highly modular grid in Vuetify.

5. Visual Elements

Border Radius

CBC uses a lot of 8px radius, especially corners for divs, cards, chips. Pills are at 100px radius — definitely “full” style. There’s also micro 3px, 4px for badges.

Values:

• 0px — data table images (square corners)
• 2px — search box minimal rounding
• 3px — small divs
• 4px — badges
• 8px — most containers/cards
• 8px asymmetric — top corners, left corners depending on image placement
• 12px — medium cards
• 24px, 30px — rare large curves
• 100px — pill buttons
• 50% — perfect circles (icons/avatars)

Shadows

Mostly subtle:

• rgba(0, 0, 0, 0.05) 2px 1px 6px 3px — soft, spread shadow.
• Occasional stronger: rgba(0, 0, 0, 0.25) 0px 4px 6px 0px
• Rare offset: rgba(0, 0, 0, 0.05) 0px 8px 6px -6px

Borders

They favor 1px solids in white or light gray for dividers. Statement borders at 3px in brand blues or reds for focus/active.

6. Components

6.1 Buttons

CBC has multiple button types with specific states. Examples:

Toggle Menu Button

• Default: bg white, text red (#e60505), padding 1px 6px, radius 0, no border, opacity 0 (hidden until active)
• Hover: text white, outline #ffbf00 solid 3px, bg #ffd764
• Active: same outline #ffbf00 3px, bg #ffc212
• Focus: text #222, outline #a77f0c solid 2px, bg rgba(60, 60, 60, 0.7), border #4d90fe solid 2px

Icon Button (palette-white)

• Default: transparent bg, text red, radius 100px, border transparent
• Hover: text white, outline yellow, bg #ffd764, border light gray
• Active: bg #ffc212, border #a3a3a3
• Focus: text #222, bg pink (#f9c2e0), border #c2c2c2

Filter Chip

• Default: bg #003a56, text white, radius 8px, border same blue
• Focus: text #222, bg #585858, border #4d90fe solid 2px

Primary Contained Button (palette-blue)

• Default: bg #004c71, text white, padding 8px 16px, radius 100px, no border
• Focus: text #222, bg #af0060, border #4d90fe solid 2px

Black Contained Button

• Default: bg #060606, text #fdfdfd, radius 100px
• Hover: text #585858, outline yellow 2px, bg #ffd764, shadow 0px 1px 2px
• Active: outline red, text #58a4c9, bg #ffc212, shadow 0px 0px 0px 3px red
• Focus: outline #a77f0c, bg #e7e7e7, shadow rgba(59,153,252,0.7) 0px 0px 1px 3px

6.2 Links

• Default: link blue with underline
• Hover: hover blue, remove underline Other variants: black text, white text links, all bold or regular, hover to deep blue.

6.3 Forms

No text input styles extracted — likely handled via Vuetify defaults. Borders usually 1px light gray on inputs, focus border in brand blue.

6.4 Cards

Likely 8px radius, subtle rgba(0,0,0,0.05) shadow, white bg, 16–32px padding.

7. Design Tokens (CSS custom properties)

:root {
  /* Colors */
  --color-link-blue: #0000ee;
  --color-white: #ffffff;
  --color-deep-blue: #0550c8;
  --color-almost-black: #181818;
  --color-medium-blue: #0074ad;
  --color-light-cyan-blue: #58a4c9;
  --color-swiper-blue: #007aff;

  /* Typography */
  --font-family-primary: "Radio Canada", sans-serif;
  --font-size-h1-xl: 40px;
  --font-size-h1-lg: 36px;
  --font-size-h1-md: 32px;
  --font-size-h1-sm: 24px;
  --font-size-body-lg: 20.8px;
  --font-size-body-md: 20px;
  --font-size-body-sm: 16px;
  --font-size-caption-md: 13.6px;
  --font-size-caption-sm: 12px;
  --font-size-caption-xs: 10.01px;
  --font-weight-light: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3-2: 3.2px;
  --space-4: 4px;
  --space-4-8: 4.8px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11-2: 11.2px;
  --space-12: 12px;
  --space-13-6: 13.6px;
  --space-14: 14px;
  --space-16: 16px;
  --space-16-32: 16.32px;
  --space-19-92: 19.92px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-44: 44px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-xxl: 24px;
  --radius-pill: 100px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-soft: rgba(0,0,0,0.05) 2px 1px 6px 3px;
  --shadow-medium: rgba(0,0,0,0.25) 0px 4px 6px 0px;
  --shadow-offset: rgba(0,0,0,0.05) 0px 8px 6px -6px;
}

8. AI Coding Assistant Prompt

# CBC Design System Specification

You are a CBC design expert. Build UIs matching their visual language exactly.

## Brand Context
CBC’s digital UI is functional, content-first, and accessibility-focused. Blue is the interactive color, white is the canvas, typography is unified under “Radio Canada” for all contexts. Spacing is strict to an 8px grid with micro steps.

## Color Palette
- Link Blue: #0000ee — Default links, menu buttons
- White: #ffffff — Background, headers, accessibility links
- Deep Blue: #0550c8 — Hover/focus link states, footer links
- Almost Black: #181818 — Text
- Medium Blue: #0074ad — Accent and secondary surfaces
- Light Cyan-Blue: #58a4c9 — Hover highlights
- Swiper Blue: #007aff — Swiper component accents

## Typography
Font family: "Radio Canada", sans-serif

| Level        | Size   | Weight | Line Height | Use For          |
|--------------|--------|--------|-------------|------------------|
| H1 XL        | 40px   | 800    | 1.30        | Main page title  |
| H1 LG        | 36px   | 700    | 1.30        | Secondary header |
| H1 MD        | 32px   | 700    | 1.30        | Section headers  |
| H1 SM        | 24px   | 700    | 1.30        | Subsection titles|
| Body LG      | 20.8px | 700    | 1.20        | Prominent links  |
| Body MD      | 20px   | 400/600| 1.50/1.30   | Body text        |
| Body SM      | 16px   | 400/700| 1.20/1.30   | UI labels        |
| Caption LG   | 13.6px | 400    | 1.20        | Captions         |
| Caption SM   | 12px   | 400/700| 1.25/null   | Metadata         |
| Caption XS   | 10.01px| 400    | 0.00        | Tiny labels      |

## Spacing & Grid
Base unit: 8px  
Scale: 1, 2, 3.2, 4, 4.8, 5, 8, 10, 11.2, 12, 13.6, 14, 16, 16.32, 19.92, 20, 24, 32, 44px  
Use: Button padding (8–16px), card gaps (16–32px), section spacing (32–44px)

## Border Radius
- none: 0px — square corners on media
- sm: 3px — small divs
- md: 4px — badges
- lg: 8px — cards, chips
- xl: 12px — modals
- xxl: 24px — large callouts
- pill: 100px — pill buttons
- circle: 50% — avatars/icons

## Shadows & Depth
- Soft: rgba(0,0,0,0.05) 2px 1px 6px 3px
- Medium: rgba(0,0,0,0.25) 0px 4px 6px 0px
- Offset: rgba(0,0,0,0.05) 0px 8px 6px -6px

## Components

### Primary Button
```css
.btn-primary {
  background-color: #004c71;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 100px;
  font-family: "Radio Canada", sans-serif;
  font-weight: 600;
  font-size: 20px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover {
  outline: 3px solid #ffbf00;
  background-color: #ffd764;
}
.btn-primary:focus {
  outline: 2px solid #a77f0c;
  border: 2px solid #4d90fe;
  color: #222;
  background-color: #af0060;
}
.btn-primary:active {
  background-color: #ffc212;
}
```

### Secondary Button
```css
.btn-secondary {
  background-color: transparent;
  color: #e60505;
  border: 1px solid transparent;
  padding: 1px 6px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 16px;
}
.btn-secondary:hover {
  color: #ffffff;
  background-color: #ffd764;
  outline: 3px solid #ffbf00;
}
```

### Input Field
```css
.input {
  border: 1px solid #cbcbcb;
  border-radius: 8px;
  padding: 8px;
  font-family: "Radio Canada", sans-serif;
  font-size: 16px;
}
.input:focus {
  border-color: #0550c8;
  outline: none;
}
```

### Card
```css
.card {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: rgba(0,0,0,0.05) 2px 1px 6px 3px;
}
```

## Layout & Responsive Rules
- Breakpoints at: 270, 299, 300, ... up to 1360px
- Mobile padding: 16px
- Desktop padding: 32px
- Grid gap: multiples of 8px

## Interaction Rules
- Transition timing: 150ms ease for hover/active/focus
- Clear focus outlines in brand yellow (#ffbf00) or focus brown (#a77f0c)
- Loading states: maintain color + 50% opacity

## DO List
- Use ONLY colors from palette
- Maintain 8px grid
- Use Radio Canada for all text
- Bold headings for clarity
- Reserve red for brand or critical alerts
- Keep link underlines for default state

## DON'T List
- Don’t mix non-palette colors
- Don’t remove hover color on links
- Don’t apply shadows heavier than medium shadow token
- Don’t mix sharp and pill corners in same element
- Don’t use blue for non-interactive elements unnecessarily

## Code Examples
```css
/* Link Example */
a {
  color: #0000ee;
  text-decoration: underline;
}
a:hover {
  color: #0550c8;
  text-decoration: none;
}

/* Pill Black Button */
.btn-black {
  background-color: #060606;
  color: #fdfdfd;
  border-radius: 100px;
  padding: 8px 16px;
}
.btn-black:hover {
  background-color: #ffd764;
  outline: 2px solid #ffbf00;
}
```

9. Summary

TL;DR CBC’s design system is classic functional web design built for clarity: strict 8px grid, unified typography, interactive blues, background whites, subtle shadows. It’s built for mass use — consistent, predictable, and accessible.

Brand Keywords:

• content-first
• accessibility-driven
• public-service
• heritage-modern
• grid-precision