Colour
Two tiers. The brand tier is intentionally small — CBC Blue leads, with Action Blue and Rhino beneath it — so each subsidiary has room for one accent. The system tier is neutral scaffolding that never competes with that accent. Click any swatch to copy its hex.
The system
Standardprefers-color-scheme is honoured before the page renders.Colour works in two tiers. The brand tier is deliberately small: CBC Blue is the primary and always leads, with Action Blue carrying interaction — links, buttons and focus rings, where contrast has to hold — and Rhino carrying contrast and structure. Neither displaces the primary, and Rhino never enters the mark. The system tier is the neutral and semantic scaffolding the shared design system needs: surfaces, borders, text, and state colours that stay quiet so a subsidiary accent can lead.
Brand
DISPLAY ONLY — large headings ≥24px, decorative fills, accent lines. Never small text or interactive fills.
--cbc-blueButtons, links, active states, info text, focus rings. 5.6:1 on white — AA at any size.
--action-blueHeadings, nav chrome, dark-fill CTA (btn-dark), dark band backgrounds. 10.6:1 on white.
--rhinoNeutrals & states
StandardNeutrals
Page background, card surface, modal surface
--surfaceAlternate row, form input background, system preview panels
--surface-mutedDividers, card outlines, input outlines at rest
--borderCaptions, helper text, metadata, navigation at rest
--text-secondaryBody copy, default prose — the workhorse
--text-primarySemantic states
Confirmation states, Do indicators, positive feedback
--successNon-critical alerts, partial contrast badges
--warningValidation errors, Don't indicators, destructive actions
--errorInformational callouts — reuses CBC Blue
--cbc-blueError red is held deliberately distinct from any partner brand colour, so “error” never reads as “brand.”
Usage — where each token is used
The display gate
ConstitutionalCBC Blue (3.1:1 on white) passes WCAG AA only for large text — ≥24px any weight, or ≥18.67px at weight ≥700. Below that gate, use Action Blue (5.6:1). Here is the same white label on both, plus the full size/weight breakdown:
The gate:reserve CBC Blue for display ≥ 24px and decoration. Everything interactive or small uses Action Blue — including subsidiaries on CBC’s palette.
Contrast checker
Pick any two brand tokens to see the live WCAG contrast ratio and pass/fail result.
For the full contrast rules — including the CBC Blue display gate and the AA floors — see Accessibility → Contrast.
Recommended pairings
StandardAccessibility — WCAG contrast
CBC Blue decorative uses (blade geometry, accent lines, lockup mark fill) are exempt — they carry no text. Use Action Blue wherever colour conveys interactive meaning at small sizes.