Roteiro do Sul

As primeiras telas ajudavam a visualizar a proposta, mas ainda eram poucas e genéricas demais para sustentar jornadas maiores. Cores, espaçamentos, estados e comportamentos apareciam como decisões locais, sem uma estrutura compartilhada.

A partir daí, o trabalho passou a ser separar o que era apenas solução de tela do que precisava virar regra de produto.

Para visitantes, a jornada vai de descobrir e explorar até avaliar, escolher e entrar em contato. Para negócios locais, começa no cadastro e segue por publicação, gestão e acompanhamento.

Essa diferença orientou o sistema: compartilhar linguagem, estados e padrões onde havia recorrência, mas preservar estruturas específicas quando a tarefa exigia outra densidade ou outro comportamento.

O objetivo não era descartar o rascunho, mas entender o que valia preservar e o que precisava virar regra. Parti das telas existentes para identificar padrões recorrentes, inconsistências e decisões que pediam uma estrutura comum.

A base foi organizada em camadas, com foundations, tokens semânticos, componentes, padrões e regras responsivas. Assim, novas jornadas passaram a partir de critérios compartilhados, em vez de exigir novas decisões a cada tela.

Em vez de deixar cor, tipografia e dimensões dependerem de cada composição, esses valores foram estruturados em foundations e tokens semânticos. Isso separou aparência de função e reduziu a dependência de ajustes tela por tela.

Brand / 500 concentra o valor visual. Brand / Default descreve o papel daquela cor no produto.

Escalas de tipografia, spacing, radius, margens e áreas de interação passaram a funcionar como referências compartilhadas. Isso reduziu variações entre telas e deu critérios mais claros para novas composições.

O alvo mínimo de toque de 44 px entrou como requisito do sistema, junto das margens responsivas e safe areas.

Ao levar o produto para Mobile e diferentes larguras de Web, margens e grids foram definidos antes de multiplicar composições. O sistema trabalha com 24 px no Mobile, 120 px em 1440, 40 px em 1280 e 32 px em 1024.

O objetivo era reaproveitar a mesma lógica de produto sem simplesmente ampliar ou comprimir a mesma tela.

A Home prioriza descoberta, o perfil reúne o contexto necessário para avaliar um negócio e o painel desloca a prioridade para tarefas de operação. A estrutura muda conforme a tarefa, mas tipografia, estados, espaçamento e componentes continuam partindo da mesma base.

A largura disponível foi usada para manter mais contexto visível ao mesmo tempo. Na Home, isso amplia a descoberta; na busca, permite trabalhar filtros e resultados em conjunto; no painel do negócio, concentra indicadores e ações de gestão.

A continuidade com o Mobile vem das regras compartilhadas, não da repetição do layout.

Mobile e Web compartilham identidade, tokens, hierarquia, estados e padrões. O Mobile trabalha de forma mais compacta e progressiva; o Web suporta comparação, visão ampla e tarefas de gestão com mais informação simultânea.

A consistência vem das decisões compartilhadas, não da repetição do layout.

O sistema inclui contraste AA, áreas mínimas de toque de 44 px, foco visível, sinais que combinam cor e texto e estados para loading, empty, error e success.

Também foram previstos estados de confirmação para ações sensíveis. Isso mantém o comportamento previsível quando o produto está carregando, sem resultado, falha ou conclui uma ação.

A diferença entre o ponto de partida e a entrega final ajuda a explicar o papel do sistema. O projeto começou com um rascunho curto no Figma e evoluiu para 174 telas, 111 decisões estruturadas, 78 componentes-base e 37 fluxos reutilizáveis.

Sem critérios compartilhados, cada expansão teria multiplicado decisões locais junto com as telas.

Com foundations, padrões e regras responsivas definidos, novas telas podem reaproveitar critérios já testados em vez de recomeçar por cor, tipografia, espaçamento, estados ou comportamento.

As frentes abaixo representam possibilidades de evolução do produto. Não são resultados já medidos.