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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ajuda.ensinio.com/aparencia-e-design-da-plataforma.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.