Design system reference.

Buttons

Primary — Action Blue fill (5.6:1 with white text, AA at any size). Dark — Rhino fill (10.6:1) for contexts where a darker CTA suits. Ghost — heading-colour text, no fill. Never use a CBC Blue fill on button text smaller than 24px — use Action Blue.

Form elements

Presentational reference only — states and layout. Form submission requires a server layer and is explicitly out of scope.

Navigation

Primary nav is documented above. The secondary nav handles within-page or subsidiary-level sections — button elements, no anchor hash links.

Accordion

Use for FAQ, progressive disclosure, or grouped content users may skip. One item open at a time; smooth height animation via CSS grid.

Tabs

Use for mutually exclusive content views within the same surface. Keep labels short — three to five words maximum.

Alerts / callouts

Exercise the four semantic state tokens. Use contextually — not as decoration. Each colour carries a meaning; misusing warning for info erodes trust.

Badges / tags

Status pills for data tables and metadata. The Partner badge (dashed border) signals something outside the CBC colour system — see the three-layer model.

Breadcrumbs

For deep hierarchies only. Omit on flat sites. Non-navigating crumbs use <button> — not href=“#”.

Data table

Spec and comparison tables for subsidiary product pages. Semantic token badges appear in-table for status.

Stat / metric blocks

Key figures for about pages, dashboards, and subsidiary homepages. One stat per block — no decorative embellishment.

Modal / dialog

Use sparingly — for decisions that interrupt flow and require immediate attention. ESC closes; click-outside closes; focus is trapped inside.

Tooltip

CSS-hover tooltip for supplementary labels on icons or abbreviated terms. Keep copy under ten words; hover or focus to reveal.

Pagination

For data tables and long content lists. Active page uses CBC Blue fill; ellipsis separates large page ranges.

Product detail card

The card pattern a subsidiary product page would use — category tag, name, description, spec grid, and primary action.

Cards / containers

The rounded surface primitive. Clickable cards gain a hover border in CBC Blue. Border-radius from --radius-lg.

Site footer pattern

Full subsidiary footer — distinct from the site-wide “Where to ask” block. Four-column structure collapses to two then one on mobile.

Mega menu

Documented pattern for deep subsidiary IA. Keyboard-accessible: Escape closes and returns focus to the trigger; click-outside closes; no aria-hidden over focusable items. See the When Not To Use note below.

Token export

Copy the full token set — colour palette, type scale, and radius scale — in CSS variables, JS/TS, or JSON.

:root {
  /* Colours */
  --cbc-blue: #0D9ADD;
  --action-blue: #0A6E9E;
  --rhino: #284156;
  --surface: #FFFFFF;
  --surface-muted: #F4F5F6;
  --surface-inverse: #284156;
  --border: #D9D9D9;
  --text-secondary: #5C6B7A;
  --text-primary: #2D2D2D;
  --heading: #284156;
  --success: #1E9E5A;
  --warning: #D98E04;
  --error: #C42B2B;
  --text-on-dark: #FFFFFF;
  --success-text: #147843;
  --warning-text: #875200;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
}

Logo reel

A horizontal marquee for partner or trust marks on marketing surfaces — shows breadth without dominating the layout. Scrolls continuously and slowly. The circular Pause / Play control is always present — it is the WCAG 2.2.2 discoverable pause mechanism; hover and focus pausing alone do not cover keyboard-only or touch users. Under prefers-reduced-motion, auto-scroll is suppressed entirely and the marks render as a static wrapped row.

Note: Real partner marks are omitted here for IP reasons. The placeholder shapes below show the layout and behaviour only.

Variant A — decorative with optional “Trusted by” lead-in label

Variant B — actionable — placeholder links (Tab through to see focus behaviour and auto-pause)

Contact launcher

A persistent floating action button (FAB) that opens a compact panel anchored above it. Used on campaign landing pages and product surfaces to surface direct contact channels without crowding the layout. The panel is a launcher — it routes the visitor to an external channel. It is not a chat client and should never present itself as one.

Theming: The FAB accent defaults to --action-blue (CBC base). Subsidiaries may pass their accent via the accent prop — it maps to --cl-accent and is scoped to this component only. WhatsApp green (#25D366) is applied solely to the WhatsApp action icon; it is not a brand token and must never be promoted to one — the same rule as any partner colour.

Accessibility contract: The FAB carries aria-expanded and aria-controls. Opening the panel moves focus to the close button inside it. Focus is trapped within the panel while it is open (Tab cycles through panel elements only). Escape and the close button both dismiss the panel and return focus to the FAB. Click / tap outside closes the panel without moving focus (the user is interacting elsewhere). All channel actions are real <a> links with accessible names.

WhatsApp configuration — placeholder number; tab to the channel link to see focus

Support configuration — WhatsApp + Blu Book support hub