2026
OngoingAfi Design System — Building design infrastructure for a fintech consultancy
Afi ships white-label fintech products to banks. I'm the only designer. The brief: a system that gets sharper with every client, not slower. We built it — three-tier tokens in Figma, one repo where designers, developers, and AI agents read the same files, an inspector that exposes the token behind every UI element so developers code against the same variables the design uses, and a feedback tool that pins comments to the design instead of losing them in chat. Each rollout teaches the system. AI is how the next one starts where the last one ended.
Role: Design Systems Lead
Contribution: Design systems, Token architecture, Component library, AI tooling, White-label strategy
Playground — try the live componentv1, live with our first banks. Click around to see how the tokens drive every state. The full app is password-protected — email richardgrinerdesigns@gmail.com for a walkthrough.
Santanderactive
BBVA
CaixaBank
Bankinter
White-label at ScaleSwap the tokens, ship the next bank — the components don't change, the brand does.
1
...
2
...
3
...
✓ resolved
Designer Handoff & Feedback ToolPin feedback to the design where the work is, so nothing lives in a chat thread anymore.
Save changes
Token InspectorHover any component on the demo to reveal the tokens behind it — so developers code against the same variables the system enforces.
Button
size
variant
spacing/mdbrand/primary
Component PlaygroundEvery component, every state, with copyable code — so a developer grabs the snippet and ships.
React
A
B
C
HTML→
SCSS→
TS→
Angular
A
B
C
Cross-Stack Animation PortMost animation libraries ship React-only. Claude ports them to Angular against our motion tokens — so the bank stack borrows what used to be off-limits.