---
fonte: 01-canonicos/seed-praticas.md
versao_da_fonte: v0.1
secao: 12
titulo: "Mockup de ERP — boas práticas"
sequencia: 14 de 17
bytes_do_corpo: 13328
md5_do_corpo: bf4cfa7369f1f5742d35fad0e5ae2711
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 de ERP — 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** — só os títulos foram rebaixados dois níveis (código intacto).
>
> **Estado: ⚠ não auditado contra o DS v2** (nenhuma contradição medida automaticamente: sem hex, sem Indie Flower, sem Lovable, sem apelidos do shadcn — a leitura humana ainda não foi feita).

### Melhores práticas — mockup ERP/SaaS B2B 2026

Reference exclusiva da skill `seed-ds-mockup` (também consulta-la pela `seed-ds-ui`). Síntese de práticas estabelecidas no mercado (autoridades + dados de benchmark 2024-2026) aplicáveis ao contexto ERP SEED.

Consultar sempre antes de produzir mockup de feature do ERP, dashboard, listagem, modal, ou tela complexa — princípios + escolhas de design direction.

---

#### Autoridades de referência

Quando o usuário pedir "no estilo de" ou "como [produto]", reconhecer estas escolas:

| Produto / Autor | Especialidade | Estilo de dashboard |
|---|---|---|
| **Linear** | Precision & density — power users que vivem na ferramenta | Tight spacing, monocromático, information-forward, base grid 4px, borders-only flat. **Issue list pattern** (lista densa em vez de cards) |
| **Notion** | Warmth & approachability — colaboração, content-first | Generous spacing, soft shadows, friendly colors, hierarquia tipográfica forte. **Database views** (tabelas/listas configuráveis) |
| **Stripe** | Sophistication & trust — fintech, dados sensíveis | Cool tones, layered shadows, financial gravitas. **Progressive disclosure** (top-level KPIs visíveis, detalhe a 2 cliques) |
| **Vercel** | Right data, zero noise | Black-and-white precision, Geist font, deployment overview minimalista |
| **Mixpanel / Amplitude** | Analytics — drill-down profundo | Interface nunca mostra mais do que foi pedido. Drill-down explícito |
| **HubSpot** | Multi-persona — sales/marketing/admin simultâneos | **Role-based interfaces** — sales rep vê pipeline, marketing vê campanhas, admin vê billing |
| **Asana / ClickUp** | Task/project management — múltiplas visualizações | Lista/Quadro/Calendário/Gantt no mesmo dataset. Adaptive interface |
| **Edward Tufte** | Data-ink ratio principle | Cada pixel deve informar. Nada decorativo |
| **Nielsen Norman Group** | Hierarquia visual baseada em pesquisa | F-pattern (top-left = mais crítico, top row = primárias, left column = secundárias) |

**Aplicação SEED:** o ERP SEED é B2B engineering — clientes técnicos que vão **viver na ferramenta**. Direção mais aderente: **Linear (precision/density) + Notion (warmth quando houver EEny e contextos amigáveis) = híbrido SEED**. Stripe inspira nas telas financeiras (propostas, faturamento).

---

#### Dados de benchmark (UX enterprise 2024-2026)

##### Layout e densidade

- **Sidebar 240-280px** = padrão dominante 2026 (Linear, Notion, Vercel, HubSpot, Asana) — **confirma decisão SEED**
- **4-6 KPIs above the fold** é regra (Stripe, Vercel) — não 10+
- **F-pattern** (Nielsen Norman): top-left = métrica mais crítica, top row = primárias, left column = secundárias
- **Information density > whitespace** em 2026 — Linear, Notion, Superhuman, Stripe ganham ground com interfaces densas (audiência B2B é power user)
- **22.4% dos desktops** ainda em 1366px (StatCounter 2026) — sidebar de 280px + main de 1086px funciona; topbar com tabs colapsando vira hamburger nesses devices

##### Estados de componente

- **Skeleton screens > spinners**: reduz percepção de load em 20-30% (Lukew + Google Web Vitals)
- **3 estados obrigatórios por componente**: Loading (skeleton matching layout) + Empty (illustration + 1 frase + CTA) + Error (banner com retry, não full-page)
- Stripe/Linear/Notion: shimmer animation nos skeletons

##### Data display

- **Tabelas/listas > cards** para power users (Linear issue list, Notion database views)
- **Bar charts > pie charts** (NN/g, basicamente sempre)
- **Pagination ou virtualização** em datasets >100 rows (não renderizar tudo)
- **Drill-down explícito** > "show all" automático (Mixpanel pattern)

##### Onboarding e adoption

- **66% dos B2B customers** param de comprar após onboarding ruim (Onething Design 2026)
- **Just-in-Time onboarding** > tour de 500 páginas inicial (tooltips contextuais quando user tenta a task)
- **Role-aware onboarding**: pergunta o role no signup, mostra defaults relevantes
- **Time-to-value** = métrica mais importante de UX em SaaS

---

#### 4 personalidades de UI enterprise (escolher uma como direção)

Antes de escrever qualquer componente, **comprometer-se com uma direção**:

##### Precision & Density (Linear, Raycast)

- Tight spacing, monochrome, information-forward
- Para power users que vivem na ferramenta
- Borders-only flat (zero shadow, definição via borda)
- Base grid 4px, scale limitada (4, 8, 12, 16, 24, 32, 48)

##### Warmth & Approachability (Notion, Coda)

- Generous spacing, soft shadows, friendly colors
- Para produtos que querem feel humano
- Hierarquia tipográfica forte
- Subtle single shadows (`0 1px 3px rgba(0,0,0,0.08)`)

##### Sophistication & Trust (Stripe, Mercury)

- Cool tones, layered depth, financial gravitas
- Para produtos que lidam com dinheiro ou dados sensíveis
- Layered shadows (múltiplas camadas pra depth real)
- Progressive disclosure forte

##### Boldness & Clarity

- High contrast, dramatic negative space, confident typography
- Para produtos que querem feel moderno e decisivo

---

#### Direção de design SEED (escolha documentada)

**Direção primária do ERP SEED: Precision & Density (Linear-like) + Warmth localizado**

Justificativa:
- Cliente típico SEED é técnico (engenheiro, gestor industrial) — quer densidade, scan rápido, dados visíveis
- ERP é ferramenta de trabalho diária — eficiência > delight
- Mas SEED tem EEny + tom acolhedor — não pode ser "frio total" como Linear
- Compromisso: **Linear-like estrutura (densidade, tipografia, borders flat)** + **Notion-like warmth pontual (EEny em empty states, microcopy acolhedor, turquesa em vez de cinza puro)**

Implicações práticas:
- **Borders-only flat** como default em tabelas e cards (sem shadows pesadas)
- **Subtle single shadow** (`0 1px 3px rgba(0,0,0,0.06)`) em hover de cards clicáveis
- Spacing base 4px (4, 8, 12, 16, 24, 32, 48) — alinhado com Linear
- Tabelas em vez de cards para listagens (cliente, proposta, contrato)
- 4-5 KPIs above the fold em dashboards (não 10+)
- F-pattern: indicador crítico top-left, primárias top row
- EEny + microcopy acolhedor apenas em empty states / onboarding / mensagens de sucesso

---

#### 7 princípios consolidados pra mockup ERP SEED

##### 1. F-pattern hierarchy

Top-left = métrica mais crítica do dashboard. Top row = 3-5 KPIs primários. Left column = secundárias. Quando dashboard tiver mais que isso, **considerar 2 dashboards** (por papel) em vez de inflar 1.

**Anti-padrão:** "Welcome, Rafael!" ocupando o top-left. Esse espaço é caro demais pra mensagem.

##### 2. Density > whitespace (power user wins)

Audiência ERP SEED é power user — quer dados, não breathing room. **Information density bem hierarquizada reduz cognitive strain**, ao contrário do que minimalismo dos 2010 sugeria.

Regra prática:
- Antes de remover elemento, perguntar: "ele pode ficar menor, com menos contraste, ou reposicionado?"
- Tamanho/cor/posição despriorizam sem remover

##### 3. Progressive disclosure (Stripe pattern)

Top-level = 3-4 números que o decisor precisa ver imediatamente.
Cada nível adicional de detalhe = **clique intencional**, nunca automaticamente exposto.
Detalhe a no máximo 2 cliques de qualquer KPI.

**Aplicação SEED:** dashboard de cliente mostra resumo (contratos ativos, valor total, última interação) → clique abre detalhe completo. Não inflar resumo com 15 campos.

##### 4. Role-based interface (HubSpot pattern)

Mesma plataforma, defaults diferentes por papel:
- Rafael (CEO) vê pipeline + KPIs financeiros
- Engenheiro vê projetos ativos + ARTs pendentes
- Comercial vê propostas + follow-ups

**Aplicação SEED:** quando criar mockup de dashboard, perguntar pra qual papel. Se não souber, default = CEO/diretor (visão executiva).

##### 5. Skeleton > spinner (perceived performance)

Loading state SEMPRE é skeleton que **matches o layout final**, não spinner genérico. Reduz percepção de load 20-30%.

Empty state SEMPRE tem 3 partes: illustration (EEny pose 06 + ondas SEED) + 1 frase + CTA.

Error state SEMPRE é banner inline com retry, não tela cheia.

##### 6. Tabelas > cards (B2B power users)

Para listagens densas (clientes, propostas, contratos, projetos), **tabela** é o default. Cards só quando atributos são heterogêneos ou navegação rápida em mobile.

Linear issue list + Notion database views = exemplos canônicos. Tabela do ERP SEED segue mesmo padrão (`componentes-ui-seed.md` #7).

##### 7. Coerência tipográfica e de spacing

**Spacing scale fixa** (4, 8, 12, 16, 24, 32, 48) — nada arbitrário. Tudo snapando.

**Typography scale fixa** (11, 13, 16, 18, 20, 24, 30, 36) — nada entre.

Trocar layout/spacing/fonts entre páginas do mesmo ERP = parece amador. **Consistência > criatividade local.**

---

#### Padrões de density information hierarchy

Quando precisar mostrar muito dado num espaço pequeno (caso comum em ERP), aplicar nessa ordem:

1. **Hierarquia tipográfica:** maior = mais importante. Bold > regular. `--text` > `--cinza`.
2. **Hierarquia espacial:** top-left > top-right > center > bottom.
3. **Hierarquia cromática:** `--turquesa` ou `--amarelo` em CTA primário, `--cinza` em metadata.
4. **Hierarquia de contraste:** dado primário em `--text`, secundário em `--cinza`, terciário em `--cinza-light` (quase invisível).
5. **Spacing como agrupamento:** elementos relacionados próximos (4-8px), grupos diferentes distantes (24-32px).

**Regra de ouro:** se tudo está chamando atenção, nada está. **Hierarquia é prioridade explícita.**

---

#### Anti-padrões verificados em produção (NÃO repetir)

1. **Welcome message ocupando top-left do dashboard** → desperdiça F-pattern
2. **10+ KPIs above the fold** → user não consegue priorizar
3. **Cards pra listagem densa** → quando tabela faria scan 3× mais rápido
4. **Spinner em vez de skeleton** → percepção de lentidão pior
5. **Empty state vazio sem CTA** → user fica sem saber o que fazer
6. **Error state tela cheia** → quebra contexto, parece bug
7. **Spacing arbitrário** (13px, 22px, 7px) → quebra ritmo visual
8. **Múltiplas direções de design no mesmo ERP** (uma página Linear, outra Stripe) → parece Frankenstein
9. **One-size-fits-all dashboard** → 4 papéis diferentes vendo o mesmo, ninguém satisfeito
10. **Density sem hierarquia** → vira cluttered, não informativo
11. **Importar cores Tailwind padrão** (purple, blue, orange, amber) → quebra DS SEED
12. **Touch target <44×44px** em mobile → falha WCAG 2.2 AA

---

#### Checklist pré-entrega (12 itens)

Antes de entregar mockup do ERP SEED:

- [ ] Direção de design declarada (Precision & Density + warmth pontual = default SEED)
- [ ] F-pattern aplicado: top-left = mais crítico, top row = 3-5 KPIs primários
- [ ] Density > whitespace (não inflar com breathing room sem razão)
- [ ] Progressive disclosure: top-level limpo, detalhe a clique
- [ ] Role declarado (CEO/comercial/engenheiro) ou default executivo
- [ ] 3 estados por componente: loading skeleton + empty acolhedor + error inline
- [ ] Tabela em vez de cards pra listagem densa (default ERP SEED)
- [ ] Spacing scale 4pt rigorosa (4, 8, 12, 16, 24, 32, 48)
- [ ] Typography scale fixa (11, 13, 16, 18, 20, 24, 30, 36)
- [ ] Paleta 100% SEED (18 tokens — ver `paleta.md`), zero Tailwind padrão
- [ ] Touch targets ≥44×44px em mobile
- [ ] Grafia "SEED engenharia" correta em todos os elementos visíveis

---

#### Quando o mockup é só "componente isolado"

Princípios continuam valendo (paleta, tipografia, spacing scale, hierarquia). Mas:
- Não precisa F-pattern (componente isolado, sem contexto)
- Não precisa role (componente é universal)
- Não precisa empty/loading/error se foco é demonstrar o estado "happy path"

Skill calibra: se briefing diz "botão de exportar", entrega só o botão. Se diz "tela de exportação", entrega tela completa com estados.

---

#### Composição com outras skills

- **`seed-ds-proposta`** — mockup vai pra Word/PDF. Stack: inline styles obrigatório (não Tailwind CDN). Export PNG 2x retina.
- **`seed-ds-slide`** — mockup vai pra PPTX. Stack: inline styles + dimensões 16:9 ou similar. Export PNG.
- **`seed-ds-post`** — mockup vai pra Instagram. Stack: SVG puro ou inline styles dentro de device frame. Dimensões 1080×1080 ou 1080×1350.
- **`seed-ds-carrossel`** — múltiplos mockups em sequência. Coerência visual entre slides obrigatória.
- **`seed-ds-ui`** — workflow comum: mockup aprovado → `seed-ds-ui` implementa código React. Mockup é descartável; código vive.

---