#E3F2FDCASE STUDY
Magnetita Design System
Da biblioteca visual à construção de uma linguagem mais consistente para os produtos da Foregon.
FOUNDATIONS
Cor, tipografia, grid e espaçamento como decisões compartilhadas.
67 paint styles · 17 text styles · 3 effect styles · 2 grid styles
FEEDBACK COLORS
#BBDEFB#64B5F6#007AD9#1976D2#0D47A1#E1F5FE#B3E5FC#4FC3F7#1AD3FF#039BE5#01579B#FFF8E1#FFECB3#FFD54F#FFC107#FFA000#FF6F00#E0F7FA#B2EBF2#4DD0E1#00BCD4#0097A7#006064#B71C1C#D32F2F#F44336#E57373#FFCDD2#FFEBEE#1B5E20#388E3C#4CAF50#81C784#C8E6C9#E8F5E9CORES NEUTRAS
#1D1D1D#3D3D3D#5C5C5C#707070#DBDBDB#F3F3F3#FFFFFFCORES PRIMÁRIAS
#020653#00298F#0055B8#007AD9#1AD3FF#C4F6FF#E8FDFFGRADIENTES
CORES DE FUNDO
#FFFFFF#FAFCFF#F3F3F3#707070#3D3D3DCOR PREMIUM
#2C1B08#533516#7A4E25#A16733#FEB705#FED293#FEECC7Typography
Outfit — 17 text styles · Desktop + Mobile · heading + body
Desktop / H1Magnetita Design System40px · BoldDesktop / H2Magnetita Design System32px · BoldDesktop / H3Magnetita Design System28px · BoldDesktop / H4Magnetita Design System24px · BoldDesktop / H5Magnetita Design System20px · BoldMobile / H1Magnetita Design System24px · BoldMobile / H2Magnetita Design System20px · BoldMobile / H3Magnetita Design System16px · BoldCorpo de textoMagnetita Design System24px · RegularCorpo de texto — BoldMagnetita Design System24px · BoldCorpo de texto 1Magnetita Design System20px · RegularCorpo de texto 1 — BoldMagnetita Design System20px · BoldCorpo de texto 2Magnetita Design System16px · RegularCorpo de texto 2 — SemiBoldMagnetita Design System16px · SemiBoldBotãoMagnetita Design System14px · ExtraBoldSobrancelhaMagnetita Design System14px · BoldDescriçãoMagnetita Design System14px · RegularLEGACY × V2
O que mudou não foi apenas aparência
Comparação real entre componentes Legacy e V2. Os elementos abaixo representam instâncias do arquivo Magnetita.
LEGACY
Nomenclatura inconsistente
- Sem estados definidos
- Sem component set
V2
Component Set
51 variants · Type, State, Icon
V2 — FORM / INPUT
8 variants · Type × State × Filled
V2 — FORM / SWITCH
8 variants · On · Off · Hover · Focus · Disabled
COMPONENT GALLERY
Galeria de Componentes
Os blocos reais que sustentavam os produtos Foregon, agrupados pela função que exerciam no sistema.
ACTIONS
Buttons · 51 variants with Type, State, Icon
FORMS
Input · Switch · Radio · Selection controls
NAVIGATION
Pagination · Chevron · Chip
FEEDBACK & UTILITY
Badge · Tooltip · Pop over · Notification · Loader · QA status
DATA & SCORE
Score · Badge score · Numerals
PRODUCT & BRAND
Product · Avatar · Logo
COMPONENT SPOTLIGHT
Button / Primary
51 variants · Type (Primary, Card, Account, Loan, Link) × State (Normal, Hover, Focus, Disabled, Loading) × Icon
TYPE
STATE
ICON
COMPONENT ARCHITECTURE
Átomo → Molécula → Organismo
ÁTOMO
Buttons, Inputs, Switch, Radio, Badge, Tooltip, Loader
MOLÉCULA
Score Card, Status Card, Pop over, Navigation
ORGANISMO
Carrosséis, Headers, Cards de Produto, Navegação, Telas completas
SYSTEM ARCHITECTURE
Core × Team × Lab
Separação de responsabilidades entre componentes compartilhados, específicos de squad e experimentais.
💙 CORE
440 components · 56 component setsGovernança centralizada. Usado por Score, Cartões, Empréstimos e Conta Digital.
TEAM
234 components · 45 component setsAutonomia com padrão para necessidades específicas dos squads.
🧪 LAB
Sandbox protegidoExplorações de tokens, propostas de evolução e testes de conceito ainda não formalizados.
TOKEN MODEL
Modelo de Tokens
Exploração de uma linguagem semântica para decisões visuais.
primarias/500#0055B8action/primarybutton/background/defaultprimarias/300#1AD3FFaction/secondarybutton/background/hoverprimarias/700#020653text/primaryheading/colorneutras/900#1D1D1Dtext/defaultbody/colorneutras/100#F3F3F3surface/secondarycard/backgrounddanger/500#F44336feedback/errorinput/border/errorSuccess/500#4CAF50feedback/successbadge/background/successAviso/500#FFC107feedback/warningalert/background/warningROADMAP
Roadmap de Evolução
Nov 2023 – Mar 2024 · 5 phases
- 01
Auditoria
Inventário de componentes, mapeamento de inconsistências e análise de uso entre produtos.
- 02
Foundations
Cores, tipografia, grid e espaçamento como decisões compartilhadas: 67 paint styles e 17 text styles.
- 03
Core Rebuild
Reconstrução atômica de Átomo a Organismo: 440 componentes e 56 component sets.
- 04
Team / Lab
Separação Core, Team e Lab para equilibrar autonomia e governança.
- 05
Documentação
Guidelines, padrões de uso e modelo de deprecação In Memoriam.
DEPRECATION MODEL
Modelo de Deprecação
Como componentes são aposentados sem quebrar produtos em produção.
DEPRECATED
Tag de deprecação, aviso visual e substituto documentado.
IN MEMORIAM
Página de transição, times notificados e período de migração.
LIXO
Removido do uso ativo e mantido como referência histórica.
Componentes encontrados em ‘In memoriam / Lixo’:
Ícone/Rounded/MenuÍcone/Rounded/FecharÍcone/Rounded/BuscaÍcone/Rounded/SetaBotão/Selection ControlBotão/Navegação/ChipBotão/Navegação/Item de listaBotão/Avaliação/CurtirGOVERNANCE
Documentação & Governança
- 01–03
Discovery
Need · Exploration · System Review
- 04–05
Build
Design + Engineering · Documentation
- 06–07
Ship
Release · Adoption
- 08–09
Evolve
Feedback · Iteration
DOCUMENTAÇÃO
Guidelines por componente, anatomy, props, variants e do/don't vivendo junto ao componente no Figma.
GOVERNANÇA
Contribuição aberta com revisão, propostas via Lab, checagem de consistência antes de promover ao Core e versionamento semântico.
MY CONTRIBUTION
Minha Contribuição
SYSTEM STRATEGY
Participei da definição da arquitetura Core / Team / Lab e da separação entre responsabilidades compartilhadas e específicas.
COMPONENT EVOLUTION
Contribuí para a evolução Legacy → V2, reestruturação atômica e definição de variant properties.
DESIGN QUALITY
Trabalhei com o time em estados visuais, acessibilidade básica e consistência entre produtos.
PRODUCT ALIGNMENT
Ajudei a alinhar Score, Cartões, Empréstimos e Conta Digital com a evolução do sistema.
DOCUMENTATION
Contribuí para guidelines e para o modelo de deprecação In Memoriam / Lixo.
2026 REVIEW / RECONSTRUCTED
O que eu faria diferente hoje
- 01
TOKENS FIRST
Começaria com Figma Variables desde o primeiro dia: Primitive → Semantic → Component.
- 02
DOCUMENTAÇÃO COMO PRODUTO
Aplicaria às guidelines o mesmo design thinking usado nas interfaces.
- 03
GOVERNANÇA ANTES DE COMPONENTES
Definiria contribuição, revisão e evolução antes que a biblioteca se fragmentasse.
- 04
DESIGN × CODE PARITY
Aproximaria naming, props e component tokens entre Figma e código.
- 05
ACCESSIBILITY NATIVA
Trataria contraste, foco, target sizes e teclado como requisitos de criação.
- 06
ADOPTION METRICS
Mediria cobertura de instâncias, detach rate e tempo de onboarding.
REFLECTION
Reflexões finais
Um sistema não é uma coleção de componentes. É um modelo mental compartilhado.
A parte mais difícil não é construir — é fazer adotar.
Consistência é uma decisão política, não apenas visual.
Documentação que ninguém lê não é documentação.
Um Design System amadurece quando deixa de organizar apenas componentes e começa a organizar decisões.
Jhonatan Rafael — Product Designer
2023 – 2024 · RECONSTRUCTION 2026

