> For the complete documentation index, see [llms.txt](https://docs.grano.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.grano.app/conteudo/lms/setup-do-cliente/temas.md).

# Temas

Para editar, acesse <https://manager.grano.app/admin/theme_colors> e clique no lápis de edição.

<div align="left"><figure><img src="/files/rMkH0xyYZonT1FwhwUN8" alt=""><figcaption></figcaption></figure></div>

Você verá a lista de todas as cores que são utilizadas:

### **Primary:**

Cor principal do cliente. Utilizada em botões, títulos, textos e cores de fundo.&#x20;

### **Secondary:**

Cor secundária do Cliente. Utilizado em botões, títulos, textos e cores de fundo.

### **Tertiary:**

Cor terciária do Cliente. Utilizado muito pouco, em alguns textos.

### **Error:**

Cor utilizada em alertas, avisos, e na resposta errada de cards do tipo pergunta/resposta.

### **Warning:**

Cor utilizada em alertas, avisos, e na resposta certa de cards do tipo pergunta/resposta.

### **Gray:**

Cor de fundo da aplicação e utilizada em alguns textos. Ex.: Home

### **Dark gray:**

Cor utilizada em textos. Ex.: FAQ

### **Light gray:**

Cor utilizada na barra de progresso e no card de treinamento/módulo.

Para editar qualquer cor é só clicar em cima do retângulo e selecionar a cor desejada ou digitar o código. Caso queira colocar o código em HSL ou HEX, basta clicar em cima do RGB.

<div align="left"><figure><img src="/files/JbAG4g22bmt5EZ1aD43y" alt=""><figcaption></figcaption></figure></div>

## Veja a seguir, alguns exemplos de onde as cores são utilizadas:

<div align="center"><figure><img src="/files/xdtZgCGEwFppmgmbGjhT" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Caso queira realizar alguma alteração e tenha dificuldade, solicite ajuda ao **Time Grano** através do e-mail <hello@grano.app>
{% endhint %}

***

> *© 2026 Grano Edtech LTDA. Todos os direitos reservados.*