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. 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. - 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. - 01 Inventário de padrões existentes no ecossistema Petrobras para entender redundâncias, inconsistências e lacunas. - 02 Definição de fundações visuais e estruturais para criar uma linguagem comum entre portal, site principal e novas páginas. - 03 Documentação manual no Notion com exemplos, anatomia, specs, variações, estados e orientações de implementação. - 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. - 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](https://uxdudu.notion.site/Petro-DS-v2-2d88fb2f824449078175f0599d7b0b92?pvs=73) 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](https://eduardoamaral.me/projetos/petrobras-nossa-energia/) Source: https://eduardoamaral.me/projetos/petrobras-design-system/ Language: pt-BR