# CBC EMEA — Brand Context for AI

> Machine-readable brand canon for CBC EMEA.
> Generated at build time from `src/lib/page-copy-content.ts`. Do not edit directly.

This document is the complete CBC EMEA brand specification in structured Markdown.
Intended use: paste into an AI assistant, coding agent, or design tool as system context
to give it accurate, authoritative knowledge of the CBC EMEA brand.

Sections: identity / mark rules · colour tokens & rules · typography · voice & language ·
imagery guidance · accessibility requirements · SEO & meta guidance · component system ·
subsidiary model · logo files · approved patterns · photo library · icon system.

---

# CBC EMEA — The Mark

The logo is a razor blade, chosen to signify cutting-edge technology.
The full lockup pairs the razor "CBC" mark with the "emea" wordmark bottom-right,
baseline-aligned to the mark's bottom edge. The wordmark always matches the mark's fill colour.
This rule applies to subsidiaries that use the razor as their primary mark.

## Rules
- **Clear space**: maintain a minimum clear zone equal to the blade's full height on all four sides. No text, graphic element, or surface edge may enter this zone.
- **Minimum size (digital)**: 24 px tall — the "C,B,C" letterforms must remain legible.
- **Minimum size (print)**: 15 mm. Below minimum size, use the mark alone without the wordmark.
- **Approved colour versions**: CBC Blue, Rhino, white, or single-colour black.
- The "emea" wordmark stays locked in position relative to the mark.
- The typeface inside the mark is custom lettering — never use it as a heading or body face.

## On-light / on-dark
- On light: CBC Blue fill (#0D9ADD)
- On dark (Rhino background #284156): white razor + CBC Blue text

## Do / Don't
**Do**: use approved versions, maintain clear space, use the supplied SVG file.
**Don't**: recolour outside the brand palette, distort or rotate, add effects, recreate from scratch.


---

# CBC EMEA — Colour Tokens

## Core colours
CBC Blue is CBC emea's brand primary and always leads. Action Blue and Rhino are the other brand palette entries — Action Blue for interaction (links, buttons, focus rings), Rhino for contrast and structure (headings, dark surfaces, chrome). Neither displaces the primary, and Rhino never enters the logo or mark. All three sit in the core palette below.

| Name | Hex | CSS var | Use |
|------|-----|---------|-----|
| CBC Blue | #0D9ADD | `--cbc-blue` | **DISPLAY ONLY** — headings ≥ 24 px, decorative fills, accent lines. Never small text or interactive fills. Fails AA at text scale (3.1:1 on white). |
| Action Blue | #0A6E9E | `--action-blue` | Buttons, links, active states, info text, focus rings. 5.6:1 on white — passes AA at any size. |
| Rhino | #284156 | `--rhino` | Headings, nav chrome, dark-fill CTA, dark band backgrounds. 10.6:1 on white (AAA). |

## Neutrals (light mode)
| Name | Hex | CSS var | Use |
|------|-----|---------|-----|
| Surface | #FFFFFF | `--surface` | Page background, card, modal |
| Surface Muted | #F4F5F6 | `--surface-muted` | Alternate rows, form input bg, preview panels |
| Border | #D9D9D9 | `--border` | Dividers, card and input outlines |
| Text Secondary | #5C6B7A | `--text-secondary` | Captions, helper text, metadata, nav at rest |
| Text Primary | #2D2D2D | `--text-primary` | Body copy |
| Heading | #284156 | `--heading` | Heading text (= Rhino in light mode) |

## Semantic colours
| Name | Hex | CSS var | Use |
|------|-----|---------|-----|
| Success | #1E9E5A | `--success` | Confirmation, positive feedback |
| Warning | #D98E04 | `--warning` | Non-critical alerts |
| Error | #C42B2B | `--error` | Validation errors, destructive actions |
| Success text | #147843 | `--success-text` | Success text on light (AA-compliant) |
| Warning text | #875200 | `--warning-text` | Warning text on light (AA-compliant) |

## Dark mode overrides
| CSS var | Dark value |
|---------|------------|
| `--action-blue` | #1FA4D4 |
| `--surface` | #192838 |
| `--surface-muted` | #1D3046 |
| `--surface-inverse` | #0C1A27 |
| `--border` | #2A4560 |
| `--text-secondary` | #7DAFC9 |
| `--text-primary` | #D6E7F2 |
| `--heading` | #8FBDD6 |
| `--error` | #F56B6B |
| `--success-text` | #52C278 |
| `--warning-text` | #F0A500 |

## The CBC Blue display gate (critical rule)
- CBC Blue (#0D9ADD) on white = 3.1:1 — **fails WCAG AA for normal text**.
- Use Action Blue (#0A6E9E, 5.6:1) for any interactive element, link, or small mark.
- Reserve CBC Blue strictly for: large display headings (≥ 24 px), the eyebrow bar, decorative fills, pattern line token, accent lines.
- This gate applies everywhere — including subsidiaries using CBC's palette.

## Recommended pairings (WCAG)
| Foreground | Background | Ratio | Grade | Note |
|-----------|-----------|-------|-------|------|
| White | Rhino #284156 | 10.6:1 | AAA | Dark band, headers on dark |
| Text Primary #2D2D2D | White | 13.8:1 | AAA | Body copy on white |
| White | CBC Blue #0D9ADD | 3.1:1 | UI only | Button label / large UI — never body text |


---

# CBC EMEA — Typography

## Typefaces
- **Display / UI**: Poppins (`--font-display`) — headings, eyebrows, labels, button text, nav items.
- **Body**: Montserrat (`--font-body`) — all prose, captions, body UI copy, form labels.
- **Mono**: ui-monospace, SF Mono, Menlo, Consolas (`--mono`) — code, tokens, metadata labels.

## Type scale
| Role | Font | Weight | Size | Line-height | CSS class |
|------|------|--------|------|-------------|-----------|
| Display / H1 | Poppins | 700 | 40 px | 48 px | `t-d1` |
| Heading / H2 | Poppins | 600 | 30 px | 38 px | `t-h2` |
| Subheading / H3 | Poppins | 600 | 22 px | 30 px | `t-h3` |
| Body | Montserrat | 400 | 16 px | 26 px | `t-body` |
| Small / Caption | Montserrat | 400 | 14 px | 22 px | `t-small` |

## Pairing rationale
Poppins (geometric, Rhino-coloured) carries the brand voice in display contexts.
Montserrat (humanist, readable) handles prose without competing.
The split is structural: Poppins = brand; Montserrat = communication.

**Rules**:
- Never use Poppins for body prose.
- Never use Montserrat for primary display headings.
- Heading colour (`--heading`) is Rhino in light mode, adapts in dark mode.
- All text sized in `rem` — never override the html font-size in px (breaks user accessibility preferences).


---

# CBC EMEA — Voice & Language

## Character (we are / not)
| We are | Not |
|--------|-----|
| Grounded | hype |
| Confident | boastful |
| Plain | jargon-heavy |
| Local | parochial |
| Precise | vague |
| Direct | hedged |
| Informative | sales-y |
| Restrained | effusive |

**One-line**: Authoritative, but not stiff. Insight-led, not feature-led.
"We vouch for this" — not "this is incredible."

## Style mechanics
- **British English**: colour, centre, organise.
- **Dates**: 31 May 2026 (day month year, no commas).
- **Serial comma**: use the Oxford comma.
- **Numerals**: spell out one to nine; figures for 10 and above.
- **Avoid**: superlatives, exclamation marks, marketing-about-marketing.
- **Abbreviations**: spell out on first use, abbreviate thereafter.

## Worked examples
**Before**: "We are incredibly excited to announce our amazing new cutting-edge solution that will transform the way Nigerian businesses operate forever!"
**After**: "CBC Infrastructure has launched an on-premises edge compute platform for Nigerian enterprises. It ships pre-configured and is maintained by our team."
**Why**: Remove superlatives. State the fact, name the product, say what it does.

**Before**: "Leveraging best-in-class synergies across our vertically integrated portfolio of next-generation solutions…"
**After**: "Six subsidiaries — surveillance, communications, energy, property, infrastructure, and software — under one operational umbrella."
**Why**: Plain structure over abstract management-speak.

**Before**: "Please don't hesitate to reach out if you have any questions or concerns whatsoever!"
**After**: "Brand questions and asset requests go to the Marketing Team. When in doubt, ask before you ship."
**Why**: Active, specific, no exclamation marks.


---

# CBC EMEA — Imagery

## The principle
The only test for any image is whether it is **high quality** and **relevant to the message**.
Origin (stock vs. owned photography) is not the criterion.
Stock photography is permitted at master-brand level. Provenance is not the filter.

## Scope
- The master-brand rule (stock permitted; quality and relevance required) is the baseline for all CBC work.
- Specific campaigns or subsidiaries may apply a stricter provenance rule — that rule belongs to the campaign/subsidiary and does not flow back to the master brand.
- Photography style (subject, mood, treatment) is a permitted variable within subsidiaries.

## Selection criteria (all four must be satisfied)
1. **Relevance** — directly supports the message. Decorative fill with no connection to the message is a relevance failure regardless of quality.
2. **Quality** — resolution, composition, and lighting fit the format (screen, print, out-of-home). Technically deficient images undermine the brand.
3. **Credibility** — accurately represents the subject, context, and outcome.
4. **Local resonance** — where context matters, reflects the Nigerian market. CBC EMEA operates primarily in Nigeria; "EMEA" names the brand, not a geographic territory.

## Do / Don't
**Do**: relevant, high quality, credible, locally resonant where the message calls for it.
**Don't**: irrelevant (decoration), low quality, misleading, generic cliché that erases local context.

## Alt text rules
- **Informative image**: describe what it contributes to the page, not the file name or composition.
- **Decorative image**: `alt=""` and `aria-hidden="true"` — screen readers skip it.
- **Redundant**: if surrounding copy fully describes the image, a brief or empty alt is acceptable.


---

# CBC EMEA — Accessibility

## Standard
WCAG 2.1 Level AA applies to every digital surface carrying the CBC brand.
Four principles (non-negotiable): **perceivable**, **operable**, **understandable**, **robust**.
When a design decision conflicts with the standard, the design moves — not the standard.

## Contrast
- Normal text: **4.5:1** minimum contrast ratio against background.
- Large text (≥ 18 px any weight, or ≥ 14 pt bold), UI components, focus indicators: **3:1** minimum.
- CBC Blue (#0D9ADD) on white = 3.1:1 — clears the large-text gate but **fails normal text**. Display-only.
- Action Blue (#0A6E9E) on white = 5.6:1 — passes AA at any size. Use for interactive and small text.

## Text & zoom
- All text sized in `rem` — browser zoom and system font-size preferences adjust proportionally.
- WCAG 1.4.4: text must be resizable to 200% without loss of content or function.
- Never set `font-size` on the `html` element in px — this overrides user preferences.
- Let containers expand to accommodate enlarged text; do not clip or use `overflow: hidden` on text containers.

## Respect the platform
- Honour `prefers-reduced-motion`: wrap all transitions and animations behind this media query.
- **Colour scheme is scoped by surface, not universal.** `prefers-color-scheme` is never a default. It is read only when a visitor has explicitly chosen to follow their system.
- **Marketing surfaces** — the corporate site, the subsidiary microsites, campaign properties — default to light and offer an opt-in Light / Dark / System control. First contact with the brand should be the brand's own light identity rather than whatever the operating system happened to be set to. Once the choice is the visitor's, honour it and persist it.
- **Reference and tool surfaces** — this brand site, internal tooling — honour the system preference. Someone using a reference tool during a working day is not meeting the brand for the first time, and matching the rest of their desktop is the courtesy there.
- Dark tokens are ready on every property either way, and `[data-theme="dark"]` is the single dark trigger. A surface that defaults to light carries no `prefers-color-scheme` media query at all — one added later silently reintroduces auto-switching, and only for visitors whose OS is set to dark.
- A surface designed with one permanently dark palette and no light variant is a design choice, not a colour-scheme decision — the rule above governs whether the OS preference drives switching, and a surface with nothing to switch between sits outside it.
- Do not suppress OS-level focus indicators — the global focus ring (2 px Action Blue outline) applies to all interactive elements.

## Keyboard & focus
- Every interactive element is reachable and operable by keyboard alone (Tab, Enter, Space, arrow keys where applicable).
- Focus order follows DOM order — never use `tabindex > 0` to reorder focus.
- Focus ring: 2 px solid Action Blue (`--action-blue`), 2 px offset. Always visible — never suppress with `outline: none` without a replacement.
- Modal and drawer: focus is trapped inside while open; ESC closes and returns focus to the trigger.

## Semantic structure & naming
- Use semantic HTML: `<nav>`, `<main>`, `<aside>`, `<header>`, `<footer>`, `<section>`, `<article>`.
- Heading hierarchy is meaningful: one `<h1>` per page, `<h2>`/`<h3>` as logical sub-levels — never for visual sizing alone.
- Meaningful icons need an accessible name (`aria-label` or `role="img"` with `aria-label`). Decorative icons: `aria-hidden="true"`.
- Icon-only interactive controls are never acceptable without an accessible label.
- `aria-live="polite"` for dynamic updates (copy confirmations, status messages); `aria-live="assertive"` only for urgent alerts.

## Anti-patterns to avoid
1. Low-contrast placeholder text styled as body copy.
2. Click handlers on non-interactive elements (`div`, `span`) with no keyboard equivalent.
3. Fixed pixel font sizes that resist zoom.


---

# CBC EMEA — SEO & Meta Guidance

## Scope & boundary
This page governs page-level meta for CBC's public properties: title tags, meta descriptions,
Open Graph and Twitter/X social cards, structured data, and per-page robots and canonical
tag mechanics.

It does NOT govern URL architecture, subdomain and standalone-site strategy, cross-property
canonical strategy, or domain-level SEO consolidation. Those decisions belong to the
**Digital Architecture Standards**, which is the governing authority. This page defers to it in full.

## Title tags

### Recommended CBC pattern (proposed — for review)
- Main site interior: `{Page title} | CBC emea`
- Subsidiary microsite interior: `{Page title} | {Subsidiary name} — CBC emea`
- Main site home: `CBC emea — Technology infrastructure and services`

### Rules
- **Length**: 50–60 characters. Google truncates beyond ~60 characters.
- **Uniqueness**: every published page needs a distinct title.
- The unique, page-specific content leads; brand name trails on interior pages.
- Do not front-load the brand name on interior pages.
- Do not stuff keywords — Google rewrites over-optimised titles.

## Meta descriptions

### Rules
- **Purpose**: SERP snippet text (not a direct ranking signal; affects CTR).
- **Length**: 120–155 characters. Mobile truncates earlier — targeting 120–130 is safest.
- **Uniqueness**: every indexed page should have a distinct description.
- **When to omit**: noindex pages do not need a description. On long-form articles with clear
  opening sentences, omitting and letting Google extract is acceptable.
- Do not copy the title tag verbatim. Do not use quotation marks. Do not include the brand name
  unless it is genuinely part of the message.

## Social cards (Open Graph + Twitter/X)

### Recommended tag set (proposed — for review)
Open Graph: og:type, og:url, og:title, og:description, og:image (1200×630),
og:image:width, og:image:height, og:site_name.
Twitter/X: twitter:card="summary_large_image", twitter:title, twitter:description, twitter:image.

Use og:type="article" for Insights posts and case studies.
The og:url must match the canonical URL — defer to the Digital Architecture Standards.

### Share image specification
- Canvas: 1200 × 630 px (1.91:1 ratio)
- Safe area: 1080 × 567 px centred (60 px from each edge)
- Format: JPG preferred
- The share image is a brand surface — visual treatment defers to the Imagery page.
- Text in the image: min 24 px, sufficient contrast on the image background.

## Structured data (schema.org / JSON-LD)

### Types by page kind
- WebSite: home page of any CBC property
- Organization: home page or About page (one per property)
- Article: Insights, case studies, news posts
- Product / Service: product or service pages
- BreadcrumbList: any page deeper than the root

### Organization schema — CBC emea (proposed — for review)
Use JSON-LD in a <script type="application/ld+json"> tag.
Required fields: @context, @type, name ("CBC emea"), url, logo, description, address.addressCountry ("NG").
Validate with schema.org/validator and Google's Rich Results Test before deploying.

## Page-level robots & canonical tags

### Robots meta tag
- Default public page: no robots tag needed (index, follow is the browser default).
- Explicitly noindex: `<meta name="robots" content="noindex, nofollow">`
- Apply noindex to: staging, internal tools, search result pages, thin or duplicate content.
- Do not use robots.txt to block indexing — it disallows crawling but not indexing.

### Canonical tag
- Add a self-referencing canonical to every indexed page:
  `<link rel="canonical" href="https://example.com/page/">`
- The URL must match the Digital Architecture Standards' designated canonical.
- For cross-property canonical decisions, see the Digital Architecture Standards.

## This reference site's own stance
This brand reference site is an intentional noindex deployment:
- robots: noindex, nofollow — internal tool, not a public property.
- meta description: omitted — no SERP snippet will ever be generated.
- canonical: self-referencing per page — good practice even on noindex pages.

When a property graduates from internal tool to public site: remove the noindex directive,
add a description, keep the canonical. A one-line change.

## Cross-references
- Accessibility (semantic structure aids SEO): /accessibility#structure
- Imagery (share image visual treatment): /imagery
- Digital Architecture Standards: governs canonical/domain strategy — the governing authority.
- Marketing Team: SEO audits, title-tag review, structured data QA.


---

# CBC EMEA — Component System

The component system is the curated set of UI primitives built on the brand token layer.
All components adapt to light and dark themes via CSS custom properties.

## Component inventory
- **Buttons**: Primary (CBC Blue / Action Blue fill), Secondary (outlined), Destructive, Icon button
- **Forms**: Text input, Textarea, Select, Checkbox, Radio — all sized in rem, 44 px minimum touch target
- **Alerts**: Info, Success, Warning, Error — semantic colour tokens, dismissible
- **Navigation**: Top bar (docs chrome), Sidebar (reference nav), Mega menu (marketing surface)
- **Data table**: Sortable columns, alternating row fill (`--surface-muted`), responsive
- **Modal / Dialog**: Focus-trapped, ESC to close, backdrop, accessible label
- **Token export**: Live CSS custom property export for handoff
- **Logo reel**: Animated subsidiary mark strip

Note: Token export and the theme toggle are reference-surface tools, not defaults for public properties.

## Token layer
All components consume CSS custom properties from the token set.
Colour tokens: `--cbc-blue`, `--action-blue`, `--rhino`, `--surface`, `--surface-muted`, `--border`, `--text-primary`, `--text-secondary`, `--heading`.
Dark mode: `[data-theme="dark"]` attribute on `<html>` overrides the relevant tokens.

## Accessibility baseline
Every component meets WCAG 2.1 AA: keyboard-operable, focus-visible, 4.5:1 text contrast, semantic HTML.


---

# CBC EMEA — Subsidiary Expression

## Model
Subsidiaries share one structural envelope (governed by the Digital Architecture Standards)
and fill a small set of permitted colour variables. Identity stacks in three layers:

### Layer 1 — CBC base (always on)
Owns the chrome: nav, footer, layout, system states.
Colours: CBC Blue (#0D9ADD), Rhino (#284156).
Never overridden by a subsidiary or partner.

### Layer 2 — Subsidiary accent
The subsidiary's own colour. Defaults to CBC Blue until the subsidiary defines its own —
an undifferentiated subsidiary reads as pure CBC EMEA.
Scope: content areas and subsidiary-specific UI surfaces.
A subsidiary's accent is expressed as a PAIR: a display accent and an AA-safe interactive accent, defaulting to the CBC pair (CBC Blue / Action Blue). The display gate applies to subsidiary accents too — never use a display-only accent on small or interactive elements; the interactive accent carries those.

### Layer 3 — Partner brand (scoped)
Belongs to the partner. Scoped to that partner's own surfaces only.
Never appears outside the partner's scoped surface.
Multiple partners = multiple scoped surfaces, one rule each.
Partner colours are not centralised in this system.

## Rules
- Layer 1 is immutable — subsidiaries cannot override nav, footer, or system state colours.
- A subsidiary without its own accent colour is a valid state — it just reads as CBC EMEA.
- The three-layer model applies to colour only; typography and layout follow the master-brand standards.
- Photography style is a permitted variable within subsidiaries (subject, mood, treatment).
- Co-branded lockups use the multiplication sign × naming the subsidiary that owns the partnership, e.g. "CBC Surveillance × Holowits" — never "CBC × Holowits".


---

# CBC EMEA — Logo Files

## Approved files
| File | Format | Size | Use |
|------|--------|------|-----|
| cbc-logo.svg | SVG | master | Primary format for all production work — digital and print. |
| cbc-logo-dark.svg | SVG | — | White razor + CBC Blue text. For dark backgrounds (Rhino, deep navy, black). |
| cbc-logo-dark-bg-512.png | PNG | 512 px | Dark variant on Rhino background — for contexts where transparent PNG is impractical. |
| cbc-logo-256.png | PNG | 256 px | Small digital: email signatures, thumbnails. |
| cbc-logo-512.png | PNG | 512 px | Standard digital: web headers, social media assets. |
| cbc-logo-1024.png | PNG | 1024 px | High-res digital: large-format screen display. |

## Rules
- The SVG is the master — derive everything else from it.
- Always use the supplied file. Never recreate or retype the lockup.
- **Clear space**: minimum clear zone equal to the blade's full height on all four sides.
- **Minimum size**: 24 px tall (digital), 15 mm (print). Below minimum, use the mark without wordmark.
- Do not recolour outside the supplied file variants.
- A monochrome lockup is a pending brand decision — not available yet.

## Do / Don't
**Do**: use SVG for all screen work, maintain clear space, use dark variant on dark surfaces.
**Don't**: use low-resolution PNGs where SVG is supported, place on clashing backgrounds, scale below minimum.


---

# CBC EMEA — Approved Patterns

Five geometric, token-driven backgrounds for surfaces that need character without decoration.

## Restraint principle
A brand pattern is background texture — present enough to give a surface character,
invisible enough that no one can name it. All five are geometric and quiet; they signal a
technology company without being playful or obnoxious.
Each uses a single token-driven colour at very low opacity so they adapt to light and dark
themes and accept a subsidiary accent with one CSS variable change.

## Colour token
```css
--pattern-line: rgba(40, 65, 86, 0.07);   /* light: Rhino @ 7% */
--pattern-line: rgba(255, 255, 255, 0.08); /* dark: white @ 8% */
```

## The five patterns
| Name | SVG approach | Where it suits |
|------|-------------|----------------|
| Fine line grid | Horizontal + vertical lines every 20 px, 0.75 px stroke | Document layouts, data-dense interfaces — quiet alignment cue |
| Dot grid | 1 px dots at 20 px intervals | Presentation backgrounds, hero sections — softer than a line grid |
| Fine diagonal hatch | 45° lines every 12 px, 0.75 px stroke | Feature banners, print collateral — adds directionality without weight |
| Subtle isometric grid | Three directions at 60° intervals (0°, +60°, −60°), tile 20 × 34.64 px | Technology content, infographic panels — signals precision and depth |
| Razor-blade motif | Thin angular parallelogram tiled at a stagger — derived from the CBC mark | Brand hero areas only — the wildcard; use selectively |

## Usage rules
- Patterns are background texture only — content must be fully legible over them.
- The razor-motif is the only pattern derived from the CBC mark — use it in brand hero areas only.
- All patterns use `stroke="currentColor"` logic via `--pattern-line` — do not hardcode colours.


---

# CBC EMEA — Photo Library

The master library of photography available to all CBC EMEA subsidiaries, organised by category.
Images shown on this page are **interim placeholders** pending real CBC photography.
Subsidiary-specific imagery stays with the subsidiary; everything here is cross-subsidiary.
Download links will appear once real photography replaces the placeholders.

For selection and usage principles, see the Imagery page.

## Categories
| Category | What it holds | Where it's used |
|----------|---------------|-----------------|
| People & teams at work | Staff, collaboration, and service moments | Cross-subsidiary editorial content and internal communications |
| Technology in situ | Hardware, infrastructure, and active deployments | Product and sector-specific materials |
| Lagos & built environment | Cityscape, architecture, and urban context | Content grounded in the Nigerian market |
| Abstract tech textures | Macro and abstract imagery | Background fills for digital campaigns and presentation decks |
| Sector environments | Energy, finance, and logistics settings | Sector-specific campaigns |
| Leadership & portraits | Executive headshots and professional portraits | Press releases, about pages, thought-leadership content |


---

# CBC EMEA — Icon System

## Standard
CBC standardises on **Lucide** (MIT licence, ~1,500 icons, consistent 24 px grid, 2 px stroke).
One set everywhere — devs via `lucide-react`, designers via the curated SVG downloads.
Do not mix Lucide with icons from other libraries (HeroIcons, FontAwesome, etc.).

## Developer path
```bash
npm i lucide-react
```
```ts
import { Search, Menu, X } from 'lucide-react'
```

## Curated download set (28 icons)
Menu, Search, Close (X), Chevron up/down/left/right, Arrow left/right,
Check, User, Settings, Mail, Phone, Download, External link, Plus, Pencil,
Trash, Info, Warning (TriangleAlert), Bell, Eye, Lock, Log out, Copy, Calendar, Filter (Funnel).

All files in `/public/assets/icons/` use `stroke="currentColor"` — colour is set by the parent element.

## Usage & styling
### Size scale
| Size | Use |
|------|-----|
| 16 px | Inline text, table cells, tight UI |
| 20 px | Form labels, nav items, secondary actions |
| 24 px | Default — buttons, primary actions |
| 32 px | Feature callouts, empty states |

### Colour
- **Interactive icons**: `--action-blue` (not CBC Blue — CBC Blue fails contrast at small sizes).
- **Decorative / secondary**: `--text-secondary`.
- **Emphasis**: `--heading` (= Rhino in light mode).
- **Never**: `--cbc-blue` on small interactive marks — #0D9ADD is 2.6:1 on white (WCAG fail).

### Stroke
- Always 2 px stroke weight — Lucide's default. Never change stroke width.
- Minimum icon size: 16 px (below this, details become ambiguous).
- Leave at least 4 px gap between icon and adjacent label text.

## Accessibility
- **Meaningful icons** (communicate information): `aria-label="…"` on the element, or `<span role="img" aria-label="…">`.
- **Decorative icons** (adjacent text already describes the action): `aria-hidden="true"`.
- **Icon-only controls**: never ship without an accessible label (visible text, `aria-label`, or `aria-labelledby`).
- Focus ring: 2 px Action Blue outline, inherited from global styles.

## Bespoke icons (to-draw list — none exist yet)
Bespoke icons are drawn only to fill genuine gaps Lucide cannot cover.
Must match Lucide spec: 24×24 px grid, 2 px stroke, round linecap/linejoin, `stroke="currentColor"`.

Queued items:
1. Razor / cutting-edge mark — brand hero contexts, no Lucide equivalent.
2. Energy / power sector — CBC energy vertical; Lucide bolt reads "speed" not "infrastructure".
3. Fintech / transaction — sector-specific transfer glyph.
4. CBC monogram icon — compact lettermark for favicon-scale and icon grids.

Rule: if Lucide has it, use Lucide. Never redraw common icons.