---
fonte: 01-canonicos/seed-praticas.md
versao_da_fonte: v1.13
secao: 12
titulo: "Mockup do SIGA — boas práticas"
status: vigente
vigente_desde: null
superseded_by: null
status_origem: cabecalho
tipo_de_fatia: secao
quando_consultar: "Mockup do SIGA: o que mostrar, densidade, estado realista e o rótulo 'ilustrativo'."
em_uma_frase: null
nao_cobre: null
conceitos: null
vocabulario: null
sequencia: 14 de 25
bytes_do_corpo: 11419
md5_do_corpo: 84a07695b239860f3ea2b8ba37a183fa
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-praticas.md
---
## 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:

| a seção prescrevia | existe no DS v2? | o que o DS tem |
|---|---|---|
| 11 px | ✅ | `font.size.caption` = 11 px |
| **13 px** | ⛔ **não existe** | o DS tem `small` = 12 px e `body` = **14 px** |
| 16 px | ✅ | `font.size.field-touch` = 16 px |
| 18 px | ✅ | `font.size.h4` = 18 px |
| **20 px** | ⛔ **não existe** | — |
| 24 px | ✅ | `font.size.h3` = 24 px |
| **30 px** | ⛔ **não existe** | o DS tem `h2` = **32 px** |
| **36 px** | ⛔ **não existe** | o DS tem `h1` = **42 px** |

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

| o que a seção dizia | o que a conferência achou | o que fica |
|---|---|---|
| Sombra `0 1px 3px rgba(0,0,0,0.08)` e `0 1px 3px rgba(0,0,0,0.06)` | o DS tem `shadow.raised`: **duas camadas**, `0 1px 2px rgba(36,46,52,0.10)` + `0 1px 1px rgba(36,46,52,0.06)` — preto puro não existe no sistema, a sombra é **tingida** | corrigido para o token `shadow.raised` |
| *"Skeleton reduz percepção de load em 20-30 % (Lukew + Google Web Vitals)"* | o percentual não aparece em fonte identificável; a preferência por esqueleto é discutida na literatura, o número não | número **removido**; a regra fica `[SEED]` — esqueleto que **espelha o layout final**, porque orienta o olho, não porque acelera nada |
| *"66 % dos B2B param de comprar após onboarding ruim (Onething Design 2026)"* | blog de fornecedor, sem amostra | **removido** |
| *"22,4 % dos desktops ainda em 1366 px (StatCounter 2026)"* | não conferido na fonte; o número circula desatualizado | `[não conferido]`. A regra que importa não depende dele: **a interface tem de funcionar em 1366 px de largura**, que é a menor tela de trabalho realista do cliente |
| *"Paleta 100 % SEED (18 tokens — ver `paleta.md`)"* | `paleta.md` é maio/2026; o canon vivo tem **209 tokens de cor** e se instala pelo registry | corrigido para a **camada semântica do `seed-tokens.json`** |
| Referência a `componentes-ui-seed.md` #7 | arquivo de maio/2026 | corrigido para o **`seed-componentes.md`** |
| *"Touch target < 44 × 44 px falha WCAG 2.2 AA"* | ⚠ impreciso: o critério **2.5.8 Target Size (Minimum)** de AA pede **24 × 24 px**; 44 × 44 é o **2.5.5 (AAA)** e a recomendação de plataforma móvel | corrigido: **mínimo AA de 24 × 24 px**, e o alvo da casa continua **44 × 44 px** por decisão `[SEED]`, que é mais rigoroso |

### 12.3 Escolas de produto de referência

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

| Produto | O que a escola resolve |
|---|---|
| **Linear** | Precisão e densidade para quem vive na ferramenta: espaçamento apertado, lista densa em vez de cartão, definição por borda e não por sombra |
| **Notion** | Acolhimento: espaçamento generoso, hierarquia tipográfica forte, visões configuráveis da mesma tabela |
| **Stripe** | Confiança em tela que lida com dinheiro: revelação progressiva, indicadores no topo, detalhe a dois cliques |
| **Vercel** | O dado certo, ruído zero |
| **HubSpot** | Interface por papel: cada perfil vê o que lhe interessa primeiro |
| **Edward Tufte** | Cada pixel informa; nada é decorativo |
| **Nielsen Norman Group** | Hierarquia visual por padrão de leitura: alto-esquerda é o lugar mais caro da tela |

### 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`.

---