Aparência e Design da Plataforma
A identidade visual da sua plataforma é o primeiro contato que seus alunos têm com a sua marca. Uma aparência consistente — com logotipo, cores e modo de exibição bem configurados — transmite profissionalismo e fortalece o reconhecimento da marca. Dedicar atenção a esses detalhes faz toda a diferença na experiência do usuário.
Passo a Passo para Configurar
No Admin Console, acesse Configurações.
Clique em "Aparência e design".
Em "Identidade visual": Faça o upload das imagens (Logo e Isotipo) para ambos os modos (Claro e Escuro).
Em "Paleta de cores": Defina as cores principais que serão aplicadas em botões, links e elementos de destaque da plataforma.
Em "Outros": Defina qual será o Modo Padrão de visualização.
Decida se deseja exibir ou ocultar a Marca da Ensinio (White Label).
Ao finalizar as configurações, clique em "Aplicar" no canto superior direito para salvar.
Identidade Visual
Nesta seção, você define as imagens que representam sua marca na interface.
Logotipo
Isotipo
1. Logotipo
A logomarca é exibida na barra superior e em outros componentes da plataforma. É possível configurar versões diferentes para o modo claro e para o modo escuro.
Dimensões recomendadas: 280×38px
Modo claro - versão do logotipo para fundo claro (geralmente com cores escuras ou vibrantes).
Modo escuro - versão do logotipo para fundo escuro (geralmente com cores claras ou brancas).
Atenção:
Se você configurar apenas o logotipo para o modo claro e definir o modo escuro como padrão, o logotipo não será exibido corretamente.
Sempre configure as duas versões para garantir que a identidade visual funcione em qualquer modo.
2. Isotipo
O isotipo é a versão iconográfica ou simplificada da sua logomarca - geralmente um ícone simplificado, sem o nome da marca.
É utilizado em contextos onde o espaço é reduzido, como no favicon do navegador.
Dimensões recomendadas: 60×60px
Também pode ser configurado separadamente para modo claro e modo escuro.
Paleta de Cores
A paleta define as cores principais que serão aplicadas em botões, links e elementos de destaque da plataforma.
Cada cor pode ser configurada de forma independente para o modo claro e para o modo escuro.
Cores disponíveis
Cor primária
Botões principais, elementos de destaque
Cor secundária
Botões secundários, links, ícones
Cor terciária (contraste)
Texto sobre botões e fundos coloridos
Como escolher ou alterar as cores da sua marca
A plataforma oferece um seletor inteligente que permite total controle sobre a identidade visual.
Para configurar:
Clique sobre o campo da cor que deseja alterar (primária, secundária ou terciária).
Ao clicar na cor, você verá uma janelinha "mágica" com muitas opções:
A Barra Colorida: Deslize o dedo ou o mouse para escolher a cor base (ex: azul, verde ou rosa).
O Quadro de Tons: Clique na parte mais clara ou mais escura para achar o tom exato que você gosta.
O Conta-gotas: Clique no ícone de conta-gotas dentro do seletor para capturar uma cor exata de qualquer imagem (como sua logo) que esteja na tela.
Embaixo aparece o Formato (HEX, RGB ou HSL): Clique nas pequenas setas ao lado das letras abaixo dos valores numéricos para alternar entre os formatos de cor. HEX: Ideal para colar códigos prontos (ex:
#605CFF). RGB/HSL: Ideal para ajustes finos de brilho e intensidade manualmente.
Repita o processo para cada cor no modo claro e no modo escuro.
Os botões de "Exemplo" na tela mostram uma prévia de como as cores ficarão aplicadas antes de você salvar. Observe os botões. Se o texto não estiver legível, altere a Cor Terciária (Contraste) até obter uma boa leitura.
Dica:
Use a cor terciária (contraste) sempre em branco (#FFFFFF) ou em uma cor muito clara quando as cores primária e secundária forem escuras ou saturadas - assim o texto sobre os botões permanece legível.
Salve as Alterações: Após ajustar nos modos Claro e Escuro, clique em Aplicar no topo da página.
Exemplos de paletas
Aqui estão alguns exemplos de combinações e como elas se aplicam na plataforma:
Os exemplos acima mostram como as cores primária, secundária e terciária se aplicam na barra de navegação, nos botões e nos cards de destaque da plataforma.
Outras Configurações
Também é possível configurar:
Favicon
Modo padrão (claro/escuro)
Marca da Ensinio
1. Favicon
É o ícone exibido na aba do navegador.
As opções disponíveis são:
Usar o isotipo do modo claro como favicon - recomendado para a maioria dos casos.
Usar uma imagem personalizada - para maior controle sobre o ícone exibido no navegador.
O favicon deve ser uma imagem quadrada de 60×60px para garantir boa resolução em todos os navegadores.
2. Modo padrão
Define como a plataforma será exibida para os usuários ao acessarem.
As opções disponíveis são:
Modo escuro por padrão, modo claro opcional — a plataforma inicia no modo escuro, mas o usuário pode alternar para o modo claro.
Apenas modo claro — somente o modo claro estará disponível, sem opção de alternância.
Apenas modo escuro — somente o modo escuro estará disponível, sem opção de alternância.
Atenção:
Ao escolher o modo padrão, certifique-se de que o logotipo está configurado para esse modo.
Se escolher "Apenas modo escuro" e tiver configurado apenas o logotipo para modo claro, a barra de navegação ficará sem logotipo.
3. Marca da Ensinio
Com o toggle "Exibir marca da Ensinio", você pode escolher se deseja exibir ou não a marca na sua plataforma.
Toggle ativado: a marca da Ensinio é exibida de forma discreta em alguns pontos da plataforma.
Toggle desativado: a marca não é exibida, permitindo uma experiência mais personalizada, no modelo white label.
Resumo das atenções importantes
Configure sempre o logotipo para os dois modos (claro e escuro).
Verifique a cor terciária (contraste) - ela precisa ser legível sobre as cores primária e secundária.
Use os botões de "Exemplo" na paleta de cores para validar a aparência antes de aplicar.
Ao definir o modo padrão, confira se os elementos visuais estão configurados para aquele modo.
Clique em "Aplicar" ao final para que todas as alterações sejam salvas.
Last updated