B3 Multibrand Design System
Client
B3 Multibrand Design System
Services
Product Designer
Design System
Year
2026
Credits
Jitter (Video)
Mockup Republic (Images)
Infos
B3 (the Brazilian Stock Exchange) operates within a highly complex and decentralized ecosystem. The major design and engineering challenge was not merely visual, but one of governance: how to ensure brand consistency and technical agility across products developed by multiple external consultancies that do not maintain close contact with one another?
Problem
As B3 expanded its digital footprint across various internal platforms, consumer-facing products, and sub-brands, the lack of a centralized UI architecture became a severe operational bottleneck. The team faced widespread visual inconsistencies, duplicated engineering efforts, and a sluggish time-to-market for new features. The core challenge was scaling. B3 didn't just need a standard UI kit; they required a flexible, multibrand architecture capable of theming diverse digital products without forcing designers to rebuild components or engineers to rewrite CSS from scratch. Furthermore, there was a profound disconnect between how design handled visual properties and how development implemented them, leading to friction during every handoff.
Time to Delivery
6 months
Squad Structure
3 Product Designers, 2 Developers
Process
Operating end-to-end, my objective was to bridge the gap between design and engineering by building a system rooted in logic, accessibility, and scalability. Audit & Foundation I began by conducting a comprehensive audit of B3's existing platforms to identify recurring UI patterns and critical usability gaps. I established strict WCAG compliance as a baseline, ensuring that all fundamental elements—especially contrast ratios and target touch sizes—met the accessibility standards required for complex data-heavy financial interfaces. Advanced Multibrand Token Architecture To solve the multibrand challenge, I architected a highly structured token management system within Figma. Instead of hardcoding values, I built a scalable taxonomy distributed across three distinct layers using Figma Variables: 1. Primitive Tokens: The core, brand-agnostic values (raw hex codes, absolute spacing units, global typography scales). 2. Semantic Tokens: Contextual aliases (e.g., color-background-primary, spacing-container-padding) that give meaning to the primitives. 3. Component Tokens: Highly specific rules tied to individual UI elements. Bridging Design and Code A design system is only as strong as its codebase. I collaborated directly with the engineering team to mirror this exact token taxonomy in the development environment. By structuring our Figma Variables to export seamlessly via JSON to the codebase, we established a true multibrand infrastructure.
Solution
The B3 Design System established a single, authoritative source of truth that fundamentally transformed how products are built at the exchange. By implementing a shared multibrand token structure across both design and development, we unlocked the ability to theme entire platforms instantaneously. Switching a product's brand identity now simply requires swapping out the semantic token layer—automatically updating both the Figma prototypes and the front-end code without touching the underlying component logic. The Value Generated: - Drastic reduction in UI development time: Engineers no longer inspect hardcoded values; they consume standardized tokens. - Frictionless Handoffs: The shared language between design and engineering eliminated back-and-forth QA cycles. - Effortless Scalability: B3 can now launch, theme, and maintain complex financial platforms with total visual consistency and uncompromised accessibility, saving hundreds of hours in design and engineering debt.
