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.

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.

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.

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.

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.

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.

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.

Próximo Case

Nossa Energia

Portal editorial de conteúdos conectado ao design system