Afi Visual Identity — Turning a brief into an identity
Afi's Wealth Planner runs white-label for Spanish banks. Its 2026 redesign arrived as a one-line brief: make it look more modern. The product was built from static Figma screens, developers worked screen by screen, and nobody shared a definition of the word. I'm leading the work with Miguel, a freelance designer working with us part-time. We wrote the definition first, then turned it into a token vocabulary, a typeface and a component library for the live product.
Role: Brand & Visual Identity Lead
Contribution: Brand strategy, Persona definition, Design principles, Typography & tokens, Micro-interaction design, Component library
The brief was one line: make it look more modern. My boss liked what the demo did and called how it looked dated, so interactivity was never the blocker. In one review the word meant a new typeface; in the next, more color or more motion. Wealth Planner was built from static Figma screens, so every reading of it could enter the product on its own.
Wrote the definition as things you can see on a screen: easy to scan, detail on demand, feedback that makes a change obvious, and a visual system that stays quiet around the numbers.
Now a review tests a choice instead of preferring one. A dashboard where every value competes fails the scan test, however current the styling. Color that decorates a card has a weaker case than color marking a negative number.
A wide reference set gives you plenty to react to and no direction. Worse, almost everything we liked was SaaS: a handful of common actions a whole team has scoped down. Wealth Planner accumulates options because it gets built to whatever a client needed that day.
Miguel noticed we kept going back to the same six: Wise, Cursor, Shopify, Clerk, Notion and Granola. We took the repetition as the signal.
Wise was the only one from our domain and it settled color: a financial interface can stay mostly black and white and spend color on the data. The other five kept showing the same three things, which were clear hierarchy, restrained surfaces, and small interactions that explain state.
A definition of modern tells you how the product should feel. It does not tell you whether editing opens a page or a drawer, or whether two controls that look alike can mean different things.
Nine principles, each with a direction and the thing to avoid: essential information first, detail on demand, and context kept with drawers, inline editing and expandable cards.
The ones that earn their place are about roles. An add-on tag and a beta tag describe what you are looking at; a pro tag is selling you something, so it cannot look the same. Page navigation is tabs, mutually exclusive options are a segmented control. That last rule fixed what we kept hitting: one component appearing twice on a page meaning two things.
Screen-by-screen design leaves the foundations open. A color gets picked for one screen with nobody naming the job it does elsewhere. Typography is worse in a financial product: when 0000 and 4444 take up different widths, columns stop lining up.
Named tokens by role first, background canvas and background elevated, and assigned values after. Compared Space Grotesk, Fira Sans, Geist and IBM Plex Sans on the same number patterns. Corner radius caps at 6px.
A screen asks for a canvas, not a hex value, so the value can change without renaming anything. IBM Plex Sans won because its default figures held those patterns in line. The test did not turn on tabular numerals, so the claim stops there. Shadows and dimensions are the next two passes.
Not a screenshot: these are the live components, running on the same tokens that style this article. Hover them.
Foundations do not give you an interface. Wealth Planner still needed buttons, inputs, tables and dialogs whose states behave the same everywhere, and building those inside each screen reopens every decision that just closed.
Split the primitives. I took chip, badge, card and table; Miguel took tag, dialog, navbar and tabs. Buttons, inputs, checkboxes and toggles we built together first. Everything is compact by default, which is a preference and not a finding.
The card treatment is the one worth naming. Shopify nests a card inside a card, and moving the nested panel to the top gives it the double-layer depth a wallet has. Details like that carry more weight here, because underneath them the product is tables and graphs.
Every state change explained by motion: the checkbox draw, the radio fill, the toggle flip, and a send flow that walks through send, sending, sent.
A component at rest does not tell you what happens when someone acts on it. Decide that inside each feature and the timing drifts even when the colors match. It matters more now: a generated interface arrives correct and generic, and small physical responses are one of the few things it does not hand you.
Reverse-engineered the animations from the interfaces that set the direction. Where that failed, started from a React library and ported it to Angular. Press states go in, the way a physical button does.
A checkbox draws its check, a radio fills, a toggle carries its own movement, and a send button runs from action to sending to sent. Rules, not decoration, so a larger pattern reuses the response instead of inventing one.
