# Canopymedia.ca Design System

> High-contrast marketing architecture defined by heavy slab-serif headlines, vibrant safety-orange accents, and aggressive organic corner radii.

**Source:** https://canopymedia.ca | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Canopymedia.ca utilizes a high-energy "Safety Orange" (#f78603) as its primary brand driver against a clean white (#ffffff) and black (#000000) foundation. The typography is a distinct pairing of the heavy, industrial ChunkFive-Regular for primary headlines and the versatile Montserrat for all functional and body text. Visual interest is generated through extreme border radii (up to 100px) on surface panels and cards, creating a "pill-container" aesthetic for content blocks. The system relies on heavy shadows (rgba(99, 99, 99, 0.2)) to lift these rounded containers off the canvas, maintaining a clear hierarchical depth.

## Signature DNA
1. **Slab-Serif Impact** (ChunkFive-Regular at 53px is the non-negotiable display signature, providing an editorial yet industrial weight to primary value propositions. Seen on Homepage and About.)
2. **The "Super-Radius"** (Content blocks and buttons use aggressive radii ranging from 50px to 100px, softening the high-contrast color palette. Seen on feature cards and CTA buttons.)
3. **Safety Orange Voltage** (#f78603 is used for every high-intent action and structural accent, creating a singular focal point for the user journey. Seen across all analyzed pages.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary text, footer background, primary button fills | 309 | 1.0 | Computed Style |
| `{color.white}` | `#ffffff` | Page canvas, button text, card surfaces | 44 | 1.0 | Computed Style |
| `{color.gray.muted}` | `#adadad` | Secondary section backgrounds | 4 | 0.6 | Computed Style |
| `{color.gray.light}` | `#dedede` | Tertiary section backgrounds | 3 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#f78603` | Primary CTAs, section borders, active labels | 31 | 0.8 | Computed Style |
| `{color.accent.berry}` | `#cc3366` | Decorative text moments (decorative_only) | 30 | 0.8 | Computed Style |
| `{color.accent.slate}` | `#69727d` | Secondary text, icon strokes | 6 | 0.6 | Computed Style |
| `{color.primary.deep}` | `#db7604` | Hover states for primary orange | 4 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|------------------------|---------|
| ChunkFive-Regular | 400 | Primary Display Headlines | Arvo (Bold) | Open Font License |
| Montserrat | 400, 500, 600, 700, 800 | Body, UI, Sub-headlines | Montserrat (Google Fonts) | Open Font License |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 53px | 68px | normal | 400 | Hero H1 | `h1.elementor-heading-title` |
| `{type.display.md}` | 44px | 52.8px | normal | 800 | Counter numbers | `span.elementor-counter-number` |
| `{type.heading.lg}` | 44px | 52.8px | normal | 700 | Section H2 | `h2.elementor-heading-title` |
| `{type.heading.md}` | 28px | 25px | normal | 600 | Section H3 | `h3.elementor-heading-title` |
| `{type.heading.sm}` | 24px | 28.8px | normal | 800 | Feature titles | `h2.elementor-heading-title` |
| `{type.body.lg}` | 18px | 25.2px | normal | 400 | Primary prose | `p` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Secondary prose | `header.elementor-124` |
| `{type.button}` | 16px | 25.6px | normal | 700 | CTA Labels | `a.elementor-button` |
| `{type.caption}` | 14px | 19.6px | normal | 400 | Small links | `a` |

### Principles
1. **Headline Dominance:** Primary headlines must use ChunkFive-Regular; never use Montserrat for the main page H1.
2. **Weight Contrast:** Use Montserrat 800 for numerical data or sub-headers to provide a modern counter-weight to the slab-serif.
3. **Line Height Breathing:** Maintain generous line-heights (approx 1.5x) for body copy to balance the heavy headline weights.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 4px | 6 |
| `{space.sm}` | 8px | 26 |
| `{space.md}` | 16px | 100+ |
| `{space.lg}` | 24px | 8 |
| `{space.xl}` | 40px | 5 |
| `{space.section}` | 60px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, footer | 320 occurrences |
| `{radius.card}` | 20px | Content cards | Card component |
| `{radius.panel}` | 50px | Primary buttons, outlined surfaces | Rounded Button |
| `{radius.pill}` | 80px | Feature highlight cards | Card component |
| `{radius.max}` | 100px | Large decorative containers | Panel role |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.subtle}` | `rgba(99, 99, 99, 0.2) 0px 2px 8px 0px` | Standard feature cards | Component: Card |
| `{shadow.deep}` | `rgba(100, 100, 111, 0.2) 0px 7px 29px 0px` | Hero-level floating cards | Observed once |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary call-to-action.
**Pages observed:** Homepage, About.
**Spec:** Background `{color.black}` (#000000) / Text `{color.white}` (#ffffff) / Radius 50px / Padding 8px 20px / Typography `{type.caption}` (14px/700).
**States observed:** Default | Hover: Not captured | Active: Not captured.

#### Surface (Outlined)
**Role:** Grouping related content with brand emphasis.
**Pages observed:** Homepage, About.
**Spec:** Background transparent / Border 2px `{color.primary}` (#f78603) / Radius 50px / Padding 10px.
**States observed:** Default.

### Tier 2: Patterns

#### Feature Card (Shadowed)
**Role:** Highlighting specific services or value props.
**Pages observed:** Homepage, About.
**Spec:** Background transparent / Radius 80px / Padding 10px / Shadow `{shadow.subtle}`.
**States observed:** Default.

#### Content Panel (White)
**Role:** Standard content container on dark or gray backgrounds.
**Pages observed:** Homepage, About.
**Spec:** Background `{color.white}` (#ffffff) / Radius 30px / Padding 20px.
**States observed:** Default.

### Tier 3: Surface-specific

#### Brand Bar
**Role:** Top-level navigation and utility access.
**Pages observed:** Homepage, About.
**Spec:** Background `{color.black}` (#000000) / Text `{color.white}` (#ffffff) / Radius 0px / Padding 0px 20px.
**States observed:** Default.

#### Primary Action Surface
**Role:** High-visibility section backgrounds or large CTAs.
**Pages observed:** Homepage.
**Spec:** Background `{color.primary}` (#f78603) / Text `{color.black}` (#000000) / Radius 0px / Padding 0px 20px.
**States observed:** Default.

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1140px |
| Section Gap | 60px |
| Grid | 12-column (Elementor standard) |

## Imagery & decoration
- **Organic Shapes:** Uses large, orange circular/blob motifs behind photography.
- **Grayscale Logos:** Partner/Client logos are presented in a grayscale filter (#adadad) to maintain brand focus.
- **Avoids:** Sharp-cornered cards, thin line-weight icons, and low-contrast text on orange backgrounds.

## Do's
- Use **ChunkFive-Regular** for all H1 headlines.
- Apply a minimum **50px radius** to all primary CTA buttons.
- Use **#f78603** for borders on secondary content containers.
- Ensure all feature cards have the **{shadow.subtle}** applied.
- Maintain a **white background** for any card containing body text.

## Don'ts
- **Wrong:** Using Montserrat for the main page hero headline. **Right:** Use ChunkFive-Regular. **Reason:** Brand recognition depends on the slab-serif weight.
- **Wrong:** Using #cc3366 (Berry) for primary buttons. **Right:** Use #f78603. **Reason:** Berry is a decorative accent, not a functional action color.
- **Wrong:** Applying sharp corners to white content cards. **Right:** Use at least a 20px radius. **Reason:** The brand identity is built on rounded, organic containers.

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #f78603;
  --color-black: #000000;
  --color-white: #ffffff;
  --font-display: 'ChunkFive-Regular', serif;
  --font-body: 'Montserrat', sans-serif;
  --radius-pill: 50px;
  --shadow-subtle: 0px 2px 8px 0px rgba(99, 99, 99, 0.2);
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #f78603;
  --color-black: #000000;
  --font-display: "ChunkFive-Regular";
  --font-body: "Montserrat";
  --radius-pill: 50px;
  --shadow-subtle: 0 2px 8px 0 rgba(99, 99, 99, 0.2);
}
```

## Agent prompt examples
- "Generate a hero section with a ChunkFive-Regular H1 in black, a Montserrat body paragraph, and a 50px rounded button in #f78603."
- "Create a 3-column grid of cards with 80px border radii, white backgrounds, and the standard {shadow.subtle}."
- "Design a contact form using Montserrat for labels and a 2px #f78603 border for the container with a 50px radius."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Mobile-specific typography scaling was not provided in the evidence scale.
- The specific transition timing for button hover states is missing.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://canopymedia.ca | 1440px | 2026-06-06 |
| About | https://canopymedia.ca/about | 1440px | 2026-06-06 |