---
fonte: 01-canonicos/seed-componentes.md
versao_da_fonte: v1.43
secao: 84
titulo: "TELA A20 — ONBOARDING / PRIMEIRO USO · **`estável`** (2026-08-23, gate dele: *'a imagem da onboarding está ok. aprovo'*) · tela `05-html-de-referencia/telas/tela-onboarding.html` v0.1 · instrumento `06-validacao/suites/suite-onboarding.mjs` (**14 PASS · 0 FAIL · 1 [n/a] declarado**)"
sequencia: 90 de 98
bytes_do_corpo: 3863
md5_do_corpo: 84d751b1e10892603bb7959ea0c3f3f5
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-componentes.md
---
## 84. TELA A20 — ONBOARDING / PRIMEIRO USO · **`estável`** (2026-08-23, gate dele: *"a imagem da onboarding está ok. aprovo"*) · tela `05-html-de-referencia/telas/tela-onboarding.html` v0.1 · instrumento `06-validacao/suites/suite-onboarding.mjs` (**14 PASS · 0 FAIL · 1 [n/a] declarado**)

> **O que é:** a segunda tela da F7.6. O gabarito da F7.1 define o arquétipo
> como COMPOSIÇÃO, não peça nova: *"herda o canvas do arquétipo que ainda não
> tem dado; o vazio de primeiro-uso (§25/Z1) ocupando o slot da peça ausente;
> ilustração colapsa antes do texto (<600px)"*. O hospedeiro é o PAINEL (§48)
> e o consumidor real declarado é o primeiro acesso ao ERP. A tela põe a
> taxonomia Z1 — já `estável` desde o Bloco 3 — **viva em composição**, nos
> três estados que a leitura provou não serem intercambiáveis (CU §6.1:
> *"um vazio de onboarding sem ilustração parece uma tela quebrada"*; VdIA
> §3.13: o vazio ensina).

### 84.1 Contratos (medidos por comportamento na suíte)

- **ON-01** — a tela abre em PRIMEIRO USO, um estado visível por vez; o
  primeiro-uso é educativo + CTA primário de criação (Z1).
- **ON-02** — **Z5 vivo**: EEny presente em primeiro-uso e esvaziado,
  **AUSENTE em sem-permissão** (ícone neutro no lugar); toda ilustração é
  `aria-hidden`.
- **ON-03** — **o vazio ENSINA**: o principal diz o critério de preenchimento
  ("tudo o que a equipe cadastrar aparece neste painel…" — A7 do VdIA /
  PN21-16); os slots menores usam vazio TEXTUAL seco (tratamento B da
  leitura) dizendo O QUE os preenche, sem CTA — uma âncora por página.
- **ON-04** — os três estados têm título, texto e ação PRÓPRIOS (Z1);
  sem-permissão esconde os slots e diz o CAMINHO de desbloqueio (quem/onde).
- **ON-05** — a ilustração colapsa ANTES do texto <600px (§25.4-7) —
  [n/a] no jsdom (container query é render), **provado em navegador real a
  390px**: `display:none`, app empilha, zero overflow.
- **ON-06** — vazio é estático: NENHUMA live region própria (Z6); só o
  anúncio global `.vh`.
- **ON-07** — hero herda a saudação ciente da hora do painel (PN21c).
- **ON-08** — **os EEny são os ASSETS OFICIAIS byte-idênticos**
  (`03-assets/mascote-eeny/` pose-01 no primeiro-uso, pose-04 no esvaziado,
  injetados por script; a suíte confere o raster contra o arquivo).
  Esclarecimento de termo, do gate: *"byte-idêntico" é fidelidade
  EMBED↔ASSET, nunca igualdade entre poses — as 8 poses têm 8 MD5 distintos,
  medidos em 2026-08-23 a pedido dele.
- **ON-09** — o h1 do hero NÃO carrega número: não existe KPI antes do
  primeiro dado (PN21-06b por vacuidade).

### 84.2 Fatos de produção que viram regra de consumo

1. **Escolher pose de mascote exige OLHAR o pose**: o pose-05 (o mais leve)
   é o EEny DE COSTAS e parecia decapitado na tela; e o desenho ocupa só
   ~35%×49% do canvas 1773². Régua: **medir o bounding box por pixel antes
   de embutir** e, quando o canvas tem margem gorda, usar **crop de
   APRESENTAÇÃO no viewBox do embed** — o desenho fica intocado.
2. Peso: a tela carrega 242KB (dois rasters do mascote) — aceitável em
   gabarito interno; peça PÚBLICA com EEny usa asset otimizado (MK12).
3. A 1ª versão da régua ON-03a reprovou a tela CORRETA: o texto quebra linha
   no fonte e o regex exigia espaço literal — *whitespace ≠ espaço*; régua
   corrigida com o defeito anotado nela.

### 84.3 Fronteiras (do consolidado aprovado)

Tour guiado/coach marks — FORA (nenhuma fonte tem leitura; se o produto
pedir, nasce com leitura própria) · persistência do "já vi"/dispensa =
produto (CN4) · wizard multi-página = §38/produto · o deep-link
`#estado=…&tema=…` é instrumento de avaliação, não spec.

---