DESIGN SYSTEM / BARÕES DIGITAL PUBLISHING / 2025

Design system multimarca

Uma base única de componentes que atende cerca de doze marcas. A troca de marca é feita por token, sem redesenhar nenhuma tela.

CLIENTE: Barões Digital Publishing
MEU PAPEL: Construção e governança do sistema
ENTREGA: Tokens em três camadas, biblioteca de componentes e telas de portal
ANO: 2025

Telas de portal montadas com o design system

O desafio

A Barões cria portais de conteúdo para marcas muito diferentes entre si. Redesenhar cada portal do zero tomava tempo, e cada marca nova trazia inconsistências que apareciam só na hora de programar.

O que eu fiz

Organizei os tokens em três camadas: valores fixos, valores de cada marca e papéis de uso. Os componentes só consultam os papéis, então trocar a marca re-skina cor, fonte, arredondamento e espaçamento do arquivo inteiro de uma vez. Montei homes e matérias que mudam de identidade com um clique para provar que o sistema funciona.

A lógica do projeto

Como pensei

01
Três camadas de token
Structural guarda os valores brutos, Brand o que muda por cliente e Semantic os papéis que os componentes usam. Componente nunca aponta para a marca direto.
02
Uma marca por mode
Trocar o mode da coleção Brand muda cor, fonte e arredondamento de todas as telas de uma vez. Acima de quatro marcas, o registro passa para código.
03
Fonte amarrada a variável
Cerca de 275 textos de componente têm a família ligada a um papel de fonte. Sem isso, a tipografia não acompanhava a troca de marca.
04
Pesos que existem em todas as fontes
Os pesos foram reduzidos a Regular, Medium e Bold, porque um sistema multimarca só pode usar o que todas as famílias oferecem.