Case study // Halcyon Bank
One design system for 14 regulated product surfaces
Unified retail, business and private banking interfaces into a single token-driven system with built-in compliance copy.
UI delivery
3.1× faster
WCAG 2.2 AA
100%
Stack
Figma Variables · Style Dictionary · React · Storybook · Chromatic
01 — Challenge
Fourteen teams shipped four button libraries, three date pickers and inconsistent risk disclosures, which became a recurring FCA Consumer Duty finding.
02 — Architecture
A three-tier token model (reference, semantic, component) is generated from Figma Variables on every merge.
Regulated copy blocks are versioned alongside components and locked behind legal review.
Visual regression gates run on 1,800 stories across light, dark and high-contrast themes.
03 — Outcome
All 14 surfaces migrated in 9 months. Disclosure findings closed, and new product flows ship in days rather than sprints.
“Compliance stopped being a review step and became a property of the components.”
Dev Raman — Head of Design, Halcyon