Product — Case StudyAG Mortgage Bank
Role : Product Designer & Design Engineer
Platform : Design System · Token Catalogue · Web
AG Mortgage Bank helps Nigerians finance the largest number most of them will ever sign their name under. What began as a website brief shipped as the layer beneath one: a complete design system, tokens, primitives, patterns and living documentation, so every surface the bank builds composes from a single disciplined source. Trust, designed once.
2026
5 weeks
Next.js, Tailwind, TypeScript, Storybook, Figma
AG Mortgage Bank
A mortgage decision is numeric, but nothing in the bank's toolkit treated numbers as the interface.
Mortgages are bought on arithmetic: rates, tenor, equity, repayment splits, yet generic banking UI buries the math under marketing. Every page reinvented how a naira figure or a progress state looks. The gap wasn't a website; it was the system beneath one.
Numbers without primitives
No dedicated components for money, percentages, splits or loan-to-value, every surface hand-rolled its own.
Trust rebuilt per page
Colour, type and voice decided ad hoc, so each touchpoint had to earn institutional credibility from scratch.
No single source of truth
Values lived in files, not tokens, one brand change meant hunting hardcoded hexes across every screen.
The direction is one brand axis: modern-institutional. Saturated navy carries the confidence, cream steps back to an accent, gold is demoted to decorative duty, and the voice is bi-script, a workmanlike sans handing the focus word to a serif, one whole word at a time.
The axis hardened into rules the system enforces, not suggests: four hue families and never a fifth, 24 canonical hexes with everything else an alias, Libre Baskerville over Elms Sans, and tabular numerics wherever money appears.
"A mortgage is the largest number most people will ever sign their name under. The type has to treat it that way."
System before pages. Tokens run in three tiers: ref primitives that never touch UI, a sys semantic layer that flips for dark surfaces, comp compositions that components subscribe to. On top: 27 primitives, MoneyInput to LTVIndicator, documented across a six-chapter design site and a seven-route token catalogue. The calculator and application wizard ship as composition skeletons, proof the primitives assemble.
The shipped surface is the documentation itself: a living design-system site from foundations to motion, every specimen interactive, every value a token reference. Dark surfaces re-bind the same tokens instead of adding colours, and the voice chapter ships copy registers beside the components. The words are as systematised as the swatches.
A bank that can ship any surface without redesigning trust.
A complete, documented design system: token architecture, primitive library, pattern skeletons and a docs site that doubles as the contract between design and engineering. Dark mode is a re-binding, not a repaint. Every future calculator, statement or wizard starts credible by default.
27
Primitives, from MoneyInput to LTVIndicator
24
Canonical hexes, everything else an alias
3
Token tiers: ref, sys, comp
