HG Pagamentos

Contexto

A HG Pagamentos é a subadquirente do Grupo Hélio Gomes — a camada que fica entre o lojista e a adquirente, processando a transação e assumindo parte do risco. É um negócio que só existe se as pessoas confiarem nele: quem vende precisa acreditar que o dinheiro chega, e quem compra precisa acreditar que o dado não vaza.

O sistema é desenvolvido internamente pelo grupo, o que significa que a marca não ia ficar só em papelaria. Ela ia parar dentro de um produto — em telas de checkout, em painéis de lojista, em comprovantes. Isso mudou o peso das decisões: tudo que eu desenhasse precisava sobreviver a 24 px de altura numa barra de navegação, não só a uma capa de apresentação.

Posicionamento, propósito e os seis valores emocionais da marca chegaram definidos pelo cliente. Meu trabalho começou onde a estratégia terminou: traduzir aquilo em forma.

O problema

Os atributos que o cliente queria comunicar são, lidos juntos, uma contradição:

Sólida e confiável · Moderna e tecnológica · Séria e objetiva · Amigável e acessível

Solidez e seriedade puxam para o vocabulário bancário — geometria rígida, azul institucional, serifa, simetria. Foi assim que o setor financeiro se desenhou por setenta anos, e funciona: parece seguro. O problema é que também parece inacessível, e o cliente da HG não é o correntista de banco grande. É o empreendedor pequeno, que já foi tratado com desconfiança por instituição financeira antes e não quer repetir a experiência.

Puxar para o outro lado — o vocabulário de fintech, cores quentes, formas orgânicas, tom informal — resolve a acessibilidade e destrói a credibilidade. Ninguém entrega o faturamento do mês para uma marca que parece um aplicativo de entrega.

A marca precisava ocupar as duas posições ao mesmo tempo, e não a média morna entre elas.

Meu papel

• Conceito e desenho do símbolo
• Construção geométrica e documentação de proporções
• Customização tipográfica da logomarca sobre a Lexend
• Definição da família tipográfica de apoio
• Sistema de cor
• Variações da marca e diagramação do deck de apresentação

O que não foi meu: o posicionamento, o propósito e os seis valores emocionais vieram prontos do cliente. Eu não conduzi pesquisa de mercado nem entrevistei lojistas — a estratégia estava definida quando entrei, e o case aqui é o de tradução visual, não o de descoberta.

Processo

Comecei pela contradição, não pelo esboço. Antes de desenhar qualquer coisa, separei os quatro atributos em dois pares opostos e assumi que a solução não estava em escolher um lado, mas em atribuir cada eixo a um elemento diferente da identidade: a forma carregaria a solidez, e a cor e a tipografia carregariam a proximidade. Se cada camada resolve uma metade, a marca inteira consegue ser as duas coisas sem ficar ambígua.

Isso deu um critério de decisão para o resto do projeto. Toda vez que uma escolha apareceu — arredondar mais ou menos, escurecer ou saturar o azul —, a pergunta não foi "qual fica mais bonito", foi "esse elemento está resolvendo o eixo que lhe cabe".

Decisões-chave

1. O símbolo como equação, não como ilustração

A tentação óbvia num negócio de pagamentos é desenhar o objeto: cartão, cifrão, cadeado. Todos já estão gastos, e todos comunicam uma coisa só.

Em vez disso, montei o símbolo como a soma de três ideias que o negócio precisa sustentar ao mesmo tempo:

• Carteira — valores e transações. Segurança, praticidade, controle.
• Pagamentos — o propósito literal: simplificar, pagar, proteger.
• Interação — trocas rápidas entre pessoas e negócios, contato direto.

O resultado são três retângulos de cantos arredondados sobrepostos em profundidade. Empilhados, leem como cartões dentro de uma carteira. Mas o recorte inferior esquerdo os faz ler também como um balão de conversa — e essa segunda leitura é o que traz a proximidade que a forma sólida, sozinha, não traria.

A ambiguidade é deliberada. É o ponto inteiro da marca, e é a razão de ela funcionar nos dois eixos ao mesmo tempo.

2. A geometria documentada antes de a marca ser aprovada

O símbolo ia viver dentro de um produto desenvolvido internamente, por desenvolvedores que não iam me chamar para perguntar qual é o raio do canto. Se a construção não estivesse cotada, cada reimplementação ia inventar a sua — e três meses depois existiriam quatro versões do mesmo símbolo no sistema.

Então documentei a construção junto com o desenho, não depois: raio de 105 px sobre uma largura de 1300 px, com as proporções de cada placa fixadas em relação à principal.

O raio é a decisão que carrega o eixo da acessibilidade. Cantos vivos teriam dado a solidez pedida e nada além; um raio grande demais teria virado a marca em algo leve e descartável. O valor escolhido é o ponto em que a forma ainda lê como base sólida, mas já não lê como institucional.

3. Customizar duas letras em vez de desenhar um alfabeto

A logomarca partiu da Lexend — uma fonte desenhada para legibilidade, o que importa quando o nome vai aparecer reduzido dentro de um checkout.

Desenhar um wordmark do zero teria sido mais autoral e pior para o cliente: mais caro, mais lento e impossível de estender depois sem me chamar de volta. Em vez disso, customizei só o que precisava de assinatura — o T e o H, com uma inclinação sutil no topo:

A inclinação faz duas coisas ao mesmo tempo. Quebra a rigidez da grade — que é a parte "amigável" — e sugere movimento ascendente, que é o crescimento que o lojista está comprando. Duas letras alteradas mudam a temperatura do conjunto sem custar um alfabeto inteiro.

Para a comunicação corrente, Poppins: geométrica, clara, sem o peso institucional de uma grotesca clássica.

4. Três azuis com funções distintas, não uma paleta de gosto

O azul é o clichê do setor financeiro, e usá-lo foi uma escolha consciente: contrariar a expectativa de cor num negócio que vende confiança custa mais do que rende. O trabalho não foi fugir do azul, foi dividi-lo em papéis:

• #1A82FF — o azul vibrante. Ação, movimento, o que se clica.
• #0C437A — o azul escuro. Estrutura e profundidade; é ele que sustenta o eixo "sólida e confiável".
• #B3DBFF — o azul claro. Respiro e leveza, o contraponto que impede o conjunto de ficar pesado.
• #282828 — o neutro. Texto e wordmark, para que a cor não brigue com a leitura.

A distinção importa porque a marca ia para dentro de um produto. Uma paleta escolhida por harmonia vira discussão toda vez que alguém precisa decidir a cor de um botão. Uma paleta com funções atribuídas responde sozinha.

Resultado

A marca foi aprovada e aplicada, com o símbolo, o wordmark, a construção cotada, a família tipográfica e o sistema de cor documentados no deck de apresentação.

As variações cobrem os fundos em que a marca ia precisar existir — claro, azul e azul escuro — mantendo o símbolo legível em cada um:

Não tenho métrica de negócio deste projeto. Reconhecimento de marca, impacto em conversão e adesão de lojistas são dados que ficaram com o cliente, e não vou inventar número para fechar um case com um gráfico. O que dá para verificar é o que está acima: a marca existe, é consistente e é reproduzível.

O que ficou pendente

O entregável é um deck de apresentação, não um manual de marca. Falta o que um brandbook resolveria:

• Regras de uso indevido — o que não fazer com o símbolo (distorcer, recolorir, aplicar sobre fundo de baixo contraste).
• Área de respiro e redução mínima — a construção está cotada, mas o espaço ao redor e o menor tamanho legível não estão.
• Critério entre as variações — as três existem, mas nada diz qual usar em qual situação.

O que eu faria diferente

Investi a documentação toda na construção do símbolo e quase nenhuma nas regras de uso — e essa proporção estava invertida em relação à necessidade real do cliente.

A geometria cotada era a parte que me interessava desenhar, e me convenci de que era também a mais importante porque o símbolo ia para dentro de um produto. Só que quem reimplementa o símbolo faz isso uma vez. Quem decide qual variação usar num post, num contrato ou num fundo escuro faz isso toda semana, e para essa pessoa eu não deixei nada. Entregar três variações sem critério de escolha não é dar liberdade ao cliente — é devolver para ele uma decisão de design que era minha.

Hoje eu trocaria metade do detalhamento geométrico por uma página de "quando usar qual", mesmo que isso deixasse a apresentação menos bonita. E teria definido a redução mínima na mesma sessão em que defini o raio do canto, porque as duas decisões são a mesma decisão vista de distâncias diferentes.