> For the complete documentation index, see [llms.txt](https://ajuda.ensinio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ajuda.ensinio.com/duvidas-frequentes-1/aparencia-e-design-da-plataforma.md).

# 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

1. No **Admin Console**, acesse **Configurações**.
2. 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).

3. Ao finalizar as configurações, clique em **"Aplicar"** no canto superior direito para salvar.

<figure><img src="/files/jMG6v6sWgHDPc5ppa6xT" alt=""><figcaption></figcaption></figure>

### Identidade Visual

Nesta seção, você define as imagens que representam sua marca na interface.

1. Logotipo
2. Isotipo

<figure><img src="/files/NLHJ0vsgaE7MpahzG9Z2" alt=""><figcaption></figcaption></figure>

#### 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).

<figure><img src="/files/4TrUnNdoHOZa4gzxLcQV" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**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.&#x20;

Sempre configure as duas versões para garantir que a identidade visual funcione em qualquer modo.
{% endhint %}

#### 2. Isotipo

O isotipo é a versão iconográfica ou simplificada da sua logomarca - geralmente um ícone simplificado, sem o nome da marca.&#x20;

É utilizado em contextos onde o espaço é reduzido, como no [favicon](#favicon) do navegador.

* **Dimensões recomendadas:** 60×60px
* Também pode ser configurado separadamente para **modo claro** e **modo escuro**.

<figure><img src="/files/OAXqnZoJprTV9YWUTo3D" alt=""><figcaption></figcaption></figure>

### Paleta de Cores

A paleta define as cores principais que serão aplicadas em botões, links e elementos de destaque da plataforma.&#x20;

{% hint style="success" %}
Cada cor pode ser configurada de forma independente para o modo claro e para o modo escuro.
{% endhint %}

#### Cores disponíveis

| Cor                           | Onde é aplicada                          |
| ----------------------------- | ---------------------------------------- |
| **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    |

<figure><img src="/files/WADsaxmJtNaKWz1FAbsS" alt=""><figcaption></figcaption></figure>

#### Como escolher ou alterar as cores da sua marca

A plataforma oferece um seletor inteligente que permite total controle sobre a identidade visual.&#x20;

Para configurar:

1. Clique sobre o campo da cor que deseja alterar (primária, secundária ou terciária).

<figure><img src="/files/pJPB82N7trvYRlSzAH4d" alt=""><figcaption></figcaption></figure>

2. 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.*

<figure><img src="/files/55ufyUaBSYzmGoRThmMj" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/mvhMcFLz0iWQaaycumeG" alt=""><figcaption></figcaption></figure>

4. Repita o processo para cada cor no modo claro e no modo escuro.
5. 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.

{% hint style="success" %}
**Dica:**&#x20;

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.
{% endhint %}

6. **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:

<figure><img src="/files/UT8Cro47COJ8fcwJDV7W" alt=""><figcaption></figcaption></figure>

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:

1. Favicon
2. Modo padrão (claro/escuro)
3. Marca da Ensinio

<figure><img src="/files/cOa3O59k3s7DlqumzeAa" alt=""><figcaption></figcaption></figure>

#### **1. Favicon**

É o ícone exibido na aba do navegador.&#x20;

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.

<figure><img src="/files/QhXQIq0g1HXz2K7ys80Q" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
O favicon deve ser uma imagem quadrada de **60×60px** para garantir boa resolução em todos os navegadores.
{% endhint %}

#### 2. Modo padrão

Define como a plataforma será exibida para os usuários ao acessarem.&#x20;

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.

<figure><img src="/files/StHAavDjvoLkThgcK7xh" alt=""><figcaption></figcaption></figure>

* **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.

<figure><img src="/files/gIQCeoDdSMH5VpisEXIN" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
**Atenção:**&#x20;

Ao escolher o modo padrão, certifique-se de que o logotipo está configurado para esse modo.&#x20;

Se escolher **"Apenas modo escuro"** e tiver configurado apenas o logotipo para modo claro, a barra de navegação ficará sem logotipo.
{% endhint %}

#### 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*.

<figure><img src="/files/sh1TUISfvEt0t3TVAM0K" alt=""><figcaption></figcaption></figure>

### Exemplo de configuração

Logotipo e isotipo:

<figure><img src="/files/zquO3wAcu9nyXIoyyYPm" alt=""><figcaption></figcaption></figure>

Cores utilizadas

<figure><img src="/files/6hWXt0EWijA2kLLod7AD" alt=""><figcaption></figcaption></figure>

Favicon

<figure><img src="/files/YsOg9JJlRGNulHvCnQ8R" alt=""><figcaption></figcaption></figure>

Resultado na plataforma:

<figure><img src="/files/S8sXLJjI0M3aYsgaXqve" alt=""><figcaption></figcaption></figure>

### 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.