This wallet reused a token system I had designed for OCA earlier. When I joined, the brand was spread across several products (apps, a public site, a logged-in area and internal tools) and the only thing they shared was the primary color.
This wallet reused a token system I had designed for OCA earlier. When I joined, the brand was spread across several products (apps, a public site, a logged-in area and internal tools) and the only thing they shared was the primary color.
Open the full library
Open the full library
01 · Mapping
Each platform had drifted on its own: different typefaces, different button styles, even different hex values for what everyone called "the OCA blue". I went through all of them and separated the noise from what actually made people recognise the brand: the blue itself, the rounded cloud shapes and the soft gradients.
02 · Proposal
I presented a token set to leadership built on those three elements: a color ramp from the brand blue, a type scale that worked for app and web, radius values matching the cloud geometry, spacing, and gradient rules. The goal was to keep the personality people already recognised and make it consistent and more refined across every channel. Approved in the first round.
03 · Library and documentation
I built the component library in Figma and documented it in Zeroheight.
04 · Handover to iDS
OCA's design team was small, so I led the negotiation with Itaú's design system team in Brazil to publish OCA as a theme inside iDS, the bank's official design system. Maintenance moved to a dedicated team.
05 · First use
The OCA app redesign was the first product built on the system, reaching 600,000+ active customers.
01 · Mapping
Each platform had drifted on its own: different typefaces, different button styles, even different hex values for what everyone called "the OCA blue". I went through all of them and separated the noise from what actually made people recognise the brand: the blue itself, the rounded cloud shapes and the soft gradients.
02 · Proposal
I presented a token set to leadership built on those three elements: a color ramp from the brand blue, a type scale that worked for app and web, radius values matching the cloud geometry, spacing, and gradient rules. The goal was to keep the personality people already recognised and make it consistent and more refined across every channel. Approved in the first round.
03 · Library and documentation
I built the component library in Figma and documented it in Zeroheight.
04 · Handover to iDS
OCA's design team was small, so I led the negotiation with Itaú's design system team in Brazil to publish OCA as a theme inside iDS, the bank's official design system. Maintenance moved to a dedicated team.
05 · First use
The OCA app redesign was the first product built on the system, reaching 600,000+ active customers.
