Reading a balance sheet in the dark

Northbank’s existing app had been designed for a boardroom and was being used in bed. Session analytics showed a hard peak between 22:00 and 00:30, on phones, at low screen brightness — a context nobody had designed for and which made a mid-grey-on-white interface genuinely difficult to read.

We rebuilt the system around that fact.

Contrast as a structural decision

The negative plate is not a theme; it is the primary surface, and the positive one is derived from it. Every token was specified in a perceptual colour space so that contrast ratios hold when the whole system is inverted — which is the part most dark modes get wrong, because they are retrofitted rather than designed as a pair.

Everything clears WCAG AA at minimum, and the numeric type — the only content anyone actually opens the app to read — clears AAA. That constraint removed about a third of the palette we had inherited, which was the point.

Numbers are the interface

A private bank’s app has one job: show someone a number they will believe. We set every figure in a single tabular family at one of four sizes, aligned on the decimal, with no colour carrying meaning on its own. Gains and losses are marked by sign and position rather than by red and green — a decision made for colour-blind users that turned out to read as more sober to everyone.

What made it survivable

The system ships as tokens first: a single source of truth that compiles to iOS, Android, and web, with the documentation generated from the same file. No component exists in Figma that does not exist in code. When the two disagree, the token file wins, and that rule is written into the handover.

Eighteen months on, the team has added forty components without us. That is the only metric we were interested in.