Missing Proof
Legacy documentation covered a mere 28% of core assets (9 out of 32 components), fueling widespread implementation gaps, tech debt, and alignment friction.
Motriz Design System
Building a scalable multi-brand Design System for a sports ecosystem
Client
Grupo SBF
Duration
Oct 2022 → Sep 2024
Scope
Design System, Product Design, Documentation, Governance, Cross-brand Scalability
TL;DR:
At Grupo SBF, I led the evolution of Motriz from an experimental MVP into a production-ready, white-label Design System powering 14 applications across 7 brands, including Nike and Centauro. I architected a token-driven multi-brand infrastructure, rebuilt governance, documentation, and collaboration processes, and established a scalable design-to-code workflow that enabled 100% squad adoption. The initiative accelerated prototyping by 85%, reduced engineering handoff by 60%, and transformed Motriz into the single source of truth for the company's digital ecosystem.
Overview
A massive sports empire running on disconnected product lines.
Grupo SBF is the absolute engine of sports commerce in Brazil. They operate an immense omnichannel network covering retail, marketplace logistics, and digital platform experiences through giant business units like Centauro and Fisia (the official operator of Nike in Brazil).
Over a two-year window, its digital portfolio expanded rapidly into a multi-brand powerhouse, adding individual mobile apps, internal operational interfaces, and standalone products like Spoint (loyalty app), X3M (events), OneFan (soccer fan engagement), FitDance (dance & lifestyle), and NWB (media/sports content).
The Motriz Design System was created to bridge design and engineering, transitioning from an experimental MVP into production-ready digital infrastructure powering the entire holding, using a white-label solution designed to scale seamlessly across multiple brands, products, and squads.
The Challenge
A hyper-lean team, low adoption, and a strict business ultimatum.
As the sole designer responsible for the entire design system infrastructure, I inherited a project trapped in heavy technical and cultural debt. The legacy version of Motriz was stuck in an early-stage, experimental MVP state. These are the main challenges we had moving forward:
Single Brand Trap
The infrastructure was hardcoded exclusively for Centauro desktop web, leaving 6 major business units and the entire mobile product line completely stranded.
Culture Crisis
Severe chapter resistance stalled adoption: 70% of engineering struggled with setup, while 45% of designers rejected the system fearing loss of creative freedom.
The Tech Ultimatum
An aggressive CTO cost-cutting directive gave our unit less than a year to prove concrete operational and financial viability or face permanent dissolution.
The Architecture
Re-engineering Motriz into a token-driven, white-label engine.
Scaling a design system across multiple major retail lines required completely decoupling structure from visual style, turning Motriz into a single, highly flexible engineering framework.
My solution to managing 7 distinct brands without maintaining duplicated libraries was a unified, brand-agnostic white-label architecture managed through Tokens Studio (the native Figma Tokens tool didn't exist at the time). This multi-tier pipeline completely decoupled visual attributes from hardcoded layouts through 5 tactical steps:
White-Label Blueprint
Every component's core frame is 100% brand-agnostic. It contains only the behavioral layout rules, constraints, and base anatomy, serving as a completely clean canvas.
The Token Data Engine
All design decisions are stored as raw JSON datasets. By simply toggling the active brand set (e.g., Centauro or Nike) within the plugin, the engine injects new values into the visual properties globally, styling the component instantly.
Multi-Tier Token Anatomy
To prevent layouts from breaking during brand swaps, component attributes never point to primitive hex codes. Component tokens inherit directly from intermediate Semantic layers, which map back to the global primitives.
Semantic Interface Logic
Because interface attributes are tied to semantic meaning (e.g. brand-primary instead of nike-orange), brand updates can be deployed globally without altering any underlying layout composition or structural code.
Design <> Code Automated Alignment
We established an identical nomenclature token structure between Figma and the engineering repositories. Developers call variables using the exact same naming conventions, removing manual interpretation and ensuring a flawless handoff.
The Release
Launching Motriz 1.0
Motriz 1.0 marked our first official major release following the initial MVP phase, transitioning the design system from an experimental utility into a fully production-ready operational infrastructure.
This major milestone shipped a comprehensive, multi-brand, and multi-platform core framework, delivering over 20+ highly engineered components, fully integrated design foundations, and semantic token sets. It served as the official turning point for product scalability at Grupo SBF, empowering product squads to deploy unified, accessible experiences across distinct brands instantly.
Creating a comprehensive single source of truth for design, product and development.
To support our massive rollout and ensure smooth adoption across the group, the release was backed by a documentation hub. I architected the information hierarchy of the portal to act as a clear, searchable knowledge matrix for both designers and developers:
General documentation
The entry point of Motriz outlines the foundational rules of the ecosystem. It provides a centralized framework for system navigation, day-to-day consumption guides, and federated contribution workflows.
Homepage
From the homepage, users can immediately access dedicated sub-hubs for each brand, alongside macro system resources. The main page deep dives into system architecture, history, design principles, and core strategy.
How to use
Clear workflows detailing our step-by-step component creation process and how to consume assets across Design, Web, and App ecosystems.
How to contribute
Structured instructions on how product teams can contribute new components and icons to both design libraries and code repositories.
Contact us
Information about the team and how to contact them via Slack or schedule a dedicated meeting.
Brand documentation
Managing a diverse portfolio meant documentation couldn't be one-size-fits-all. I architected dedicated brand hubs inside the portal, each dynamically styled to match its specific brand. These localized workspaces act as a single source of truth for each squad, housing their unique styles and foundations, interactive components, and platform-specific engineering links.
Content Design Guidelines
While the Content team had robust tone and voice rules, they lacked a clear distribution platform. I collaborated with them to weave copywriting frameworks directly into the component usage guidelines. This transformed our documentation hub into an absolute single source of truth. (For a deeper look, check out the article "O papel estratégico de Content Design na tradução de tom e voz da Nike", written by my colleague Paula Berlim).
Dual-Layer Engineering Documentation
To bridge the gap with code, the hub integrates live developer sandboxes. We hooked up Storybook for inspecting live component states and testing interactive attributes in isolation, alongside GitHub documentation for package tracking, version control, and multi-brand package maintenance.
Figma Library Optimization
From 14 fragmented files down to 2 auto-activated environments.
Prior to this re-architecture, the file distribution model was heavily fragmented. Every single brand ran 4 separate, detached libraries (Web, Mobile, Global Variables, Brand Variables). Product designers had to manually look for and toggle up to 5 individual libraries every single time they opened a new Figma tab. It was a slow, buggy process that constantly resulted in missing updates.
I completely changed this flow by merging variables, web, and mobile instances together. I shrunk the entire group ecosystem down to just 8 streamlined files (two for each of the 8 brands), structurally split into two strict operational categories for each brand:
CORE Components
The master library containing the fully engineered, white-label components customized for the specific brand. Maintained exclusively by the core Design System team to protect environment stability.
TEAM Components
A dedicated local library for each business unit where squad designers can build, test, and document niche components unique to their product needs. If a component shows high cross-squad potential, it gets promoted into the CORE library, eliminating duplicate asset creation.
Rituals & Collaboration
Design Systems thrive with collaboration
Collaboration is essential for the success of Design Systems. With each user bringing specific skills, we can gather diverse abilities and encourage the exchange of ideas and perspectives, fostering continuous learning and ensuring active participation from multidisciplinary teams in the evolution of the product.
As the core team became hyper-lean, active cross-functional collaboration became our most critical asset to deliver product results. I established four operational ceremonies to maintain alignment across squads:
Component Critiques
Before shipping a component into development, I invited squad designers to a dedicated critique session. We presented its product context, multi-brand customization logic, variant states (hover, pressed, focus), and real-world interface application layouts to gather visual and functional feedback before handoff.
Bi-Weekly DS Office Hours
To reduce adoption friction, I hosted open collaborative support sessions twice a week. Designers used this space to review live interfaces, validate pattern usage, pitch new Team library components, and clarify documentation questions.
Slack Loops & Tech Updates
To improve transparency and align Design System initiatives with organizational goals, we also invested heavily in workshops, presentations, onboarding guidance, Design System updates, and communication through Slack and internal channels, and helped structure recurring quarterly updates presenting: roadmap priorities, product support, component evolution, engineering improvements, education initiatives.
These updates connected Design System work directly to business and technology objectives while increasing visibility across the organization.
Business Impact
The actual impact, by the numbers.
To show leadership that Motriz was a real multiplier, we looked at the daily reality of our product squads. The performance leap in prototyping speed and dev handoff gave us the exact backing we needed to scale this across the whole ecosystem:
+85%
prototyping speed
Designers completely bypassed manual layer tweaks, moving from over 1 hour down to just ~16 minutes to build identical, high-fidelity responsive layouts.
+26
components shipped
Out of 32 total core web assets targeted during the structural cleanup, 26 highly engineered, accessible components coded and thoroughly documented.
-60%
handoff compression
Engineering execution, front-end delivery packages, and UI implementation times dropped drastically across web and app production environments.
14 apps
active adoption scale
The system expanded its footprint from a single desktop environment to powering 14 live applications across 13 distinct product squads.
100%
squad integration
Total compliance and active cross-brand token implementation achieved across all 13 product squads simultaneously.
7 brands
portfolio ecosystem
Unified core foundations scaling white-label thematic layers from national retail giants to premium global brands like Nike.
The Multiverse in action
Powering consumer products, flagship apps, and core tools.
Motriz was validated as the master source of truth, empowering squads to ship unified, accessible, and high-fidelity experiences across diverse product lines with zero manual overhead.
Nike Brazil App Launch
The Nike app launch was the ultimate stress test for our design system architecture. We had to evolve our white-label core to absorb Nike's strict global guidelines without compromising the scalability of our underlying platform. By refactoring our foundational tokens and creating highly flexible component variants, we translated international brand standards into a native, high-performance product experience that secured full global approval.
Centauro Omnichannel Core
Motriz was integrated across Centauro's core web and mobile touchpoints. Reusable components drove high-conversion user flows, power-building modular Product Detail Pages (PDP), smooth multi-brand checkouts, and optimized search navigation filters.
Spoint Rebrand Speedrun
When legacy app Crava rebranded to Spoint, it served as the ultimate test of our tokenized speed. I co-created the new brand style guide and immediately mapped it into the token engine. In close partnership with the Content team, we updated the language frameworks across all channels, launching a complete, high-fidelity ecosystem in record time.
- Complete App Redesign & New Features (1 week): Redesigned the entire product experience, introducing new features with baked-in accessibility and consistency.
- Marketing & Transactional Emails (2 days): Design a proposal for the communication visual lifecycle in deep collaboration with the Content team.
- Web & Mobile Landing Page (3.5 hours): This is where the Design System truly shined. Leveraging our pre-built whitelabel layout rules and core component structures, I designed both responsive versions in record time.
Painel SBF Internal Platforms
We deployed Motriz into Painel SBF, the centralized web command center used internally to manage prices, active campaigns, e-commerce promotions, and logistics. The system standardized complex data tables, making internal tools easier to maintain and faster to build.
Beyond the UI
More than a Design System
What started small ended up powering the infrastructure for the entire enterprise ecosystem. Working in this project taught me that a design system is only 20% about the components - the other 80% is about the culture and the people using it daily.
Before moving on to my next chapter, my main priority was making sure the system wouldn't skip a beat or lose momentum. I focused on two main moves to leave everything set up for long-term success:
- Leaving the house clean: I organized every single Figma file, token sheet, component tree, and the our documentation portal. Everything is perfectly mapped out and self-service, meaning any designer can jump in and take over instantly.
- Shared ownership: I set up a network of Design Ambassadors across our different brands. This turned governance into a collaborative effort, giving local squads a direct voice and ensuring the core code keeps evolving naturally.
Deeply grateful
Looking back at this two year chapter, I'm genuinely proud of what we pulled off. Scaling a multi-brand architecture of this size was a massive challenge that completely pushed my limits as a specialist.
I am deeply grateful to Grupo SBF for the opportunity, for the seamless collaboration with brilliant engineering, design, and content teams, and, most importantly, for the lifelong friends I made along the way.
Motriz was built with code and pixels, but it thrives because of the incredible community behind it 💚
