MAR-003 · check-ai-docs
Direção visual: prancha técnica
Em revisão- Versão
- 1.0.0
- Responsável
- @Samara Silvia Sabino
- Última atualização
- 11 de out. de 2026
- Pilar
- Marca UX/UI
- Tipo
- Direção visual Documento vivo
01 O conceito
Quem usa a Check.AI passa o dia com pranchas, memoriais e normas. Em vez de uma interface genérica de SaaS, a ideia foi trazer o vocabulário desse material para a tela: a grade do papel milimetrado, a numeração de itens, as referências de norma e página e os cantos de registro de uma prancha impressa.
A regra que segura as duas camadas juntas é simples: a parte técnica informa, a parte contemporânea ambienta. Grade, números e metadados sempre carregam informação real; vidro, grão e blobs nunca competem com o conteúdo.
02 Por que esse caminho
- Confiança. A fonte de cada apontamento fica visível ("NBR 9050 · p. 58"): nada ali é mágica, tudo tem origem.
- Público. Engenharia, arquitetura e setor público reconhecem esse vocabulário, sem depender de um setor só.
- Diferenciação. Evita o visual que as ferramentas de IA tendem a repetir, sem sair da paleta da marca.
03 Elementos
| Elemento | O que é | Papel |
|---|---|---|
| Grade de prancha | Linhas finas de 24 e 120 px, apagando nas bordas | Só ambienta |
| Cantos de registro | Marcas em L nos cantos dos cards | Enquadra blocos sem borda pesada |
| Numeração vazada | Números grandes só com contorno | Ordem de leitura |
| Rótulos em mono | JetBrains Mono, caixa alta e espaçado | Sobretítulos, códigos, metadados |
| Realce | Fundo suave atrás de uma expressão do título | Ênfase, no máximo uma por seção |
04 O que evitamos
Importante
Na tela de revisão, o conteúdo manda. Se um efeito disputa atenção com o resultado da análise, ele sai.
- Gradiente roxo, ícone de "brilho mágico" e outros clichês visuais de IA.
- Emoji como ícone de status: status usa ícone Lucide + texto + cor.
- Elementos que amarram a marca a um setor só.
- Texto sobre blob ou vidro sem contraste verificado.