Lipe Machado

Product designer

Arezzo&Co / Grupo SOMA

Design system multimarca

Defini onde ficava a fronteira entre padrão e liberdade de marca, e a governança que fez o sistema sobreviver a times diferentes.

Design systemMultimarcaAcessibilidadeGovernança
CONTEXTO
Design system compartilhado entre marcas de um grupo (Arezzo&Co / Grupo SOMA)
RESTRIÇÃO
Um único sistema atendendo várias marcas do grupo, com times de produto e engenharia distintos e legado em produção.

O problema

Cada marca queria expressão própria e cada time resolvia os mesmos problemas de forma diferente. Isso produzia inconsistência de comportamento, retrabalho e acessibilidade tratada caso a caso. A decisão central era onde colocar a fronteira entre padrão e liberdade: padronizar demais apaga a marca, padronizar de menos multiplica o custo.

Um sistema comum para marcas que não podem parecer iguais

Coordenei Product Design em grupos multimarca, onde cada marca precisa de identidade própria dentro de um mesmo sistema de produto. O trabalho não foi desenhar telas: foi decidir o que é consistência obrigatória e o que é flexibilidade legítima de cada marca, e escrever isso de um jeito que os times conseguissem aplicar sem mim.

O sistema separou três camadas: fundação (grid, espaçamento, estados, acessibilidade), tokens de marca (cor, tipografia, forma) e componentes compartilhados. Marca vive nos tokens; comportamento e acessibilidade vivem na fundação e não são negociáveis.

Meu papel

Fui responsável por definir a arquitetura do sistema em camadas (fundação, tokens de marca, componentes) e pela governança: quem propõe, quem revisa, como um componente entra e como uma exceção é aprovada.

Escrevi as guidelines de acessibilidade dentro do sistema, tratando contraste, ordem de foco, alvo de toque e estados como parte da definição do componente, não como revisão posterior. Trabalhei com engenharia para que os tokens fossem a mesma fonte de verdade no código, evitando divergência entre o desenho e o que sobe.

Mentoria: conduzi revisões de design recorrentes com o time, usando o sistema como ferramenta de formação, e participei de processos de contratação de designers.

Resultado

O sistema passou a resolver no nível da fundação o que antes era resolvido tela a tela: contraste, ordem de foco e comportamento de componente deixaram de ser decisão individual de cada time. A governança definida no projeto (quem propõe, quem revisa, como uma exceção é aprovada) continuou em uso depois da minha saída.

Decisões

  1. A fronteira entre padrão e liberdade

    Padronizei comportamento, acessibilidade e estrutura de componente, e liberei cor, tipografia e densidade por marca via tokens.

    Alternativa descartada: Padronizar também a camada visual: consistência total e marcas indistinguíveis, que é exatamente o que o grupo não pode ter.

  2. Governança antes de biblioteca

    Defini quem propõe, quem revisa e como uma exceção é aprovada antes de crescer o catálogo de componentes.

    Alternativa descartada: Publicar a biblioteca primeiro e organizar depois: adoção inicial rápida, seguida de forks por time.

  3. Acessibilidade na fundação

    Coloquei contraste, ordem de foco e alvo mínimo de toque nas guidelines do sistema, como critério de aceite do componente.

    Alternativa descartada: Tratar acessibilidade como revisão no fim de cada projeto: retrabalho recorrente e resultado desigual entre marcas.

Próximo case

Arezzo&Co / Grupo SOMAZZ App O app da vendedoraColoquei a loja inteira no celular da vendedora, em três passos, e a venda continuou com as lojas fechadas.