Voltar

Petrobras

Design System Petrobras, a base do ecossistema digital.

  • Design System
  • documentação

Contexto

Uma base compartilhada para um ecossistema digital em crescimento.

A Petrobras precisava de uma base visual e técnica comum para mais de 100 páginas do ecossistema digital. Liderei a arquitetura do Design System, a padronização de componentes, a documentação e a adoção junto a Design e Desenvolvimento.

Os tempos de entrega apresentados neste case são referências reportadas no projeto; eles descrevem a melhoria esperada com o novo sistema e devem ser lidos junto às evidências e aos limites da iniciativa.

Capa do projeto Petrobras Design System

Desafio

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

A Petrobras tinha mais de 100 páginas sem uma linguagem visual compartilhada. O resultado era inconsistência, entregas mais lentas e retrabalho entre design e desenvolvimento.

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.

  1. Liderança do Design System.
  2. Definição da arquitetura de Design Tokens.
  3. Estruturação de tokens base e semânticos.
  4. Arquitetura e padronização dos componentes.
  5. Criação da documentação em Figma e Notion.
  6. Alinhamento contínuo com a equipe de desenvolvimento.
  7. Definição de diretrizes de uso e governança.
  8. 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.

  1. 01

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

  2. 02

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

  3. 03

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

  4. 04

    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.

  1. Mais de 100 páginas estruturadas sobre uma única base visual e técnica.
  2. Redução do tempo de criação de páginas de aproximadamente 6 dias para meio dia.
  3. 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.

  1. Eliminação de inconsistências entre produtos e áreas do ecossistema.
  2. Redução significativa de retrabalho relacionado à interface.
  3. Governança compartilhada entre Design e Desenvolvimento.
  4. 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

Copyright Eduardo Amaral © 2026