> 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/solucoes/plataforma-configuracoes-de-design.md).

# Plataforma: Configurações de Design

Configure a identidade da sua plataforma e valorize sua marca\
\
Neste artigo, nós explicamos como você pode configurar sua plataforma para deixá-la à cara da sua marca! Veja abaixo algumas das principais configurações de aparência que oferecemos.\ <br>

### Logotipo <a href="#id-2-logotipo" id="id-2-logotipo"></a>

\
\
Existem duas versões desse logotipo que precisam ser configurados a depender do modo de cores selecionado acima. Confira as dimensões recomendadas para ambos os modos:\ <br>

#### Logotipo no modo claro e no modo escuro <a href="#id-3-logotipo-no-modo-claro-e-no-modo-escuro" id="id-3-logotipo-no-modo-claro-e-no-modo-escuro"></a>

\
\
No modo claro, você pode seguir as configurações de Design Principal. Para configurar o design principal, siga os seguintes passos:\
\
Acesse o Admin Console\
No menu lateral, vá em Configurações > Aparência e design > Identidade Visual\
Vá até Logotipo e adicione a imagem para o "\*\*Modo Claro\*\*" e o "\*\*Modo Escuro\*\*"\
Clique em Aplicar no topo da página

<figure><img src="https://2259447927-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwebm0QbRMYk9AEqv2lsa%2Fuploads%2FAPDyz5JipiwJyUYy0Qln%2Fimage.png?alt=media&amp;token=ccef4d6c-44d8-4ebe-832c-c148f892c9af" alt=""><figcaption></figcaption></figure>

❗\*\*Importante:\*\* sempre veja as dimensões recomendadas antes de selecionar uma imagem para que seu aluno tenha a melhor experiência. \
\
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\ <br>

### Isotipo <a href="#id-2-isotipo" id="id-2-isotipo"></a>

\
\
O símbolo da marca (ou isotipo) é o ícone que representa sua logomarca. Ele necessariamente é uma versão resumida da sua logomarca, caso você tenha um ícone. Imagine a maçã da Apple, por exemplo. Enquanto a maçã + o nome "Apple" seja o logotipo, a maçã sozinha seria o isotipo: o ícone que representa a marca.\
\
Caso queira utilizar um, é só escolher as imagem para o "\*\*Modo Claro\*\*" e "\*\*Modo Escuro\*\*", levando em consideração as dimensões recomendadas e aplicar em "\*\*Isotipo\*\*", logo abaixo do Logotipo. \
\
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\ <br>

### Paleta de Cores <a href="#id-2-paleta-de-cores" id="id-2-paleta-de-cores"></a>

\
\
Há configurações de cores de botões para o modo claro e modo escuro. Siga abaixo as instruções para ajustar cada uma delas de acordo com suas preferências:

<figure><img src="https://2259447927-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwebm0QbRMYk9AEqv2lsa%2Fuploads%2FG9IbjvypyvrUFGDL4CXd%2Fimage.png?alt=media&amp;token=9e8ab02e-6671-44d1-8d3e-4fcd8973fd42" alt=""><figcaption></figcaption></figure>

\
Você poderá adicionar as cores que preferir tanto no "\*\*Modo claro\*\*" quanto no "\*\*Modo escuro\*\*". Logo à baixo, você consegue ver o exemplo de como aparecerá em sua Plataforma. \
\
Cor primária: É a cor principal \
\
Cor secundária: É a cor que aparece ao passar o mouse por cima do botão ou ao clicar \
\
Cor terciária: É a que traz contraste \
\
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\ <br>

### Favicon <a href="#id-2-favicon" id="id-2-favicon"></a>

\
\
!\[]\(<https://storage.crisp.chat/users/helpdesk/website/29b8731d421f8800/1d7dfa18-8558-4f34-bc44-44797b_qr11ma.png>)\
\
O favicon é o ícone que aparece na guia do navegador do usuário enquanto ele navega pela sua plataforma. \
\
Você pode escolher usar o isotipo do modo claro como favicon ou pode usar um personalizado. Para configurar, basta mudar na "setinha" ao lado. \
\
\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\ <br>

### Modo padrão <a href="#id-2-modo-padrao" id="id-2-modo-padrao"></a>

\
\
É aqui que você vai escolher o "\*\*Modo\*\*" da sua Plataforma. Você tem três opções:\
\
\_Apenas modo claro\_ — Todos os usuários navegarão pela plataforma no modo claro. Não há opção de alternar entre os modos.\
\_Modo claro e modo escuro\_ — Nesta configuração, o modo claro é o padrão e, individualmente, cada usuário pode alternar entre os modos.\
\_Apenas modo escuro\_ — Todos os usuários navegarão pela plataforma no modo escuro. Não há opção de alternar entre os modos.

<figure><img src="https://2259447927-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fwebm0QbRMYk9AEqv2lsa%2Fuploads%2FsDJeIFGI29PQmnb4je9h%2Fimage.png?alt=media&amp;token=e7c63a2c-80ca-47a9-a10a-0aaf3dcfc46d" alt=""><figcaption></figcaption></figure>

🪄 Para emular uma experiência fidedigna às plataformas de streaming OTT, recomendamos a utilização da opção Apenas modo escuro, nesses casos.

***

Tudo certo! Você configurou a identidade da sua plataforma. Explore todas as opções disponíveis para descobrir as possibilidades de configuração de aparência. Qualquer dúvida, fique a vontade para entrar em contato com nossa equipe!