Design systems for finance

I'm John Harrison. I take on design systems for finance and get them into shape, so the team can run them without me.

Most design-system work falls apart at handover. I work the other way: audit the inherited system, simplify it, then transfer ownership to the team that has to live with it.

Over the last decade I've mostly inherited design systems rather than started them. Almost none were failing because of the technology. They were failing because the people who understood them had moved on, and nothing was written down for the people who stayed. These days what's written down has a second reader too: the AI assistants the team works alongside. Done well, one clear account serves both.

Method

Three months, three phases.

Developed at Lantern, reused since. The same shape every time, because the failure mode is the same every time.

  1. Understand and diagnose

    Month one. Interviews, a usage audit, and an honest account of what's actually used. No prescriptions before the diagnosis.

  2. Simplify and streamline

    Month two. Fix the core components first, merge the redundant ones, and write documentation people will actually read.

  3. Empower and embed

    Month three. Workshops, templates, a maintenance doc and a roadmap. The team runs the system after I've gone, which is the point.

Read the full framework

Recent contracts. Most are still in use. Each row expands.

  • UBS ongoing 2025 to now Design system, template architecture, via ELSE
    Challenge
    A dashboard product where every page was being laid out from scratch, so layout decisions kept getting remade page by page.
    Outcome
    Four template types that cover effectively every page in the product, with a spec for type, spacing, page regions and accessibility. The guidance is restructured into three layers, with generated facts kept apart from hand-written rules, so engineers and AI assistants work from one shared contract.
    Duration
    September 2025 to now, ongoing.
  • Lantern 2025 Lux 4.0, audit and handover
    Challenge
    Lux 3.0 had bloated components, inconsistent naming, missing documentation and accessibility gaps. Nobody was sure what was actually used.
    Outcome
    A two-tier token architecture, a Figma to Tailwind to Zeroheight pipeline, and a handover with a roadmap and a maintenance doc, with AI integrated into the workflow from the start. The three-month framework on this page comes from this engagement.
    Duration
    May to September 2025, five months.
  • Bupa Global 2024 to 25 Design system and website, via Digitas
    Challenge
    Bupa Global needed its own brand inside a design system shared across several Bupa entities.
    Outcome
    A namespaced token architecture, so Bupa Global colours coexist with the shared primitives without polluting the other entities.
    Duration
    July 2024 to May 2025.
  • Greystar 2024 to 25 Design system and website, via Digitas
    Challenge
    A design system and website for a global residential platform, with the language needing as much work as the components.
    Outcome
    System and feature work, including the fee calculator, with the words given the same attention as the visuals.
    Duration
    July 2024 to May 2025.
  • T. Rowe Price 2020 to 24 Design system across three contracts, via ELSE
    Challenge
    An enterprise design system for a US investment firm, with designers and developers split across US and UK timezones.
    Outcome
    The system ran for four years across three contracts because the team could carry it themselves. Tokens and fourteen-plus component skills in the lead phase.
    Duration
    2020 to 2024, three contracts.
  • EON 2020 App design system, via Digitas
    Challenge
    An app design system needed quickly, covering billing and support flows.
    Outcome
    The flows shipped with the guidelines to keep them consistent, and the engagement led to the later Digitas work.
    Duration
    August to October 2020.

Published

One idea, written down. It runs this page.

Directional spacing tokens

Spacing that encodes intent, not just values. Six concepts instead of a flat scale; the token tells you whether it's padding or margin and which axis it works on. This page is built with them: press i and hover anything.

TokenDirectionInternal / externalUse
inset all internal card padding on all sides
insetBlock vertical internal vertical content spacing in modals
insetInline horizontal internal left and right padding in buttons
inline horizontal external gaps between horizontally placed buttons
block vertical external margin between stacked components
stack all external gaps between list items or form fields

Read the full taxonomy

The rest of the published writing sits under The thinking on the work page.