Design system map

The system map

This maps my build against Lloyds' own design systems, layer by layer, from public sources. Lloyds has run two multi-brand systems in a row, so the right column names each claim's source and era. Anything unsourced is 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: one real brand in two token files, web chrome and dark app 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 Mine runs the same contract for one real brand: web chrome, dark app, four journeys.
  • 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 checked token by token, 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.