Pular para conteúdo
S
Plataforma de Apoio à Inclusão Escolar
SAGIE · Ed. 2026.04 · Portal Visual
Capítulo IIdentidade Visual

Oito gramáticas visuais
para um mesmo cuidado.

A plataforma atravessa etapas — da Educação Infantil ao Ensino Superior — e públicos heterogêneos: coordenações, docentes, famílias, terapeutas, NAIs. Cada tema abaixo propõe uma leitura distinta da mesma estrutura, preservando hierarquia de informação, acessibilidade e a seriedade que dados sensíveis de menores exigem.

Nota editorial

Tema ativo é aplicado a todas as páginas do protótipo (login, dashboard e caso). A preferência é persistida localmente. Para apresentação a sócios, recomenda-se alternar ao vivo entre os temas — a estrutura permanece; o tom muda.

Talterna o tema ativo
§ 1

Temas

Tema 01 · Light
Claridade
Azul sereno · institucional

Tom padrão. Navy profundo como primária, âmbar suave como acento. Pensado para coordenações pedagógicas e secretarias municipais — legibilidade, confiabilidade, silêncio visual.

WCAG AAPadrão
Tema 02 · Light
Sépia
Papel · tinta · arquivística

Biblioteca, dossiê, fichamento. Burgundy profundo, ouro velho, cream de papel laid. Recomendado a contextos em que o peso simbólico do registro importa — estudos de caso, relatórios para conselhos.

WCAG AAEditorial
Tema 03 · Light
Acolhimento
Terracota · âmbar · humano

Para contextos em que a família e o aluno têm mais presença na interface — Educação Infantil, Anos Iniciais. Cromas quentes sem perder a sobriedade exigida por dados sensíveis.

WCAG AAHumanizado
Tema 04 · Light
Cerrado
Terracota · pequi · umbro

Identidade brasileira regional. Terracota profunda, ocre-pequi, umbro de terra seca. Pensado para redes municipais do interior, institutos federais de ensino agrário, escolas rurais com orgulho de procedência.

WCAG AARegional
Tema 05 · Light
Conexões
Azul · amarelo · verde · vermelho

As quatro cores da iconografia clássica de TEA no Brasil, distribuídas semanticamente: azul como primária, amarelo como acento, verde para êxito, vermelho para alerta. Sem desenho de peça — o símbolo é a conexão entre os atores, não a falta.

WCAG AAReferência TEA
Tema 06 · Dark
Foco
Índigo · violeta · noturno

Uso prolongado, horário ampliado, NAI universitário. Reduz fadiga visual e privilegia densidade informacional. Contraste cuidadosamente calibrado para texto corrido e tabelas.

WCAG AADark
Tema 07 · Dark
Noturno
Cyan · âmbar · OLED

Alternativa técnica ao Foco — preto puro OLED, cyan-esmeralda elétrico, âmbar. Densidade monoespaçada, feel de terminal/EMR clínico. Plantões prolongados, salas de observação, NAI 24/7.

WCAG AATécnico
Tema 08 · A11y
Alto Contraste
Preto · amarelo · branco

Conformidade WCAG AAA. Contrastes máximos, bordas de 2 pixels, ausência de cinzas ambíguos, foco sempre visível em amarelo. Requisito de entrada em qualquer contrato público sério.

WCAG AAAAcessibilidade
§ 2

Protótipos

Tipografia

Fraunces como display serif, com variação óptica e itálico editorial. Geist no corpo e interface. Geist Mono para timestamps, códigos e rótulos taxonômicos.

Acessibilidade

Todos os temas garantem WCAG 2.2 AA. O tema Alto Contraste é AAA. Foco visível, atalhos de teclado, linguagem simples em superfícies voltadas a aluno e família.

Conformidade

Dados fictícios. Nomes em iniciais para reforçar a política de minimização de dados. Banner de auditoria presente em toda página de caso.