Back

Petrobras

Petrobras Design System, the foundation of the digital ecosystem.

  • Design System
  • documentation

Context

A shared foundation for a growing digital ecosystem.

Petrobras needed a common visual and technical foundation for more than 100 pages across its digital ecosystem. I led the Design System architecture, component standardization, documentation and adoption with Design and Development.

The delivery-time figures shown in this case are project-reported references; they describe the intended improvement from the new system and should be read alongside the evidence and limits of the project.

Petrobras Design System case cover

Challenge

Scaling consistency without blocking evolution.

Petrobras had more than 100 pages built without a shared visual language. The result was inconsistency, slower delivery, and recurring rework between design and development.

The challenge was to create a shared foundation that could serve different products and teams while remaining viable within the Liferay platform.

Before

More than 100 pages built without a shared foundation.

Each product area evolved with isolated interface decisions, which increased visual inconsistency and made common page patterns expensive to reproduce.

Design and Development lacked a common source for tokens, components, responsive behavior, and implementation guidance.

How we solved it

Leadership from architecture to adoption.

  1. Design System leadership.
  2. Definition of the Design Token architecture.
  3. Structuring base and semantic tokens.
  4. Component architecture and standardization.
  5. Documentation in Figma and Notion.
  6. Continuous alignment with the development team.
  7. Definition of usage and governance guidelines.
  8. Leadership of the system's internal adoption.

Foundations

Design Tokens

Colors, typography, spacing, and sizes organized as style variables to reduce ad-hoc decisions.

Components

Buttons, cards, tabs, accordions, and interface patterns documented with states, anatomy, and usage rules.

Sections

Reusable blocks like hero banners, menus, footers, and content areas to speed up editorial pages.

Templates

Page models by level, error state, and institutional structure to maintain consistency across flows and teams.

Motion

Motion guidelines to direct transitions, feedback, and behaviors without breaking performance.

Accessibility

Contrast, readability, focus, structure, and inclusion rules to support a more robust public experience.

Implementation

Balancing design needs and Liferay constraints.

One of the project's main challenges was balancing Design needs with the technical constraints imposed by the Liferay platform.

Because development was handled by a third-party company, several decisions required negotiation to preserve the user experience without compromising technical feasibility. This process directly influenced the component architecture and the system's evolution.

Process

From mapping to reusable editorial sections.

  1. 01

    Inventory of existing patterns across the Petrobras ecosystem to understand redundancies, inconsistencies, and gaps.

  2. 02

    Definition of visual and structural foundations to create a common language across the portal, main site, and new pages.

  3. 03

    Manual Notion documentation with examples, anatomy, specs, variants, states, and implementation guidelines.

  4. 04

    Organization of components, sections, and templates to bring design, content, Liferay, and development closer together.

Manual documentation

Specs as an alignment tool.

Documentation was a central part of the case. Every decision needed to be understandable outside Figma: variations, states, composition rules, responsive behavior, and usage limits were described to guide implementation across the Petrobras ecosystem.

Governance

Continuous evolution without compromising stability.

Any designer on the team could propose improvements or new components. Changes were evaluated jointly by Design and Development.

Incremental changes were released as patches, while structural changes created new component versions to avoid large-scale impact.

Adoption

Documentation and training as alignment tools.

Documentation was the main alignment tool between teams. Weekly presentations with designers, developers, and stakeholders shared updates, validated decisions, and reinforced the correct use of components.

Accessible documentation, continuous training, and close support contributed to consistent adoption of the system across all new projects.

Impact

A shared foundation that changed the scale of delivery.

  1. More than 100 pages structured on a single visual and technical foundation.
  2. Page creation time reduced from approximately six days to half a day.
  3. Foundation used by Petrobras' institutional portal and Content Hub.

Evidence

The living documentation of 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

Foundation gallery with colors, typography, breakpoints, effects, borders, icons, spacing, illustrations, sizing, and images.

Components

Notion catalog organized by groups like Actions and Content, with buttons, accordion, avatar, bullet, and cards.

Anatomy specs

Example of manual documentation for the Bullet component, detailing elements, function, colors, and composition rules.

Layout specs

Example of horizontal variant with measurements, properties, and tokens like padding, radius, gaps, width, and height.

Results

A more consistent and predictable digital ecosystem.

  1. Elimination of inconsistencies across products and areas of the ecosystem.
  2. Significant reduction in interface-related rework.
  3. Shared governance between Design and Development.
  4. Greater predictability for Design and Development.
View Petro DS v2 documentation

Connection

The design system was the bridge between the Petrobras cases.

Nossa Energia can be understood as a direct application of this foundation: an editorial portal built on previously defined components, sections, and templates.

This relationship is the most important point of the case: the design system created a foundation for multiple digital experiences with more consistency and speed.

Next Case Study

Nossa Energia

Editorial content hub connected to the design system

Copyright Eduardo Amaral © 2026