← Todos os projetos

CASE STUDY

Magnetita Design System

Da biblioteca visual à construção de uma linguagem mais consistente para os produtos da Foregon.

Empresa
Foregon
Papel
Product Design / Design Systems
Foco
UI Architecture · Scalability · Governance
Período
2023 – 2024
TEXTOTEXTOTEXTOAdicione aos favoritos11foregon
580de 1.000
Médio

Cor, tipografia, grid e espaçamento como decisões compartilhadas.

67 paint styles · 17 text styles · 3 effect styles · 2 grid styles

FEEDBACK COLORS

Informação/50#E3F2FD
Informação/100#BBDEFB
Informação/300#64B5F6
Informação/500#007AD9
Informação/700#1976D2
Informação/900#0D47A1
Link/50#E1F5FE
Link/100#B3E5FC
Link/300#4FC3F7
Link/500#1AD3FF
Link/700#039BE5
Link/900#01579B
Aviso/50#FFF8E1
Aviso/100#FFECB3
Aviso/300#FFD54F
Aviso/500#FFC107
Aviso/700#FFA000
Aviso/900#FF6F00
Ação/50#E0F7FA
Ação/100#B2EBF2
Ação/300#4DD0E1
Ação/500#00BCD4
Ação/700#0097A7
Ação/900#006064
danger/900#B71C1C
danger/700#D32F2F
danger/500#F44336
danger/300#E57373
danger/100#FFCDD2
danger/50#FFEBEE
Success/900#1B5E20
Success/700#388E3C
Success/500#4CAF50
Success/300#81C784
Success/100#C8E6C9
Success/50#E8F5E9

CORES NEUTRAS

900#1D1D1D
800#3D3D3D
700#5C5C5C
600#707070
300#DBDBDB
100#F3F3F3
50#FFFFFF

CORES PRIMÁRIAS

700#020653
600#00298F
500#0055B8
400#007AD9
300#1AD3FF
200#C4F6FF
100#E8FDFF

GRADIENTES

gradient-primario
gradient-premium
gradient empréstimo
gradient conta
gradient crédito

CORES DE FUNDO

100#FFFFFF
200#FAFCFF
300#F3F3F3
400#707070
500#3D3D3D

COR PREMIUM

700#2C1B08
600#533516
500#7A4E25
400#A16733
300#FEB705
200#FED293
100#FEECC7

Typography

Outfit — 17 text styles · Desktop + Mobile · heading + body

Desktop / H1Magnetita Design System40px · Bold
Desktop / H2Magnetita Design System32px · Bold
Desktop / H3Magnetita Design System28px · Bold
Desktop / H4Magnetita Design System24px · Bold
Desktop / H5Magnetita Design System20px · Bold
Mobile / H1Magnetita Design System24px · Bold
Mobile / H2Magnetita Design System20px · Bold
Mobile / H3Magnetita Design System16px · Bold
Corpo de textoMagnetita Design System24px · Regular
Corpo de texto — BoldMagnetita Design System24px · Bold
Corpo de texto 1Magnetita Design System20px · Regular
Corpo de texto 1 — BoldMagnetita Design System20px · Bold
Corpo de texto 2Magnetita Design System16px · Regular
Corpo de texto 2 — SemiBoldMagnetita Design System16px · SemiBold
BotãoMagnetita Design System14px · ExtraBold
SobrancelhaMagnetita Design System14px · Bold
DescriçãoMagnetita Design System14px · Regular

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
Chip

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

Galeria de Componentes

Os blocos reais que sustentavam os produtos Foregon, agrupados pela função que exerciam no sistema.

Button / Primary

51 variants · Type (Primary, Card, Account, Loan, Link) × State (Normal, Hover, Focus, Disabled, Loading) × Icon

TYPE

primary
card
account
loan
link

STATE

default
hover
focus
disabled
loading

ICON

No icon
Right
Left

Átomo → Molécula → Organismo

01

ÁTOMO

Buttons, Inputs, Switch, Radio, Badge, Tooltip, Loader

02

MOLÉCULA

Score Card, Status Card, Pop over, Navigation

250de 1.000
Score
03

ORGANISMO

Carrosséis, Headers, Cards de Produto, Navegação, Telas completas

Adicione aos favoritos

Core × Team × Lab

Separação de responsabilidades entre componentes compartilhados, específicos de squad e experimentais.

01

💙 CORE

440 components · 56 component sets

Governança centralizada. Usado por Score, Cartões, Empréstimos e Conta Digital.

02

TEAM

234 components · 45 component sets

Autonomia com padrão para necessidades específicas dos squads.

03

🧪 LAB

Sandbox protegido

Explorações de tokens, propostas de evolução e testes de conceito ainda não formalizados.

Modelo de Tokens

Exploração de uma linguagem semântica para decisões visuais.

PRIMITIVEVALUE→ SEMANTIC→ COMPONENT
primarias/500#0055B8action/primarybutton/background/default
primarias/300#1AD3FFaction/secondarybutton/background/hover
primarias/700#020653text/primaryheading/color
neutras/900#1D1D1Dtext/defaultbody/color
neutras/100#F3F3F3surface/secondarycard/background
danger/500#F44336feedback/errorinput/border/error
Success/500#4CAF50feedback/successbadge/background/success
Aviso/500#FFC107feedback/warningalert/background/warning

Roadmap de Evolução

Nov 2023 – Mar 2024 · 5 phases

  1. 01

    Auditoria

    Inventário de componentes, mapeamento de inconsistências e análise de uso entre produtos.

  2. 02

    Foundations

    Cores, tipografia, grid e espaçamento como decisões compartilhadas: 67 paint styles e 17 text styles.

  3. 03

    Core Rebuild

    Reconstrução atômica de Átomo a Organismo: 440 componentes e 56 component sets.

  4. 04

    Team / Lab

    Separação Core, Team e Lab para equilibrar autonomia e governança.

  5. 05

    Documentação

    Guidelines, padrões de uso e modelo de deprecação In Memoriam.

Modelo de Deprecação

Como componentes são aposentados sem quebrar produtos em produção.

01

DEPRECATED

Tag de deprecação, aviso visual e substituto documentado.

02

IN MEMORIAM

Página de transição, times notificados e período de migração.

03

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/Curtir

Documentação & Governança

  1. 01–03

    Discovery

    Need · Exploration · System Review

  2. 04–05

    Build

    Design + Engineering · Documentation

  3. 06–07

    Ship

    Release · Adoption

  4. 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.

Minha Contribuição

01

SYSTEM STRATEGY

Participei da definição da arquitetura Core / Team / Lab e da separação entre responsabilidades compartilhadas e específicas.

02

COMPONENT EVOLUTION

Contribuí para a evolução Legacy → V2, reestruturação atômica e definição de variant properties.

03

DESIGN QUALITY

Trabalhei com o time em estados visuais, acessibilidade básica e consistência entre produtos.

04

PRODUCT ALIGNMENT

Ajudei a alinhar Score, Cartões, Empréstimos e Conta Digital com a evolução do sistema.

05

DOCUMENTATION

Contribuí para guidelines e para o modelo de deprecação In Memoriam / Lixo.

O que eu faria diferente hoje

  1. 01

    TOKENS FIRST

    Começaria com Figma Variables desde o primeiro dia: Primitive → Semantic → Component.

  2. 02

    DOCUMENTAÇÃO COMO PRODUTO

    Aplicaria às guidelines o mesmo design thinking usado nas interfaces.

  3. 03

    GOVERNANÇA ANTES DE COMPONENTES

    Definiria contribuição, revisão e evolução antes que a biblioteca se fragmentasse.

  4. 04

    DESIGN × CODE PARITY

    Aproximaria naming, props e component tokens entre Figma e código.

  5. 05

    ACCESSIBILITY NATIVA

    Trataria contraste, foco, target sizes e teclado como requisitos de criação.

  6. 06

    ADOPTION METRICS

    Mediria cobertura de instâncias, detach rate e tempo de onboarding.

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