Identidade visual
A aba Configurações → Identidade visual é onde você define o logo, o favicon, as cores primária e de destaque, a tipografia e o texto do rodapé. Tudo o que você muda aqui aparece no cabeçalho da barra lateral, na aba do navegador, na tela de login, nos e-mails transacionais e no formulário público de visitantes.
Abrir a aba Identidade visual
Na barra lateral, clique em Configurações. A primeira aba — Identidade visual — já vem selecionada. O formulário se divide em quatro seções: Tipografia, Logo & Imagens, Cores e Rodapé.
Tipografia
Título da plataforma
O texto que aparece ao lado do logo no cabeçalho da barra lateral e na aba do navegador. A maioria das igrejas usa o nome da marca — "Igreja da Graça", "Hope City", "Eschatos". Mantenha curto; títulos longos quebram de forma estranha na barra lateral do celular.
Subtítulo
Uma segunda linha sob o título na barra lateral — útil para "Colômbia", "Sede" ou o que diferencia esta organização das irmãs. Deixe em branco se não quiser uma segunda linha.
Logo e imagens
Logo
Clique em Enviar para escolher um arquivo do seu computador, ou Biblioteca de mídia para reusar uma imagem já no armazenamento. Em qualquer caso, a imagem passa por um diálogo de recorte quadrado antes de salvar — arraste o enquadramento para centralizar seu logo e clique em Aplicar.
TIP
Use PNG transparente ou SVG. PNG é mais compatível (todo navegador, todo cliente de e-mail); SVG é mais nítido em telas retina, mas alguns clientes de e-mail antigos exibem como ícone de imagem quebrada. Na dúvida, envie PNG.
Tamanho recomendado: pelo menos 256×256. A barra lateral renderiza o logo em 14×14 (unidades Tailwind, ~56px); o cabeçalho de e-mail usa 80×80. Qualquer coisa menor que 128px fica embaçada em telas retina.
Favicon
Mesmo fluxo de envio, mas recortado em 32×32 ou 64×64. O favicon é o que aparece nas abas e favoritos do navegador. Também é o que o iOS usa como ícone de tela inicial se o manifesto PWA não estiver configurado — veja Configuração PWA para a resposta melhor.
Formatos aceitos: PNG, ICO, SVG. O diálogo de recorte limita a saída em 192px para o arquivo ficar pequeno.
Cores
Cor primária
A cor usada para botões, links, o item ativo da barra lateral e abas ativas. Escolha algo que contraste bem com texto branco — os rótulos de botão são brancos em ~14px de peso, então cores primárias muito claras vão falhar em checagens de acessibilidade.
Cor de destaque
Uma cor secundária para badges, estados de hover da barra lateral e botões de ação não primários. Geralmente um tom mais claro da primária — por exemplo primária #3563a8 com destaque #6b94d6. A prévia ao vivo no fim da seção Cores mostra as duas lado a lado para você conferir o par.
Você pode digitar um código hex direto ou usar a amostra do seletor de cores. Os dois campos ficam em sincronia.
Prévia ao vivo
Um pequeno cartão no fim da seção Cores renderiza um botão primário, um botão de destaque e dois círculos preenchidos usando o que está nos campos. Atualiza enquanto você digita — sem precisar salvar para prever.
Rodapé
O rodapé aparece no fim de cada página do app admin e em alguns e-mails transacionais. São quatro campos:
| Campo | Exemplo | Notas |
|---|---|---|
| Linha de copyright | "© Y Todos os direitos reservados." | Y é substituído pelo ano atual automaticamente. |
| Prefixo "Feito por" | "Feito por" | Texto introdutório antes do nome da sua empresa. |
| Nome da empresa | "Genio Del Comercio Digital SAS" | Aparece como hyperlink. |
| URL da empresa | https://geniodelcomerciodigital.com/ | Para onde o nome da empresa leva. Abre em nova aba. |
A maioria das igrejas deixa a linha "Feito por" padrão do GCM para dar crédito à plataforma. Se você for fazer white-label, troque pela sua própria consultoria ou omita limpando os quatro campos.
Salvar e ver a mudança
Clique em Salvar identidade visual no fim do cartão Identidade visual. O toast confirma; a barra lateral atualiza imediatamente para você, mas outras abas e outros usuários só veem a mudança após um recarregamento forçado (o toast avisa). O navegador cacheia o favicon de forma agressiva, então pode levar alguns minutos até o novo ícone aparecer na aba de todo mundo.
O que é salvo onde
Todos os valores de identidade visual caem em app_settings sob as chaves brand_* e footer_*:
brand_title,brand_subtitlebrand_logo,brand_favicon(caminhos de armazenamento)brand_primary_color,brand_accent_colorfooter_line1,footer_line2_prefix,footer_link_text,footer_link_url
O frontend lê esses valores via BrandingContext no boot do app, o que significa que uma aba nova abre já com sua identidade visual aplicada — sem flash de conteúdo sem estilo.
Identidade visual do site público
O construtor de site web tem seu próprio logo e paleta de cores, separados do branding do app admin. Veja Identidade visual do Website Builder para definir esses — eles foram intencionalmente separados para que o site voltado aos membros possa ter visual diferente do admin voltado à equipe.
Armadilhas comuns
"Enviei um logo novo e o antigo continua aparecendo." Recarregue forçado (Cmd+Shift+R / Ctrl+Shift+R). O navegador cacheia a imagem do logo; a URL muda quando você envia um novo, mas as páginas em cache mantêm o antigo até atualizar.
"Minha cor primária fica difícil de ler em fundo claro." O app admin usa sua primária como fundo de botão com texto branco. Se a razão de contraste for menor que 4.5:1, usuários de leitor de tela e qualquer um na luz forte vão sofrer. Passe sua cor por um verificador de contraste antes de salvar.
"O favicon nunca atualiza." Navegadores cacheiam favicons de forma agressiva — às vezes por dias. Tente uma janela privada para confirmar que o novo favicon está mesmo no ar antes de achar que o salvamento falhou.
Próximos passos
- Fundamentos da organização — defina o locale antes da identidade visual para renderizar no idioma certo.
- Configuração PWA — o app instalável tem o próprio esquema de cores.
- Identidade visual do Website Builder — cores do site público.