12. Mockup do SIGA — boas práticas

Origem: seed-ds-mockup/references/melhores-praticas-mockup-erp.md (skill de 2026-05-13, 12665 bytes, MD5 cb51e55e7f98c61352f35b2929c636e0; cópia preservada em 09-pesquisa/skills-v1-2026-05/referencias/melhores-praticas-mockup-erp.md) · importado em 2026-09-06 sem edição.

Revisão: conteúdo revisado em 2026-09-08 · ciclo de 6 meses (V-B3 = A) · vence em 2027-03-08

Estado: ✅ auditada em 2026-09-08 (F9.8, onda 4). Achado principal: quatro dos oito tamanhos de texto que a seção prescrevia não existem no seed-tokens.json — inclusive o do corpo, que é o mais usado de todos. E a seção listava "spacing arbitrário (13px…)" como anti-padrão enquanto prescrevia 13px na própria escala tipográfica.

12.0 Como ler esta seção#

Valem as etiquetas da §1.0. A direção de design é [SEED]; as escolas de produto citadas são [observado].

⚠ O que esta seção não consegue provar: que uma direção de interface faz o SIGA ser mais usado ou mais rápido de operar. Não há teste com usuário da SEED. O que sustenta as escolhas é coerência com o público (cliente técnico que vive na ferramenta) e consistência interna — não medição de desempenho. Os números de percepção que a seção trazia saíram ou foram etiquetados.

12.1 ⛔ A escala tipográfica prescrita não é a do design system#

A seção mandava, como regra dura: "Typography scale fixa (11, 13, 16, 18, 20, 24, 30, 36) — nada entre". Comparei, valor a valor, com o seed-tokens.json v1.23 em 2026-09-08:

E a escala do DS tem tamanhos que a seção não listava: small 12 · body 14 · body-lg 17 · h2 32 · h1 42 · display 64.

Metade da escala estava fora do sistema — e a metade errada inclui o corpo de texto. Um mockup feito pela régua antiga escreve o texto corrido em 13 px onde o design system diz 14 px. É a mesma classe do achado da §7 (as cinco cores), agora em tipografia.

⚠ E a ironia que denuncia a origem do problema: o anti-padrão nº 7 desta mesma seção dizia "spacing arbitrário (13px, 22px, 7px) → quebra ritmo visual". A seção proibia o 13 px numa lista e o prescrevia na outra.

A escala de espaço tinha outro problema, menor: a seção dizia 4, 8, 12, 16, 24, 32, 48, e o DS tem 0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96 (dimension.space.*). Não é contradição — é subconjunto apresentado como se fosse a escala inteira, e proibia na prática o 20 e o 40, que são legítimos.

Correção de raiz, igual à da §7: a escala não se transcreve. Ela se lê do arquivo de token. Onde o mockup precisar de um tamanho, o nome do token é a referência (font.size.body, dimension.space.4), não o número.

12.2 O que mais a auditoria removeu ou corrigiu#

12.3 Escolas de produto de referência#

[observado]. Reconhecer quando o pedido disser "no estilo de".

12.4 A direção do SIGA#

[SEED], decisão registrada: precisão e densidade, no espírito do Linear, com acolhimento pontual.

O motivo: o cliente típico é técnico — engenheiro, gestor industrial — e vai viver na ferramenta; densidade bem hierarquizada serve melhor que respiro. Mas a SEED tem o EEny e um tom acolhedor, e frieza total não é a marca. O acordo é estrutura densa com calor localizado: EEny e microcópia gentil em estado vazio, primeiro acesso e mensagem de sucesso.

Na prática: borda em vez de sombra como padrão em tabela e cartão · sombra shadow.raised só em cartão clicável sob o cursor · espaçamento e tipografia pelos nomes de token (12.1) · tabela em vez de cartão para listagem · quatro a cinco indicadores acima da dobra, não dez · o indicador mais crítico no alto à esquerda.

12.5 Os sete princípios#

[SEED].

1. O canto superior esquerdo é o lugar mais caro da tela. Ali vai a métrica mais crítica, não "Bem-vindo, Rafael!". Linha de cima: três a cinco indicadores primários. Se não couber, são dois painéis por papel, não um inflado.

2. Densidade com hierarquia. Antes de remover um elemento, perguntar se ele pode ficar menor, com menos contraste ou em outro lugar. Tamanho, cor e posição despriorizam sem apagar.

3. Revelação progressiva. No topo, três ou quatro números. Cada nível de detalhe é um clique intencional, e nenhum detalhe fica a mais de dois cliques.

4. Interface por papel. A mesma plataforma com padrões diferentes: quem dirige vê carteira e indicadores financeiros; quem projeta vê obras ativas e ART pendente; quem vende vê propostas e retomadas. Ao pedir um mockup de painel, perguntar de qual papel; sem resposta, o padrão é a visão de direção.

5. Três estados por componente, sempre. Carregando (esqueleto que espelha o layout final) · vazio (ilustração com EEny, uma frase e uma ação) · erro (faixa no lugar, com repetir — nunca tela cheia, que parece defeito).

6. Tabela é o padrão da listagem. Cliente, proposta, contrato, obra. Cartão só quando os atributos são heterogêneos ou a navegação é em tela pequena. O componente canônico está no seed-componentes.md.

7. Escala é lida, não digitada. Espaçamento e tipografia pelos nomes de token do seed-tokens.json (12.1). Trocar ritmo entre telas do mesmo SIGA parece defeito, não decisão.

12.6 Hierarquia quando o espaço é pouco#

Aplicar nesta ordem: tipografia (maior é mais importante; peso antes de cor) · posição (alto-esquerda antes de tudo) · cor (tinta de marca na ação primária, tinta secundária no metadado) · contraste (primário, secundário e terciário pelos tokens de texto, nunca por opacidade arbitrária) · espaço como agrupamento (relacionados perto, grupos distantes).

Regra de ouro: se tudo chama atenção, nada chama.

12.7 Doze anti-padrões#

1. Mensagem de boas-vindas ocupando o alto à esquerda
2. Dez ou mais indicadores acima da dobra
3. Cartão para listagem densa, onde a tabela varre três vezes mais rápido
4. Girador em vez de esqueleto
5. Estado vazio sem ação
6. Erro em tela cheia
7. Espaçamento ou tamanho de texto fora dos tokens — e isto inclui o 13 px que a própria seção prescrevia (12.1)
8. Duas direções de design no mesmo SIGA
9. Painel único para quatro papéis diferentes
10. Densidade sem hierarquia
11. Cor do Tailwind padrão (roxo, azul, laranja, âmbar) — não existe no DS
12. Alvo de toque abaixo de 24 × 24 px, que é o mínimo do critério 2.5.8 de AA; a casa exige 44 × 44 px

12.8 Verificação antes de entregar#

• [ ] Direção declarada (densidade com acolhimento pontual é o padrão)
• [ ] Métrica crítica no alto à esquerda; três a cinco indicadores na linha de cima
• [ ] Revelação progressiva: topo limpo, detalhe a no máximo dois cliques
• [ ] Papel declarado, ou padrão de direção
• [ ] Três estados por componente
• [ ] Tabela para listagem densa
• [ ] Espaçamento pelos nomes de dimension.space.*, não por número decorado
• [ ] Tamanho de texto pelos nomes de font.size.* — e nenhum dos quatro valores que não existem (12.1)
• [ ] Sombra pelo token shadow.raised (o valor muda por tema: tintada no cinza-900 no claro, preta com opacidade no escuro), nunca um preto solto fora do token
• [ ] Cores pela camada semântica do seed-tokens.json, zero Tailwind padrão
• [ ] Alvo de toque ≥ 44 × 44 px
• [ ] Funciona a 1366 px de largura
• [ ] Grafia "SEED engenharia" em todo elemento visível

12.9 Quando o mockup é componente isolado#

Os princípios de token, tipografia e espaçamento continuam. Dispensam-se hierarquia de tela, papel e os três estados quando o pedido é só o componente no estado feliz. Se o pedido diz "botão de exportar", entrega-se o botão; se diz "tela de exportação", entrega-se a tela com os estados.

12.10 O que ficou de fora por falta de fonte#

• Ganho de percepção do esqueleto sobre o girador. [não conferido].
• Percentual de tela em 1366 px. [não conferido] — a regra não depende dele.
• Efeito de onboarding sobre retenção. Removido.
• Qualquer medida de usabilidade do SIGA. Só existe testando com quem usa: pendência PB-P1.

---