The practice

One contract, two layers.

Every screen binds to a token contract (--j-* inside the journeys). Components never touch a raw colour or size, only the contract. Two brand layers sit on top. The Lloyds web brand (bottle green, black-pill buttons, rounded corners) skins this site's chrome. The dark Lloyds app brand (near-black, digital green) skins the four phone journeys inside it. Colour, type and shape are read from the real app and web. Code is the source of truth.

Decisions, not theory.

Beside each screen is a card: the decision, why, the alternative I rejected, and the one thing I'd measure. No screen ships without a reason, and no reason ships without a way to test it. Where I got a first call wrong, the card says so.

Accessibility is built in, not bolted on.

WCAG AA contrast is validated per token, so it holds in every state (default, hover, focus, disabled, error) across both the web chrome and the dark app. Real buttons and links, visible focus, labelled controls, a live region for step changes, and a reduced-motion path throughout. The money-worries journey is designed for distress: plain words, no shame, a named human at the end.

Where the machine helps, and where it doesn't.

AI explores alternatives cheaply and lays out data well; it never makes the call. Every decision on this site is mine. The build ran as a boss-and-workers loop: I specify and review, worker agents build, and independent checker agents run the accessibility, content and facts gates before anything ships. That org chart is disclosed, not hidden.

Built to be read by people and machines.

The same structure that helps a screen reader helps an agent: semantic landmarks, meaningful headings, a decisions file, and a design-token export. One layer, two audiences.