---
title: 32. Layout e aparência
slug: 32-layout-e-aparencia
docTags:
createdAt: 2026-10-13T14:45:14.987Z
---
*O layout de portal e o menu lateral, a página inicial, as Preferências e as cores de cada site.*
A plataforma tem dois layouts para a área de auditoria. As telas, as permissões e a ajuda são as mesmas nos dois — só a casca muda.
• **Portal** (padrão): a barra da marca no topo, a barra de seções logo abaixo e uma página inicial com destaque, atalhos e quadros. É o mesmo desenho do portal de atendimento, do portal de resposta e do console.
• **Menu lateral**: o menu de sempre, à esquerda, com os grupos recolhíveis e a busca no menu.
***
### A página inicial
No layout de portal a plataforma abre no **Início**:
• o **destaque** com a busca de telas ("riscos", "aprovações", "painéis"…);
• os **atalhos** com as contagens do que pede ação: auditorias em andamento, NCs sem tratamento, riscos acima do apetite, documentos para aprovar, perguntas para responder e leitura obrigatória;
• os **quadros**: auditorias em andamento com o quanto já foi respondido, documentos para aprovar, o resumo das NCs e dos riscos, a leitura obrigatória e as perguntas que esperam a sua resposta.
Cada atalho e cada quadro só aparece para quem tem a permissão da tela que ele resume, e os números são os da própria tela — clicar leva a ela.
***
### As seções e o menu de cada grupo
A barra de seções tem um botão por grupo (Gestão, Auditoria, Tratamento, Automação, Acervo, Análise, IMR, Catálogo, Configuração, Administração). Clicar abre o menu do grupo, com cada tela e uma linha dizendo o que ela é; **Página de…** abre a página do grupo, com todas as telas dele. A seção da tela aberta fica sublinhada. Esc fecha o menu.
A busca da barra da marca acha qualquer tela pelo nome, em qualquer grupo.
***
### O cabeçalho
Nos dois layouts o cabeçalho mostra à vista só o que se usa todo dia, em ícone com dica:
• a **faísca** abre o assistente (*O assistente*);
• o **?** abre a ajuda da tela em que você está;
• o **sino** abre os avisos, com o número dos que você ainda não leu.
O resto fica nas **Preferências**: no layout de portal, pelo botão de engrenagem; no menu lateral, pelo seu **nome**, à direita — e no menu lateral o nome da tela aberta aparece ao lado da marca.
***
### Preferências
As Preferências reúnem:
• **Idioma**, pela bandeira: Brasil (português), Espanha (espanhol) e Estados Unidos (inglês). O leitor de tela anuncia o nome do idioma, não a bandeira.
• **Tamanho do texto**: normal, maior e o maior.
• **Tema**: claro, escuro ou cinza.
• **Layout**: portal ou menu lateral, quando a organização deixa cada pessoa escolher.
• **Segundo fator da minha conta**, **Imprimir esta tela** e **Como funciona, de ponta a ponta**.
• No menu lateral, também o **Sair**.
Esc ou um clique fora fecha o painel.
***
### Quem decide o layout
• O **console** define, por tenant, o layout padrão e se cada pessoa pode escolher o seu (Console → tenant → **Layout da plataforma**).
• Com a escolha liberada, cada pessoa troca nas Preferências; a escolha fica gravada na conta e vale em qualquer navegador. **Voltar ao padrão da organização** apaga a escolha própria.
• Com a escolha desligada, todos veem o padrão. A escolha de ninguém é apagada: se a escolha voltar a ser permitida, cada um reencontra a sua.
***
### As cores de cada site
São três sites com cores próprias, definidas no console (tenant → **Cores dos sites**): a **Plataforma** (a área de auditoria, no layout de portal e no menu lateral), o **portal de atendimento** e o **portal de resposta**. Cada um tem barra superior, barra das seções, destaque da página inicial e cor de ação (botões, links e ícones dos atalhos).
• A cor do texto sobre cada faixa é escolhida sozinha, branca ou escura, pelo contraste.
• O selo de cada cor diz se o texto chega ao mínimo de leitura (WCAG AA, 4,5:1).
• No tema escuro e no cinza a cor de ação é clareada até ler sobre o fundo do tema.
• A Plataforma **herda as cores do portal de atendimento** até o tenant gravar cores próprias para ela. Era assim antes de a plataforma ter cores suas, e um tenant que já tinha personalizado o portal não muda de cor sozinho. Plataforma igual ao portal não se grava: continua acompanhando o portal.
• Sem cores definidas, o portal e o portal de resposta ficam com as do produto (e a Plataforma, com as do portal).
***
### O aplicativo instalado
Quem instala a plataforma como aplicativo (*Instalar como aplicativo*) recebe o aplicativo **do tenant**, e não um genérico: o manifesto sai do endereço por onde a pessoa chegou.
• **Nome** — o nome de exibição do tenant.
• **Ícone** — gerado do logotipo do tenant, centrado num quadrado branco, sem a margem vazia do arquivo, nos tamanhos que os sistemas pedem (inclusive a versão que o lançador recorta em círculo). Só funciona com logotipo em **PNG** ou **JPEG**; com **WebP**, ou sem logotipo, fica o ícone do produto.
• **Cor da barra** — a da barra superior da Plataforma; sem ela, a do portal de atendimento; sem ela, a do portal de resposta; e, por fim, a do produto.
Trocar o logotipo ou as cores vale para quem instala dali em diante. Quem já tinha instalado pode ver o ícone antigo por um tempo: cada navegador decide quando relê o manifesto, e às vezes é preciso desinstalar e instalar de novo para o ícone trocar.