Carrefour logo

Marcel Design System

Um design system global que ganhou uma camada de temas por região para funcionar no Brasil.

O problema

Enquanto eu atuava no design system global do Carrefour, comecei a notar um padrão incômodo se repetindo entre as marcas do grupo no Brasil: inconsistência visual entre países e, pior, uma resistência real de designers e desenvolvedores em adotar o próprio DS. Ninguém tinha pedido pra eu olhar isso — foi uma leitura que fiz sozinho, observando como times locais criavam soluções paralelas porque a estrutura global simplesmente não dava conta das particularidades daqui.

Por que o global não bastava

O Brasil tinha dois casos que expunham essa limitação de forma clara. O Atacadão precisava de cobertura de design system, mas não tinha um time dedicado — e sem agilidade e economia de recursos, cada tela nova virava um esforço do zero. O Sam's Club era ainda mais peculiar: fora do Brasil, a marca pertence ao Walmart, não ao Carrefour. Ou seja, por definição, ela nunca seria contemplada pela estrutura global do Marcel — mas no Brasil, era uma marca do grupo que também precisava de consistência visual.

Diante disso, propus uma camada de tema local: uma estrutura que pudesse herdar do Marcel global, mas permitir que tokens e componentes específicos de cada marca brasileira fossem tratados sem depender de uma decisão global — sem, no entanto, deixar de fazer parte do ecossistema de design system.

O caminho não foi direto

Convencer o time global a desvincular tokens para uma camada por país não foi uma conversa rápida. Levou cerca de seis meses de reuniões explicando o porquê dessa necessidade até a decisão ser de fato incorporada e eu poder construir o cenário brasileiro.

Mesmo depois disso, nem tudo saiu como planejado. Adaptar a linguagem visual do Sam's Club à estrutura do Marcel exigiu mais manutenção contínua do que qualquer outra marca — os componentes locais dessa camada acabaram consumindo uma fatia desproporcional de tempo do time. Não foi o cenário ideal, mas ainda assim era um salto em relação ao que existia antes: 100% construído do zero, sem nenhum aproveitamento de design system.

Handoff

A documentação dessa camada ficou centralizada em um Storybook interno — hoje sem acesso, já que saí da empresa — junto com os arquivos de design dos temas locais. O que permanece acessível é o link da documentação global do Marcel, com os componentes do Figma congelados no ponto em que atuei ali.

Resultado

Uma das metas da área de digital era o percentual de adoção de componentes do Marcel — e esse era exatamente o ponto central da proposta: mesmo um componente construído pelo time BR, dentro da camada local, e que nunca chegasse a ser promovido à estrutura global, ainda contava como design system. A ideia era reduzir a quantidade de componentes feitos de forma isolada, sem passar por nenhuma estrutura de DS.

Exemplo de abas de navegação entre Food e Non Food e área interna de Food

Hoje, tanto o app do Carrefour Brasil quanto o do Atacadão consomem os componentes do Marcel nessa arquitetura. O Sam's Club permanece com implementação parcial — um lembrete de que nem toda solução escala igualmente bem para todas as marcas, e tudo bem que seja assim.

To embed a website or widget, add it to the properties panel.

©Donadelli. 2026

©Donadelli. 2026

©Donadelli. 2026

Portuguese