Designing for humans. Structuring for machines.

Clayfin wasn’t short of screens. It was short of a system.

The architectural problem was in the brief itself: one product has to ship as many different banks.

That sounds like theming. It isn’t. You decide it once, early, or you pay for it forever — because if brand lives inside the components, every new bank is a redesign. If brand lives beneath the tokens, a new bank is a configuration.

1. 01

   Primitives first. Then a semantic layer named for what things do. Then a brand layer that slots underneath, so semantic names never change — only what they point to.!

2. 02

   The client gets a constrained set of brand colour options, not a colour picker. Left to a picker, someone eventually chooses a yellow that makes their own text invisible. Every resulting combination checked against WCAG contrast — every permutation, not just the default.!

3. 03

   The work led Clayfin to introduce us to a second bank, in another market, where we’re now building their design system too.!

A design system built from scratch, structured so a new bank is a configuration rather than a redesign. Then implementation with our developers, and design QA against the built product on native and web. Design QA against a real build finds things a Figma file never will.

Two things.

The file went through Patronus, an AI evaluator that scores Figma structure rather than looks. It passed — design system, components, overall. The only kind of grade worth quoting is one you didn’t award yourself.

UX was shared across three designers. The Patronus rubric was the client’s. I didn’t own research.