Boas práticas para recursos de marca White Label

O White Label Lite tem campos separados para logótipo claro, logótipo escuro, favicon, cor principal e cor de destaque. Este guia ajuda a preparar um kit de marca claro, usar os ficheiros aceites pelo formulário e testar o resultado antes de os clientes o verem.

Carregar logótipos

Existem dois carregamentos: um logótipo claro para fundos claros e um logótipo escuro para fundos escuros. Carregue ambos quando disponíveis e use a pré-visualização de Branding para confirmar que cada um permanece legível no tema correspondente.

Tipos de ficheiro aceites:

• PNG: melhor para transparência e recomendado na maioria dos casos.
• JPG / JPEG: funciona para logótipos com fundo sólido; não suporta transparência.
• SVG: ainda não é suportado, pois estamos a trabalhar na representação segura de scripts incorporados.

Tamanho máximo: 1 MB por carregamento. Se o ficheiro for maior, comprima-o com o TinyPNG ou pngquant. Normalmente, um logótipo fica abaixo de 50 KB sem perda visível de qualidade.

Tamanho de origem recomendado: use um original nítido e com resolução razoavelmente alta, não um ícone minúsculo. Um logótipo quadrado ou quase quadrado é um ponto de partida seguro. Uma marca nominativa mais larga também funciona se permanecer legível na pré-visualização.

Fundos:

• Recomenda-se vivamente um PNG transparente. O fundo do painel e a faixa de cabeçalho dos e-mails de marca podem não ser totalmente brancos, e um fundo colorido de contorno rígido no logótipo terá mau aspeto.
• Num monograma ou ícone, a transparência permite uma integração limpa em qualquer fundo.
• Se o logótipo tiver um fundo colorido fixo, mantenha-o coerente com a cor principal ou de destaque escolhida no painel.

Favicon

O favicon tem o seu próprio carregamento separado e não é criado automaticamente a partir do logótipo. Use um ícone quadrado simples em PNG, JPG ou ICO, até 1 MB. Um monograma ou símbolo funciona normalmente melhor do que uma marca nominativa completa no tamanho de um separador do navegador.

Mantenha o favicon quadrado. Use os campos de logótipo claro e escuro, e não o favicon, para a marca nominativa completa.

Escolher cores

Os dois campos são:

• Cor principal: a cor central de botões, ligações e estados ativos.
• Cor de destaque: uma cor de apoio para realces.

Introduza cores hexadecimais, por exemplo #3b82f6. Use a pré-visualização ao vivo para ver o resultado antes de guardar.

Escolher a cor principal

A cor principal é a que os visitantes mais veem. Tenha três pontos em conta:

• Teste em fundos claros e escuros. O painel suporta ambos os temas. Uma cor que se destaca no branco pode desaparecer no escuro.
• Mantenha reconhecíveis as cores de estado. Evite uma cor de marca muito semelhante às cores de aviso, sucesso ou ações destrutivas. Azul, roxo, verde-azulado, carvão ou outra cor distinta tende a ser mais legível.
• Tons sólidos de saturação média são melhores do que quase branco ou quase preto. Faça o teste do botão: a cor destacaria um botão num fundo branco? Se a resposta for «mal se nota», é demasiado clara.

Escolher a cor de destaque

A cor de destaque apoia a principal. Deve:

• Ser visivelmente diferente da principal, sem dois tons quase azuis
• Complementar a principal sem competir com ela
• Ser claramente legível ao lado da principal

Um padrão eficaz: principal igual a uma cor de marca profunda e saturada; destaque igual a um tom complementar mais claro. Exemplo: principal #2563eb (indigo-600), destaque #10b981 (emerald-500).

Contraste e acessibilidade

A interface pode colocar texto claro sobre a cor principal. Escolha um tom que mantenha legíveis os rótulos dos botões. Um pastel muito claro pode parecer atraente numa amostra, mas perder contraste num botão real.

Um verificador como o da WebAIM ajuda a testar a combinação de texto e fundo. Use a pré-visualização para a verificação final, pois a interface circundante também influencia a perceção da cor.

Cores que quase sempre funcionam: azul profundo, roxo profundo, carvão, verde-azulado escuro e bordô profundo. Cores que falham frequentemente: pastéis claros, cinzento médio, amarelo médio e néon.

Nome visível

O nome visível aparece no painel e webmail de marca e nas superfícies de e-mail suportadas. Três padrões eficazes:

• «E-mail SuaMarca»: indica claramente que é o serviço de e-mail. Profissional e adequado para revendedores.
• «SuaMarca»: apenas o nome da marca. Mais limpo e adequado quando o e-mail pertence a um conjunto de produtos mais amplo.
• «Painel SuaMarca»: realça a superfície. Útil para distinguir vários produtos de marca.

Mantenha-o suficientemente curto para reconhecimento imediato. Verifique a pré-visualização num ecrã estreito e em ambos os temas em vez de confiar num limite de caracteres.

O nome visível aparece em:

• Navegação do painel e webmail
• Início de sessão de marca e títulos do navegador
• Superfícies suportadas de e-mails transacionais

Antes de guardar

Antes de clicar em Save changes, confirme que os ficheiros têm menos de 1 MB, os logótipos são legíveis na pré-visualização correspondente, o favicon é um ícone quadrado simples, a cor principal tem contraste legível e o nome visível soa natural como nome de remetente.

Depois de guardar, abra o host de marca ativo numa janela privada. Assim não confunde uma imagem ou favicon em cache com a versão atual.

Processo simples para preparar recursos

1. Comece pelos ficheiros originais do logótipo, não por uma captura de ecrã ou ficheiro copiado de um site.
2. Exporte uma versão legível em fundos claros e outra em fundos escuros.
3. Crie um favicon quadrado separado a partir da parte mais reconhecível da marca.
4. Adicione o nome e as cores em Branding e compare as pré-visualizações de e-mail e webmail.
5. Guarde, teste o host ativo num telemóvel e navegador de computador e conserve os originais onde a equipa os possa atualizar.

Atualizar mais tarde

Pode atualizar os recursos mais tarde sem substituir o registo DNS de um host de marca existente. Verifique sempre o host ativo depois de uma alteração visual.

Se carregar o recurso errado ou escolher uma cor ilegível, corrija-o em Branding e guarde novamente. Considere a cache normal do navegador ao verificar a substituição.

Automatizar com API e MCP

Se a integração tiver as permissões necessárias, a API REST ou MCP pode gerir definições e recursos da marca. Aplicam-se os mesmos tipos e limite de 1 MB. Use o painel e a pré-visualização para a verificação visual final.

Consulte o Guia da API e MCP para Branding White Label para conhecer as operações suportadas.

Situações frequentes

«O logótipo parece bom na barra lateral, mas fica desfocado no telemóvel.» Carregue um original mais nítido e de maior resolução, guarde-o e teste o host ativo no telemóvel. Não confie apenas na pré-visualização do navegador de computador.

«A cor principal funciona no painel, mas o texto dos botões é difícil de ler.» Escolha um tom mais escuro ou saturado e verifique-o na pré-visualização e no host ativo.

«O logótipo tem um fundo colorido que não combina com o painel.» Exporte uma versão PNG transparente quando possível. Compare as versões clara e escura nos fundos correspondentes.

«Posso usar um logótipo diferente no e-mail e no painel?» Use as variantes clara e escura fornecidas por Branding. Teste a pré-visualização de e-mail suportada e as superfícies ativas dos clientes antes de prometer um aspeto.

«E o modo escuro?» O painel suporta temas claro e escuro e permite carregar um logótipo separado para cada um. O logótipo claro aparece em fundos claros e o escuro em fundos escuros. Assim pode usar tinta escura sobre claro e um logótipo branco ou claro sobre escuro.

«Posso carregar um favicon separado do logótipo?» Sim. O favicon tem o seu campo (PNG, JPG ou ICO, máximo 1 MB) e não deriva do logótipo. Carregue um ícone simples e distinto para o separador do navegador.

Próximos passos

• Configurar o White Label Lite: ativação e configuração DNS.
• O que mantém a marca TrekMail: o que os clientes ainda podem ver da TrekMail.
• Perguntas frequentes sobre preços do White Label Lite: questões de faturação e moeda.
• Guia da API e MCP para Branding White Label: carregue logótipos e configure a marca por REST ou MCP.