Apenas Super Admins e Admins podem acessar e modificar as configurações de Aparência. Se você não vir esta opção em Workspace Config, peça ao seu Super Admin para revisar sua função.
Acessando as Configurações de Aparência
Personalizando Cada Elemento Visual
Cor Primária
A cor primária é aplicada a botões, links ativos, estados destacados e elementos-chave da interface em toda a plataforma.- Escolha uma cor que reflita a identidade central da sua marca.
- Esta é a configuração de cor mais impactante porque aparece em toda a interface.
Cor de Fundo da Barra Lateral
O fundo da barra lateral define o tom base do painel de navegação esquerdo.- Use uma cor que crie uma separação visual clara entre a barra lateral e a área de conteúdo principal.
- Fundos escuros com texto claro geralmente oferecem melhor legibilidade.
Cor do Texto da Barra Lateral
A cor do texto da barra lateral controla a cor dos rótulos de todos os itens de navegação no menu esquerdo.- Sempre escolha uma cor com alto contraste em relação à cor de fundo da barra lateral.
- Baixo contraste dificulta a leitura dos links e reduz a acessibilidade.
Cor de Fundo de Hover da Barra Lateral
Esta cor aparece como o destaque de fundo quando um usuário passa o cursor sobre um item de navegação da barra lateral.- Ela sinaliza interatividade e ajuda os usuários a entender qual item estão prestes a clicar.
- Escolha uma cor visivelmente distinta tanto do fundo padrão da barra lateral quanto da cor do item ativo.
Aplicando Suas Escolhas de Cores
Abra o seletor de cores para cada campo
Clique na amostra de cor ao lado de qualquer um dos quatro campos de aparência — Cor Primária, Fundo da Barra Lateral, Cor do Texto da Barra Lateral ou Cor de Fundo de Hover da Barra Lateral — para abrir o seletor de cores.
Insira um código hex ou selecione uma cor
Digite o código hex exato da sua marca (ex.:
#3B5BDB) diretamente no campo de entrada, ou use o seletor visual para escolher um tom.Visualize as alterações
Revise como as cores atualizadas ficam na barra lateral e em toda a interface antes de salvar.
Redefinindo para o Tema Padrão
Se você quiser remover toda a identidade visual personalizada e restaurar o esquema de cores original do AgencyHandy, clique no botão Reset Default Settings na página de Aparência.Boas Práticas de Contraste de Cores
Um bom contraste de cores não é apenas uma preferência de design — ele afeta diretamente a legibilidade e a acessibilidade para sua equipe e clientes.Busque as proporções de contraste WCAG AA
Para texto de corpo normal, use uma proporção de contraste de pelo menos 4,5:1 entre texto e fundo. Para texto grande ou ícones, uma proporção de 3:1 é aceitável. Use uma ferramenta como o WebAIM Contrast Checker para verificar.
Evite combinações de baixo contraste
Não combine cores como texto cinza claro sobre fundo branco, ou texto amarelo sobre branco — elas não atendem aos padrões de acessibilidade e cansam os olhos durante sessões longas.
Teste os estados de hover deliberadamente
As cores de hover devem ser visivelmente diferentes tanto do estado padrão quanto do estado ativo. Se parecerem iguais, os usuários perdem um importante feedback visual.
Mantenha consistência com sua marca
Use a mesma cor primária aqui que no seu site, propostas e faturas. A consistência gera reconhecimento e profissionalismo em todos os pontos de contato com o cliente.
Notas Importantes
- Efeito global instantâneo: Todas as alterações de aparência salvas são aplicadas imediatamente em todo o workspace. Cada usuário conectado verá a atualização em sua próxima ação de navegação.
- Um tema ativo: Não há suporte a múltiplos temas — um conjunto de cores se aplica a todo o workspace para todas as funções.
- Restrição de função: Apenas Super Admins e Admins podem fazer alterações de aparência. Membros regulares da equipe e clientes não podem modificar cores.
- Redefinição é permanente: O botão Reset Default Settings não pode ser desfeito, portanto use-o apenas quando quiser remover intencionalmente todas as cores personalizadas.