Componentes
96. Telas de estado de sistema — não encontrado, sem permissão, erro, manutenção, sessão expirada
seed-componentes.md v2.00 · §96seção 183 de 18496-telas-de-estado-de-sistema-nao-encontrado-sem.md · MD5 cc4d91e1Título completo no canon: Telas de estado de sistema — não encontrado, sem permissão, erro, manutenção, sessão expirada — proposta (pedido VI2, folha 11, 2026-10-18; a tela espera o gate dele) · TE1–TE10 · tela de referência tela-estado.html (gabarito A29) e instrumento suite-estado.mjs
Contexto para leitor novo. O estudo
PR-P171(2026-10-18) leu, como DADO, a página de erros de um design system de terceiros e propôs telas de estado de sistema; a busca nos quatro canônicos não achou nenhuma (0 resultados). O §25 já tem os estados DENTRO de uma região (erro de carga, sem permissão), mas nenhum deles é uma PÁGINA INTEIRA: a pessoa que abre um endereço que não existe, que perde a sessão ou que cai numa manutenção programada não está dentro de uma região de um app. O SIGA (sistema de gestão da SEED) e os portais precisam dessas páginas. Siglas: TE = decisões deste § (tela de estado) · EEny = o mascote da marca (marca-seed.md§6) · A29 = código do gabarito, o próximo livre medido (maior noTELASe nomapa-cobertura-ds.md: A28).Veredito dele, verbatim (folha 11, 2026-10-18 18:56Z):
VI2= "a" — "agora — o canon não tem (busca em 4 canônicos: 0 resultados); o SIGA e os portais vão precisar".O que NÃO veio dele e é decisão da sessão, exposta a veto: o desenho (cartão centrado, cinco vistas), a microcópia, o código A29, o arquétipo
autenticacao(SH18, o mais próximo: página fora do shell, sem rail), o prefixo TE e as regras TE1–TE10 abaixo. O gate visual dele sobre a tela ainda não aconteceu — por isso a seção nasceproposta.
96.1 O que a tela é#
Uma página FORA do shell (SH17: antes e fora de qualquer sessão não há app), um cartão de 420 px no centro, a logo vertical oficial acima (marca §5.1), no vidro-e-metal do §93 (casca no palco, metal no botão primário; o cartão fica opaco). Cinco vistas, cada uma uma página própria no produto:
| vista | código | título | quando aparece |
|---|---|---|---|
| Não encontrado | 404 | Não encontramos esta página | o endereço não existe ou mudou |
| Sem permissão | 403 | Você não tem acesso | a conta existe mas não pode abrir aquele conteúdo |
| Erro do nosso lado | 500 | Algo falhou do nosso lado | falha inesperada do sistema |
| Manutenção programada | 503 | Estamos em manutenção | janela de manutenção declarada |
| Sessão expirada | 401 | Sua sessão terminou | a sessão acabou por tempo sem uso |
96.2 Decisões TE1–TE10#
| # | Decisão | Porquê | Medida por |
|---|---|---|---|
| TE1 | Cinco vistas, cada uma com UM h1 de até 5 palavras, sem ponto (a regra Z2 do §25 estendida à página), títulos distintos; uma vista visível por vez |
a vista se reconhece pelo título, não só pelo código | suite-estado.mjs TE1a–TE1d |
| TE2 | Até duas ações: a primária (botão cheio, a primeira) e uma secundária (contorno); nunca beco sem saída — as cinco têm a segunda saída; nenhuma ação nasce desabilitada (§2.6); o rótulo nomeia o efeito | §25 Z2; §1; §2.6 | TE2a–TE2d |
| TE3 | Código do erro DISCRETO: Código NNN, JetBrains Mono, tamanho micro, tinta secundária, ABAIXO do cartão e fora do título; sem cor de severidade. Só o 500 traz também uma referência opaca de suporte (formato XXXX-XXXX, sem nenhum dado dentro: aleatória, nunca derivada de usuário, hora ou sequência; nesta referência ela é sintética) |
o código é identificador para o suporte, não manchete; PN21d (dado é mono) | TE3a–TE3d |
| TE4 | Sem EEny, em nenhuma das cinco. Z5 do §25 proíbe o mascote em erro e em sem-permissão ("severidade não é lugar de mascote"); a manutenção e a sessão expirada seguem o mesmo critério (a pessoa não consegue seguir) e a parcimônia do marca-seed.md §6 só libera o EEny em onboarding, sucesso e empty amigável. Um glifo de traço de 40 px (SVG em currentColor, tinta neutra text-muted, aria-hidden) marca o tipo; a informação mora no texto. O canon do mascote NÃO foi tocado |
Z5; marca §6 | TE4a–TE4c |
| TE5 | Erro para o cliente é GENÉRICO: nenhuma vista diz rota, serviço, pilha, nome de tabela, e-mail, papel exigido nem número ou termo de negócio (cliente, obra, proposta…). O 403 diz que a conta não tem acesso e a quem pedir; não diz QUAL permissão falta nem que área é. O 404 não repete o endereço digitado. Medida por LISTA BRANCA, não por lista de termos proibidos: o texto aprovado de cada vista (título, explicação, ações, código) e o da ajuda vivem em 06-validacao/templates/tela-estado-textos.json — a MESMA fonte de onde o gerador os tira — e a suíte reprova qualquer texto visível diferente (a lista negra deu PASS falso para rota, serviço e área no texto; revisão independente de 2026-10-18) |
segurança: erro detalhado ajuda quem ataca e vaza dado de negócio; §25 "sem permissão: explica o porquê + quem contatar, nunca finge que a área não existe" | TE5a–TE5e |
| TE6 | Voz da SEED (sobreaseed.md §9: acolhedor, direto, autêntico, energético): frases curtas, verbo de ação, sem exclamação, sem caixa alta corrida, sem clichê, sem jargão e sem culpar a pessoa (Z4); cada explicação (≤ 32 palavras) termina em PRÓXIMO PASSO. Exemplo medido na própria tela: "Isso não foi por algo que você fez. Tente de novo em alguns instantes." |
Z4; sobreaseed §9 ("Esse e-mail não parece certo. Pode dar uma conferida?" × "ERRO: …") | TE6a–TE6f |
| TE7 | Troca de vista (na referência, pela barra de provas): só a vista nova visível, o foco vai ao h1, uma live region (role="status") anuncia; #vista=403 abre a vista direto (instrumento da própria tela, não rota de produto); vista desconhecida cai no 404. Ao abrir a página de erro o foco já vai ao h1 e o <title> é o título do h1 + a marca (cada estado é uma página própria; o título único de galeria não serve ao produto) |
§1.13; foco depois de mudança de rota | TE7a–TE7h |
| TE8 | A marca é a logo vertical oficial, byte a byte (dois temas); o nome da marca vem do aria-label. Em produto que usa o DS sem a marca SEED (LC-66), o nome do produto em texto (marca-seed.md §5.7), e as ações "Falar com a SEED" passam ao nome de quem opera o produto |
marca §5.1 e §5.7 | TE8a–TE8c |
| TE9 | A página tem lang="pt-BR", um <main>, <meta name="robots" content="noindex, nofollow">, nenhum campo ou formulário e nenhuma dependência externa nem URL absoluta (a página de erro tem de abrir quando o resto do sistema não está de pé) |
página de erro não se indexa; resiliência | TE9a–TE9f |
| TE10 | Resposta ao ponteiro como em toda tela: todo :hover sob @media (hover: hover) (MH2), pressionado declarado (o primário afunda pelo metal, §93.3), alvo de 44 px |
HV1 §71; MH2 do §1 | TE10a–TE10d |
96.3 Quando cada vista é a certa (regra de uso para o produto)#
- 404 só quando o endereço não existe; endereço que existe e o usuário não pode ver é 403, não 404 — com a ressalva: quando revelar que o recurso existe já é vazamento (recurso sensível, enumeração por tentativa), devolve-se o 404 uniforme; a decisão é POR RECURSO, do produto.
- 500 nunca mostra a mensagem do sistema; a referência é gravada no registro do servidor junto com a falha para o suporte achar.
- 503 declara a janela (hora de volta) quando ela é conhecida; a frase termina sempre no PRÓXIMO PASSO ("Volte depois das 6h de domingo."); sem janela conhecida, vira "Volte em breve." e o botão primário continua sendo "Verificar agora".
- 401 leva o botão primário ao login (A19, §83); o endereço de onde a pessoa saiu é guardado pelo produto para devolvê-la depois de entrar (fronteira do produto, não do DS), mas nunca como parâmetro de consulta na URL de login (
?next=…abre redirecionamento aberto): a volta é só para rota interna do próprio sistema, validada no servidor (lista das rotas permitidas), guardada no servidor ou na sessão, e qualquer valor que não passe na validação cai no início.
96.4 O que a seção NÃO cobre#
Estado de erro DENTRO de uma região (é o §25 "erro de carga" e "sem permissão") · erro de campo (§2) · erro de rede do celular sem conexão (offline — não há tela, pede estudo) · a página de erro do e-mail ou do PDF · o endereço, o texto exato da janela de manutenção e o que o produto registra (fronteira do produto) · variantes por portal (cliente, parceiro): usam a MESMA tela; a ação secundária "Falar com a SEED" aponta para o canal que cada portal tiver.