Design system map

The system map

Our layers (fixed) against theirs, from public traces. LBG has run two multi-brand systems in succession, so the right column names each claim's era and source; unsourced claims are marked inferred.

  • Constellation — web, ~2019–2021. React, "code is the source of truth," a Design Operations team, Sketch. Brands: Lloyds, Halifax, Bank of Scotland, MBNA. 1 3
  • Cancara OS — 2024–25's digital-first rebrand. Figma tokens/variables reflected in code, native and web; named after Lloyds' black-horse mascot. 5
01The mapping
# Ours Theirs (era) Grounded in
1 Brand primitives — one palette, faces, scales, radius rule per skin Multi-brand brand foundations; the Cancara visual identity houses "every element of Lloyds visual identity … in one place" Cancara 5
2 Semantic token contract — brand-agnostic interface every component builds against Design tokens/variables in Figma, reflected in code (Cancara); standardised naming enforced by a "Symbol Swapper" (Constellation) Cancara 5, Constellation 1
3 ★ Client pack — swap one file → full re-skin The multi-brand mechanic: "design customer journeys for 3–4 banking brands in parallel … delivering all design and code assets simultaneously"; the Symbol Swapper "apply[s] layouts across brands with one click"; multi-brand token architecture Grant 2, Constellation 1
4 Component library — brand-agnostic atoms · chrome · patterns Constellation: React components, "code is the system's source of truth" — "Design documentation does not deliver products to customers. Code does." Constellation 1 4
5 Surfaces — portfolio, case studies, prototype journeys Native apps (tokens deployed across 12 mobile banking apps), web, colleague + customer experiences Cancara 5
6 Governance in the files — semantic-only, contract-first, load order, promotion rule A dedicated Design Operations team; WCAG 2.1 AA on every component (with AbilityNet + the Digital Accessibility Centre); weekly clinics, Jira, GitHub; £7M saved over two years Constellation 1 3
02Why this lands for a UX Designer here
  • Row 3 is the pitch. Their teams design one journey for 3–4 brands in parallel, shipping assets together. 2 My contract-plus-pack system does the same at portfolio scale: two journeys, built once, re-skinned live across five brands by swapping one file each.
  • Row 4 is their own standard. Constellation makes code the source of truth. 1 My journeys are the tokens-and-components a developer consumes — I spent a decade receiving handoffs, so my specs survive that end of the loop.
  • Row 6 is where inclusion lives. Lloyds, Halifax and Bank of Scotland were first to reach the 'Advanced' Mental Health Accessible rating, 6 reviewed by an Inclusive Design Panel under Consumer Duty. My money-worries journey matches that standard: low-shame, AA in all five skins, a named human at the end.
03Caveat

Both systems are internal; the right column comes from the six sources below. Constellation and Cancara OS are documented separately, never fused, and I've claimed to work on neither. Anything not sourced is marked inferred.

04Sources
  1. Building Constellation — Geri Reid (Constellation design lead)
  2. Creating a Design System for Banking — Derrick Grant, Medium — verbatim source of the "3–4 banking brands in parallel" line
  3. Delivering a multi-brand, multi-platform design system — Gary Brown — brands, governance, £7M
  4. Lilly Dart — Building a design system for Lloyds Banking (FrontendNE) — "Code does."
  5. Kishan Koriya — Cancara-era native design system — Figma tokens, 12 mobile apps, 2024 rebrand
  6. First UK banks to reach 'Advanced' mental-health accessibility — Money & Mental Health Policy Institute — Catherine Rutter, Group Customer Inclusion Director

Separate, do not conflate: Philipp Hornung — LBG case study (unnamed 2021 iteration) — 50+ components on 5 templates, Sketch→Figma, WCAG 2.1 AA, ~100 journeys.