Eduardo Amaral
← Voltar para Petrobras

Petrobras

Design System Petrobras, a base do ecossistema digital.

Função: Design System e documentação
Status: Finalizado

Desafio

Escalar consistência sem travar a evolução.

O ecossistema digital da Petrobras possuía mais de 100 páginas desenvolvidas individualmente, sem uma linguagem visual compartilhada. A ausência de um Design System gerava inconsistências visuais, aumento do tempo de produção e retrabalho frequente entre designers e desenvolvedores.

O desafio era criar uma base compartilhada que atendesse diferentes produtos e equipes, sem perder a viabilidade dentro da plataforma Liferay.

Antes

Mais de 100 páginas construídas sem uma base compartilhada.

Cada área de produto evoluía com decisões de interface isoladas, o que aumentava a inconsistência visual e tornava padrões comuns de página caros de reproduzir.

Design e Desenvolvimento não tinham uma fonte comum para tokens, componentes, comportamento responsivo e orientações de implementação.

Como resolvemos

Liderança da arquitetura à adoção.

  • Liderança do Design System.
  • Definição da arquitetura de Design Tokens.
  • Estruturação de tokens base e semânticos.
  • Arquitetura e padronização dos componentes.
  • Criação da documentação em Figma e Notion.
  • Alinhamento contínuo com a equipe de desenvolvimento.
  • Definição de diretrizes de uso e governança.
  • Condução da adoção interna do sistema.

Fundações

Design Tokens

Cores, tipografia, espaçamentos e tamanhos organizados como variáveis de estilo para reduzir decisões soltas.

Components

Botões, cards, abas, accordions e padrões de interface documentados com estados, anatomia e regras de uso.

Sections

Blocos reutilizáveis como hero banners, menus, footers e áreas de conteúdo para acelerar páginas editoriais.

Templates

Modelos de páginas por nível, erro e estrutura institucional para manter consistência entre fluxos e times.

Motion

Diretrizes de movimento para orientar transições, feedbacks e comportamentos sem quebrar performance.

Acessibilidade

Regras de contraste, leitura, foco, estrutura e inclusão para sustentar uma experiência pública mais robusta.

Desafios de implementação

Equilibrar as necessidades de Design e as limitações do Liferay.

Um dos principais desafios do projeto foi equilibrar as necessidades de Design com as limitações técnicas impostas pela plataforma Liferay.

Como o desenvolvimento era conduzido por uma empresa terceirizada, diversas decisões exigiam negociação para preservar a experiência do usuário sem comprometer a viabilidade técnica. Esse processo influenciou diretamente a arquitetura dos componentes e a evolução do sistema.

Processo

Do mapeamento às seções editoriais reutilizáveis.

Inventário de padrões existentes no ecossistema Petrobras para entender redundâncias, inconsistências e lacunas.

Definição de fundações visuais e estruturais para criar uma linguagem comum entre portal, site principal e novas páginas.

Documentação manual no Notion com exemplos, anatomia, specs, variações, estados e orientações de implementação.

Organização de componentes, sections e templates para aproximar design, conteúdo, Liferay e desenvolvimento.

Documentação manual

Specs como ferramenta de alinhamento.

O trabalho de documentação foi parte central do case. Cada decisão precisava ser compreensível fora do Figma: variações, estados, regras de composição, comportamento responsivo e limites de uso eram descritos para orientar a implementação no ecossistema Petrobras.

Governança

Evolução contínua sem comprometer a estabilidade.

Qualquer designer da equipe podia propor melhorias ou novos componentes. As alterações eram avaliadas em conjunto entre Design e Desenvolvimento.

Mudanças incrementais eram publicadas como patches, enquanto alterações estruturais geravam novas versões de componentes para evitar impactos em larga escala.

Adoção e evangelização

Documentação e treinamento como ferramentas de alinhamento.

A documentação foi utilizada como principal ferramenta de alinhamento entre equipes. Semanalmente eram realizadas apresentações com designers, desenvolvedores e stakeholders para compartilhar atualizações, validar decisões e garantir o uso correto dos componentes.

A combinação entre documentação acessível, treinamento contínuo e acompanhamento próximo da equipe contribuiu para uma adoção consistente do sistema em todos os novos projetos.

Impacto

Uma base compartilhada que mudou a escala das entregas.

  • Mais de 100 páginas estruturadas sobre uma única base visual e técnica.
  • Redução do tempo de criação de páginas de aproximadamente 6 dias para meio dia.
  • Base utilizada pelo portal institucional e Hub de Conteúdo da Petrobras.

Evidências

A documentação viva do Petro DS v2.

Visão da capa do arquivo PetroDS v2 no Figma, com navegação lateral de tokens e componentes.
Documentação dos tokens de cores da marca no PetroDS v2.
Template de página do PetroDS v2 documentado em variações default e high contrast.
Coleções de variáveis do PetroDS v2 organizadas por temas default e high contrast.

Tokens

Galeria de fundações com cores, tipografia, breakpoints, efeitos, bordas, ícones, spacing, ilustrações, sizing e imagens.

Componentes

Catálogo em Notion organizado por grupos como Actions e Content, com buttons, accordion, avatar, bullet e cards.

Specs de anatomia

Exemplo de documentação manual do componente Bullet, detalhando elementos, função, cores e regras de composição.

Specs de layout

Exemplo de variação horizontal com medidas, propriedades e tokens como padding, radius, gaps, width e height.

Resultados

Um ecossistema digital mais consistente e previsível.

  • Eliminação de inconsistências entre produtos e áreas do ecossistema.
  • Redução significativa de retrabalho relacionado à interface.
  • Governança compartilhada entre Design e Desenvolvimento.
  • Maior previsibilidade para Design e Desenvolvimento.
Ver documentação do Petro DS v2

Relação

O design system era a ponte entre os cases Petrobras.

O Nossa Energia pode ser entendido como uma aplicação direta dessa base: um portal editorial que se apoia em componentes, sections e templates previamente definidos.

Essa relação é o ponto mais importante do case: o design system criou uma fundação para múltiplas experiências digitais com mais consistência e velocidade.

Próximo Case

Nossa Energia

Portal editorial de conteúdos conectado ao design system