Quando tudo parece diferente,
nada parece confiável.

A Physis é uma plataforma de gestão de ativos industriais utilizada por clientes como Petrobras, Comgás e EMAE. Com mais de 20 micro serviços evoluindo ao longo dos anos, foi identificado que cada micro serviço havia desenvolvido sua própria interpretação da linguagem visual. Componentes equivalentes apresentavam diferenças de aparência e comportamento, tornando a experiência menos previsível para os usuários e a evolução do produto mais custosa para a empresa. A Physis tem mais de 20 micro serviços, cada um com sua própria interpretação visual.

As inconsistências encontradas foram documentadas e foi proposto a criação de um Design System para unificar padrões, reduzir divergências e apoiar a evolução do produto em escala. A aprovação não foi imediata e exigiu alinhamento gradual com o time e a liderança. Documentei as inconsistências e propus um Design System pra unificar os padrões da plataforma.

Ninguém decidiu ter um produto inconsistente. As exceções foram se acumulando pouco a pouco, até que a plataforma perdeu uma linguagem comum, reduzindo a fluidez das interações e multiplicando o trabalho necessário para corrigir, testar e evoluir um mesmo componente. Ninguém decidiu ser inconsistente — as exceções se acumularam até a plataforma perder uma linguagem comum.

Sem escala de cores

Cada micro serviço seguia seu próprio padrão. Um simples ajuste de contraste gerava novas cores dependendo de quem implementava. No fim, variáveis como BlueNavy já nem eram mais azuis. Cada micro serviço seguia seu próprio padrão — nomes como BlueNavy nem eram mais azuis.

Ícones diferentes para o mesmo uso

Cada micro serviço seguia seu próprio padrão. Um simples ajuste de contraste gerava novas cores dependendo de quem implementava. No fim, variáveis como BlueNavy já nem eram mais azuis. Cada micro serviço seguia seu próprio padrão — nomes como BlueNavy nem eram mais azuis.

Tipografia sem critério

Sem padrões tipográficos compartilhados, cada tela comunicava prioridades diferentes. O que deveria chamava atenção em uma área parececia secundário em outra enfraquecendo a hierarquia visual e tornando a leitura menos eficiente. Sem padrões tipográficos, cada tela tinha prioridades visuais diferentes.

Espaçamentos e bordas livres

Sem um múltiplo base, cada componente possuía valores definidos individualmente, o que reduzia a reutilização e tornava a evolução da interface mais lenta. Sem um múltiplo base, cada componente tinha valores próprios — menos reutilização e evolução mais lenta.

Campos de entrada sem padrão

O elemento mais recorrente da interface era o mais inconsistente. Tamanhos, bordas e estados variavam por tela, reduzindo a fluidez das interações e multiplicando o trabalho necessário para utiliza-los. O elemento mais usado era o mais inconsistente — tamanhos, bordas e estados variavam a cada tela.

Antes de criar os componentes, definimos as regras que estruturariam o sistema. Analisamos as interfaces existentes para identificar padrões e transformamos essas decisões em tokens, facilitando a manutenção e evolução da plataforma. Assim, uma alteração em um token é refletida automaticamente em todos os componentes que o utilizam, sem ajustes manuais. Definimos as regras do sistema em tokens — mudar um token atualiza todos os componentes automaticamente.

Escala de cores

Criada uma escala tonal completa com nomes semânticos. Se a cor mudar, o nome continua fazendo sentido. Isso resolveu o problema de variáveis como BlueNavy que já tinham virado outra cor. Criei uma escala tonal com nomes semânticos — se a cor mudar, o nome continua fazendo sentido.

Theme mapping

Além da escala, foi feito o theme mapping: cada token passou a corresponder a um contexto, claro ou escuro. Antes, a troca de tema era feita manualmente pelos devs. Com o mapping, isso passará a ser automático. Também criei o theme mapping: cada token corresponde a um contexto claro ou escuro, tornando a troca de tema automática.

Ícones

Uma biblioteca única definida para toda a plataforma, usada via SVG. Acabando com a variação de estilo de ícones entre interfaces.

Tipografia

Variáveis de tipo com família, tamanho, peso, line-height, letter-spacing e paragraph-spacing fixos. Sentence case padronizado em todos os títulos, encerrando a variação entre telas. Variáveis de tipo fixas (família, tamanho, peso, espaçamento) e sentence case padronizado em todos os títulos.

Espaçamentos e raio de canto

Múltiplos de 4 como base em todo o sistema. Um critério simples que elimina valores soltos e sem relação entre si, e facilita o desenvolvimento. Múltiplos de 4 como base — um critério simples que elimina valores soltos e facilita o desenvolvimento.

Botões

Três hierarquias definidas: primário, secundário e terciário. A cor azul foi mantida em todos os casos para que o usuário nunca se confunda sobre o que é clicável. Três hierarquias — primário, secundário, terciário — sempre na mesma cor, pra nunca confundir o que é clicável.

Campos de entrada

Os elementos foram padronizado, com variações, estados e comportamentos definidos.

Documentação

Todas as escolhas e regras do design system foram documentadas para garantir consistência visual, reduzir o tempo de criação de novas telas e facilitar a comunicação de stakholders. Documentei todas as regras do sistema pra garantir consistência e agilizar a criação de novas telas.

Com o sistema criado, o próximo passo era aplicá-lo. Telas novas já nasciam usando os componentes. As antigas precisavam ser reconstruídas. O desafio era que poucas das telas existentes tinha sido construída com componentes, não havia como trocar uma instância e atualizar facilmente. A ideia é que a migração ocorrá nos intervalos entre outras demandas, as telas vão sendo reconstruídas uma a uma. Telas novas já nascem com os componentes; as antigas são reconstruídas aos poucos.

As telas que passaram pelo processo conversam entre si e parecem parte do mesmo produto, gerando mais confiança para o usuário, afinal, quando tudo parece diferente, nada parece confiável. As telas migradas conversam entre si e parecem parte do mesmo produto, gerando mais confiança pro usuário.

Obrigada por ler até aqui :)