Skip to content
Selected work

Lloyds Banking Group · Cancara Design System

Cancara: one system across eight brands and four platforms

Challenge and role

The challenge

Eight brands need distinct identities from one design language, without eight separate sets of accessibility bugs.

The responsibility

I work hands-on across the web foundations and the automation around them, and set technical direction with the platform teams.

Decisions

  1. 01

    Connect semantic tokens, assets and change contracts across all four platforms.

  2. 02

    Make accessibility, docs and testing part of the component contract.

  3. 03

    Automate the recurring manual work, and read adoption from the code rather than asking teams.

  4. 04

    Move styling from styled-components to vanilla-extract for zero-runtime, type-safe CSS, without breaking downstream teams.

Outcomes

  • Cut a multi-month manual rebrand to about half a day

    Against the previous manual rebrand path.

  • Saved an estimated 500 developer hours a year

    Covers component, theme and rebrand validation.

  • Measured real component adoption across 800+ repositories

    AST parsing of the code joined to Figma data, replacing manual monthly reporting.