A Aton Engenharia atua em engenharia e telecomunicações desde 1988. O Saffira é um software que monitora grandes extensões de floresta em tempo real, por vídeo, para ajudar na identificação e no acompanhamento de focos de incêndio.
Quando comecei a trabalhar no produto, diferentes partes do sistema haviam evoluído sem uma base visual comum. Componentes parecidos tinham comportamentos diferentes, as telas não mantinham a mesma hierarquia e o dark mode não era aplicado de forma consistente.
Também havia problemas de adaptação para diferentes tamanhos de tela e pontos em que a quantidade de informação tornava mais difícil perceber o que realmente precisava de atenção.
Em um sistema de monitoramento, inconsistência não é apenas uma questão estética.
Se um botão muda de comportamento entre telas, se informações com prioridades diferentes recebem o mesmo destaque ou se cada fluxo organiza os dados de uma maneira, o usuário precisa reaprender parte da interface enquanto trabalha.
No Saffira, eu precisava reduzir esse esforço sem reconstruir um produto que já estava em uso.
Evoluir o que já funcionava e criar padrões para o restante
Em vez de começar um Design System do zero, mapeei os componentes e padrões que já apareciam no produto.
Separei o que podia ser mantido, o que precisava ser corrigido e o que ainda não tinha uma regra definida.
A partir desse levantamento, comecei a construir uma base comum para tipografia, cores, estados, componentes e organização da informação.
A intenção era evoluir o produto sem romper desnecessariamente com o que usuários e desenvolvimento já conheciam.
O Design System precisava organizar o que funcionava e definir as regras para o que ainda não tinha consistência.
Documentei componentes e seus estados, mas também as condições de uso: quando um botão deveria ser primário, quando uma ação secundária fazia mais sentido, como apresentar loading, quando utilizar confirmação e quais combinações deveriam ser evitadas.
Um Design System não resolve inconsistência apenas oferecendo componentes. Ele também precisa reduzir a quantidade de decisões diferentes que cada pessoa toma para resolver o mesmo problema.
Também reorganizei tipografia, cores, espaçamentos e hierarquia do dark mode, além de incorporar requisitos de acessibilidade à construção dos padrões.
Documentação de componentes
A documentação passou a registrar não apenas como cada componente deveria parecer, mas como deveria se comportar e em quais situações deveria ser utilizado.
Isso criou uma referência mais clara tanto para Design quanto para Desenvolvimento e reduziu decisões improvisadas durante a construção das telas.
Do componente para o fluxo
O trabalho começou nos elementos do sistema, mas não ficou restrito a eles.
Ao revisar determinados fluxos, encontrei telas com informação demais competindo pelo mesmo espaço.
Nesses casos, reorganizei o conteúdo para deixar mais evidente o que o operador precisava enxergar primeiro e criar espaço para informações que ainda precisavam entrar no produto, como visualizações de dados e gráficos.
Os fluxos passaram a usar a mesma lógica dos componentes: estados previsíveis, hierarquia mais clara e relações mais consistentes entre ações e informações.
A reorganização também ajudou a aproximar telas que antes pareciam ter sido construídas a partir de critérios diferentes.
O produto passou a ter uma linguagem visual e de interação mais consistente, com componentes, estados e comportamentos definidos em um Design System que continua sendo atualizado conforme o Saffira cresce.
Para Desenvolvimento, isso criou uma base mais segura para novas entregas. Em vez de decidir novamente cores, estados, espaçamentos e comportamentos a cada funcionalidade, o time passou a trabalhar a partir de padrões já documentados.
A manutenção frequente do Design System também tornou mais simples incorporar novos componentes e revisar os existentes sem perder a consistência do produto.
Outro ganho foi a passagem de bastão. Com decisões, regras e comportamentos documentados, novas pessoas conseguem entender com mais rapidez como o produto funciona e quais padrões devem seguir.