# DESIGN GUERRATECH — Estudo de design pro layout 100% novo da Calculadora

> **Versão** 1.0 · 11/09/2026 · autor: diretor de design de produto (Claude) a pedido do Edson
> **Escopo**: Calculadora GuerraTech (produto de orçamento pra fábricas de inox): calculadora por família, itens padrão, projeto especial com lista de materiais, upload DXF/PDF → rascunho, propostas espelhadas no Ploomes, funil.
> **Uso**: este documento é o **contrato de gosto** que guia os modelos de tela. Todo mock, protótipo ou entrega passa pelo roteiro de avaliação da seção 7. Se um modelo viola um princípio da seção 2, ele volta.

---

## 0. O pedido do Edson, traduzido em critérios

O pedido literal: *"algo totalmente diferente do site atual, 100% novo, futurista, parecendo coisa de cinema, que a pessoa bata o olho e fique impressionada; facilidade de entendimento; facilidade de operar; nada apertado ou poluído; não quero algo do passado parecendo IA".*

Isso são **seis critérios** que puxam em direções diferentes. O trabalho de design é resolver a tensão entre eles, não escolher um lado:

| Pedido | O que significa na prática | Onde a tensão aparece |
|---|---|---|
| **100% novo / diferente do atual** | A calculadora hoje mora dentro do /gestao (cartões brancos, cinza #f8fafc, chips coloridos, layout de "sistema de gestão"). O novo é um **produto próprio** com a pele GuerraTech (fundo #020814, azul #2ea3ff). Não é "escurecer o que existe". | Novo ≠ estranho. Quem orça (May, Rai, vendedor) precisa achar tudo sem treino. |
| **Futurista / cinema / impressiona no primeiro olhar** | Sensação de **cockpit**: uma tela que parece saber o que está fazendo. Profundidade, precisão, um número grande e vivo, telemetria discreta. | Cinema de verdade (Iron Man, Minority Report) é feito pra ser **olhado**, não **operado**. O "gorilla arm" da Minority Report é a lição: o que impressiona no trailer cansa em 20 minutos de uso. |
| **Facilidade de entendimento** | Em 5 segundos qualquer pessoa sabe: onde escolho, onde vejo o preço, o que fazer a seguir. | Efeito demais esconde a hierarquia. |
| **Facilidade de operar** | Teclado de ponta a ponta, sem caça ao botão, sem digitar duas vezes, campo certo já com foco. | Animação em toda interação vira freio (Linear: a interface "rápida" é a que **não** anima o que se repete 100× por dia). |
| **Nada apertado ou poluído** | Respiro, uma coisa por vez, cor só onde carrega significado. | Densidade é necessária: lista de materiais com 30 linhas, funil com 60 negócios. Respiro ≠ esconder dado (Bloomberg/Stripe). |
| **Não parecer do passado nem IA** | Sem gradiente roxo, sem três cartões iguais em fila, sem Inter "por padrão", sem glassmorphism em tudo, sem fonte "sci-fi" dos anos 2000 (Orbitron/Rajdhani), sem HUD de anel girando. | O caminho fácil pro "futurista" é justamente o clichê. Futurista de verdade em 2026 é **contenção + precisão**, não neon. |

**Tese deste estudo**: o "cinema" que impressiona e continua útil às 17h de uma sexta é o de **Oblivion** (GMUNK), não o de **Tron**: fundo profundo, grade fina, tipografia precisa, saturação **só** onde há alerta, um número dominante, movimento curto e com propósito. O próprio Kosinski pediu ao GMUNK "180 graus do Tron: mais simples, mais elegante". Esse é o nosso norte.

---

## 1. O produto que a tela precisa servir (o que não pode se perder)

Lido em `frontend_gestao_novo/js/modules/orcamento-calc.js` (cabeçalho e funções) e na landing `frontend_calc/index.html`. A tela **não calcula**: ela desenha o **contrato** que a API entrega (`GET /calcv36/form/<família>`) e manda as entradas pro motor (`POST /calcv36/orcar`). Regras de visibilidade (`visivel_se`, `exclusivo`, `forcar_quando`) vêm do contrato. Isso é ótimo pro design: a tela é **um renderizador de contratos + um painel de preço**, e tudo o mais orbita isso.

Superfícies que o layout novo precisa cobrir (mapeadas pelas funções existentes):

| Superfície | Funções hoje | O que o usuário faz | Elemento dominante |
|---|---|---|---|
| **Trilho de famílias** | `renderRail`, `ajustaRail`, `railAberto` | Escolhe bancada/mesa/estante/hidrante… | Lista curta, selo ✓ conferido |
| **Formulário da família** | `carregarForm`, `renderForm`, `renderCampo`, `aplicarRegras`, `set`, `agendar` (debounce 300 ms) | Preenche dimensões e opções; campos aparecem/somem por regra | Grupos de campos, dimensões |
| **Resultado / preço** | `calcular`, `renderRes`, `dimsAtuais` | Vê preço, margem, decomposição, parâmetros quebrados | **O número** |
| **Configurar da vez** | `abrirMaquina` (parâmetros só neste orçamento) | Muda reforço 0,8→1,0 mm, pé reforçado… sem mexer no padrão | Gaveta lateral |
| **Itens padrão** | `abrirItens`, `carregarItens`, `renderItemLista`, `renderItemComp`, `renderItemRes`, `calcularItem` | Catálogo com estudo de cada item: preço hoje × preço no estudo | Lista + composição |
| **Projeto especial** | `abrirEspecial`, `renderEspRail`, `renderEspForm`, `renderEspRes`, `calcularEsp`, `importar` (DXF/PDF), `espRecuperaLocal` | Lista de materiais (chapa m², tubo m, laser, markup 3–6×); importa DXF/PDF → linhas com sugestão e confiança | Tabela editável + dropzone |
| **Carrinho / proposta** | `renderCarrinho`, `propAdicionar`, `propPatch`, `propNova`, `acompanhar` (polling 3 s) | Junta itens, cliente, funil/etapa, parcelas; envia pro Ploomes | Painel lateral persistente |
| **Propostas** | `abrirProps`, `ppCarregar`, `renderPropsLista`, `ppAbrir`, `chipProp`, `subDaProposta` | Enviadas / rascunhos / solicitações do CRM; revisão, aprovação de desconto, PDF | Lista com estado |
| **Funil** | `abrirFunil`, `abrirFicha`, `salvaFC`, `FX_COR`, `fxDias` | Vê negócios por etapa; abre ficha; edita campos | Colunas + ficha |
| **Blindagem** | `confBotao`, `marcarConferido`, `parametros_quebrados` | Marca ✓ conferido; vê parâmetro quebrado | Selo + aviso |

Vocabulário obrigatório (regras já aprendidas em memória): **"Reforço do tampo"** (nunca cachorro/chumbador), pé reforçado sem receita exposta, parcelas "Entrada" + "2° parcela p/ liberação da saída do material", custo destrinchado só pra quem tem alçada, custo vivo é **aviso**, nunca muda preço.

---

## 2. Dez princípios (com o porquê)

Cada princípio tem: **regra**, **porquê**, **exemplo concreto na calculadora**, **como falha**.

### P1 · Um número manda na tela
**Regra**: em qualquer momento existe **um** número dominante — o preço de venda do que está sendo orçado. Ele é o maior elemento tipográfico, tem posição fixa e nunca é empurrado por scroll.
**Porquê**: Stripe mostra exatamente 5 métricas na home e o resto some; Mercury põe o saldo no topo e os controles um nível abaixo; um painel de F1 põe as luzes de troca onde o olho bate sem procurar. O olho precisa de um ponto de pouso — se tudo grita, nada grita.
**Exemplo**: painel de preço à direita, altura fixa, `Geist 600 · 40–56 px · tabular-nums`, com margem e "preço vivo de DD/MM" embaixo em mono 12 px. Quando o formulário rola, o painel fica.
**Como falha**: preço no fim do formulário; três KPIs do mesmo tamanho; preço competindo com custo.

### P2 · Estrutura sentida, não vista
**Regra**: bordas, divisores e fundos de painel existem pra orientar, não pra decorar. Contraste de borda ≤ o do texto secundário. Profundidade vem de uma **escada de superfícies** (bg → panel2 → panel → panel3), não de sombras.
**Porquê**: é a frase da Linear no redesign de 2024 ("structure should be felt not seen"); Raycast constrói toda a profundidade com uma escada de cinzas e **zero drop-shadow**; a hairline de 1 px em cinza escuro carrega toda a borda. Sombras em fundo escuro não aparecem — só sujam.
**Exemplo**: cartão do formulário `background: var(--panel)` com `border: 1px solid var(--border-soft)` (o azul #163a74 a 45% de opacidade). Gaveta "Configurar da vez" em `--panel3` (um degrau mais claro) — ela parece "mais perto" sem sombra alguma.
**Como falha**: bordas azuis vivas em todo cartão (o atual `#163a74` em 100% em tudo é um pouco alto pra dentro do app — reservar o azul cheio pra foco/seleção); cartão dentro de cartão dentro de cartão; sombras 0 8px 24px em fundo #020814.

### P3 · Cor é sinal, não tinta
**Regra**: cada cor cromática tem **um** significado e aparece **só** quando ele acontece. Azul = foco/ação primária/seleção. Verde = confirmado/conferido/ok. Âmbar = atenção não bloqueante (custo vivo diferente, preço de estudo antigo). Vermelho = erro/bloqueio/negado. Texto e chrome são acromáticos (branco-azulado e cinzas do tema).
**Porquê**: Bloomberg mantém o âmbar como cor "não semântica" justamente pra que vermelho/verde continuem significando queda/alta; Stripe reserva cor pra status e usa sparklines monocromáticas; Mercury reserva vermelho e amarelo **exclusivamente** pra erro e aviso. Cor barata = cor sem valor.
**Exemplo**: o selo "✓ conferido" é a única coisa verde na tela de família. O chip de margem (`MARG`, hoje bolinha ok/meio/ruim) vira **um** ponto de 8 px + número; nunca pinta a linha inteira.
**Como falha**: chips de status em 6 cores pastel (`.pp-chip.rascunho/aguarda/enviando/enviada/erro/negada/cancelada` hoje); ícones coloridos "pra alegrar"; gradiente no título.

### P4 · Rápido primeiro, bonito depois — e o bonito nunca freia
**Regra**: interação que se repete dezenas de vezes por dia (trocar campo, abrir dropdown, hover em linha) tem **0–100 ms** de transição. Mudança de contexto (abrir gaveta, trocar de modo) tem **180–260 ms**. Só **um** momento por fluxo pode ter o "momento cinema" de até **600 ms** (o preço chegando, a proposta criada).
**Porquê**: Linear usa 100/250/350 ms e entrada instantânea + saída em 150 ms; Emil Kowalski: "abaixo de 300 ms; remova animação de interações que se repetem centenas de vezes"; Apple HIG: "evite adicionar movimento a interações frequentes". Velocidade percebida é a primeira forma de "parecer do futuro".
**Exemplo**: hover em linha de item padrão: `transition: none` (muda `background` seco). Abrir "Configurar da vez": `transform: translateX(16px) → 0` + `opacity` em 200 ms `ease-out`. Preço novo: dígitos rolam 250 ms com `tabular-nums` — e **só** quando o valor muda, nunca durante a digitação (o debounce de 300 ms já existe).
**Como falha**: fade em toda troca de campo; skeleton que pisca a cada recálculo; spinner no preço.

### P5 · Teclado de ponta a ponta, mouse opcional
**Regra**: tudo que o orçamentista faz 20× por dia tem atalho e foco previsível. `⌘K`/`Ctrl+K` abre a paleta (família, cliente, proposta, item). `Tab` percorre os campos na ordem da planilha. `Enter` no último campo = "adicionar à proposta". `Esc` fecha gaveta. `?` mostra atalhos.
**Porquê**: Linear e Raycast normalizaram "keyboard-first" como sinônimo de ferramenta profissional; o leitor de código de barras do PCP já é "teclado, tecla a tecla". A May orça com uma mão no telefone.
**Exemplo**: ao escolher família, o foco cai no primeiro campo de dimensão. A paleta responde a "banc" → Bancada com cuba; "14202" → proposta 14202; "luan" → cliente.
**Como falha**: precisar clicar no campo depois de escolher família; dropdown que só abre com mouse; atalho sem dica visual.

### P6 · Progressivo, nunca escondido
**Regra**: a tela mostra o **essencial** (dimensões, opções da família, preço); o **comum** fica a um clique (Configurar da vez, decomposição); o **avançado** fica atrás de um "mais" (parâmetros, custo destrinchado, quem pode). O que está escondido tem **sinal** de que existe (contador, chevron, valor-resumo).
**Porquê**: progressive disclosure (Nielsen) e o padrão do GitLab "essential / common / advanced"; Xometry deixa a DFM em aba "Analyze" e não polui o configurador; Figma aprendeu na UI3 que painel flutuante em cima do trabalho atrapalha — voltou pra painéis fixos.
**Exemplo**: a linha "Reforço do tampo · 1,0 mm (só neste orçamento)" aparece como resumo abaixo do preço; clica → abre a gaveta com o parâmetro. O custo aparece como "Custo ▸" fechado, só pra quem tem alçada.
**Como falha**: tudo aberto de uma vez (poluído); tudo escondido sem sinal (perde-se); painel flutuante cobrindo o formulário.

### P7 · Estado sempre visível: motor, preço, prova
**Regra**: o usuário sempre sabe (a) se o motor está vivo, (b) de quando é o preço da matéria-prima, (c) se esta família/item está conferida e quando, (d) o que a proposta está fazendo agora (rascunho → enviando → nº no Ploomes). Isso mora numa **linha de telemetria** fixa, discreta, mono.
**Porquê**: heurística nº 1 de Nielsen (visibilidade do status). É também o efeito "cockpit" mais barato e mais honesto: painel de F1 e Crew Dragon mostram status contínuo em texto pequeno, não em animação.
**Exemplo**: barra de 28 px no topo: `MOTOR V36 · OK · BDCUSTOS 11/09 07:12 · ✓ CONFERIDA 03/09 · PROPOSTA #14310 RASCUNHO`. Em falha: o item vira âmbar/vermelho e o preço anterior fica com "ghost" (opacidade .5 e etiqueta "último preço válido").
**Como falha**: toast que some em 3 s com a única informação de erro; preço zerado sem explicação; "carregando…" sem dizer o quê.

### P8 · Densidade por camada, não por aperto
**Regra**: três níveis de densidade coexistem: **Palco** (formulário e preço: respiro alto, 1 coluna, campos 36–40 px), **Lista** (itens, propostas, materiais: linhas 32–36 px, colunas alinhadas, tabular-nums), **Telemetria** (mono 11–12 px, caps, espaçamento .12em). Nunca misturar: uma lista não usa o respiro do palco, o palco não usa a compressão da lista.
**Porquê**: Tufte — maximizar a tinta de dado, apagar a tinta que não é dado; Bloomberg e Ramp dão densidade pra profissional porque "densidade é velocidade" pra quem vive na ferramenta; ao mesmo tempo Stripe mostra que a hierarquia vem de tipografia e espaço, não de cor.
**Exemplo**: lista de materiais do projeto especial: cabeçalho mono caps, linhas 34 px, coluna de valor alinhada à direita, sem zebra, divisor `--border-soft`. Formulário da família: um grupo por vez com título mono caps e 20 px entre campos.
**Como falha**: lista de 40 linhas com 60 px cada ("respiro" que vira scroll infinito); formulário com 3 colunas de 11 px.

### P9 · Fala a língua da May, não do motor
**Regra**: rótulo, mensagem de erro e estado usam o vocabulário do cliente e da fábrica. Nada de `celula`, `parametros_quebrados`, `snapshot`, `stage_id` na tela. Erro diz **o que aconteceu + o que fazer**.
**Porquê**: heurística nº 2 de Nielsen; Mercury troca vocabulário bancário por vocabulário de produto em cada ponto de contato; Stripe: "Your card was declined. Contact your bank or try a different payment method". Sistema que fala jargão parece velho.
**Exemplo**: `parametros_quebrados` → "2 parâmetros desta família mudaram na planilha desde a última conferência — o preço pode diferir. Ver quais". `enviando` → "Criando proposta no Ploomes…". `negada` → "Desconto não aprovado por Fulano em 10/09 — ajuste ou peça de novo".
**Como falha**: chip "ERRO"; "tuple index out of range"; "status 3".

### P10 · Um efeito de cinema por fluxo, e ele tem função
**Regra**: cada fluxo (orçar, importar DXF, enviar proposta) pode ter **um** momento "uau", e ele precisa **comunicar** algo (chegou o preço; o arquivo virou peças; a proposta ganhou número). Todo o resto é sóbrio. Nenhum efeito é infinito enquanto a pessoa opera — só em estado ocioso/vazio.
**Porquê**: a "onda" da Guerra Intelligence na landing funciona porque é a assinatura da marca; se repetida em toda tela vira ruído. Oblivion reserva saturação pra alerta; Raycast usa a faixa vermelha **exatamente uma vez** por página. Cinema por escassez.
**Exemplo**: ao importar DXF, as linhas da lista **se desenham** uma a uma (stagger 30 ms, máx. 12 itens visíveis, depois entra em bloco) com o perímetro de corte "traçado" em stroke-dashoffset 400 ms. Ao chegar o número do Ploomes, o painel de preço faz um pulso de contorno 600 ms em `--ok` e assenta. Depois, silêncio.
**Como falha**: anel girando em volta do preço; partículas no fundo; "glitch" no título; scanline permanente sobre o formulário.

---

## 3. Referências reais (o que copiar, o que evitar)

Legenda de "peso": ⭐⭐⭐ = referência estrutural (copiar o princípio) · ⭐⭐ = referência pontual · ⭐ = referência de "o que não fazer" ou só de clima.

| # | Referência | O que faz bem | O que copiar | O que evitar | Peso | Link |
|---|---|---|---|---|---|---|
| 1 | **Linear** (app + redesign 2024) | Sensação de velocidade: local-first, otimista, transições 100/250/350 ms, entrada instantânea/saída 150 ms; sidebar que "recua"; ícones reduzidos; bordas suaves ("estrutura sentida"). | Escala de duração; sidebar dimmed; `⌘K`; "Don't compete for attention you haven't earned". | Cinzas quentes (nosso tema é azul-frio, manter); minimalismo tão extremo que esconde o preço. | ⭐⭐⭐ | [linear.app/now](https://linear.app/now/behind-the-latest-design-refresh) · [performance.dev](https://performance.dev/how-is-linear-so-fast-a-technical-breakdown) |
| 2 | **Raycast** (site + app) | Escada de superfícies em vez de sombra; 98% acromático, acento **uma** vez; hairline 1 px; Inter com `ss03` como assinatura; sem transição de abertura ("velocidade é a utilidade"). | Surface ladder (#07080a→#0d0d0d→#101111→#121212 → traduzir pro azul); CTA branco único; acento por escassez. | Dependência total de mono-marca; site é marketing, o app é mais denso que parece. | ⭐⭐⭐ | [DESIGN.md Raycast](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/raycast/DESIGN.md) |
| 3 | **Vercel / Geist** | Tipografia suíça, Geist Sans + Geist Mono como uma só voz; numerais mono nítidos; espaço generoso; um acento. Geist está no Google Fonts (verificado). | Par Geist + Geist Mono; numerais tabulares; "single-accent neutrality". | Preto absoluto #000 (halation); layout de docs pra uma calculadora. | ⭐⭐⭐ | [vercel.com/geist](https://vercel.com/geist/introduction) · [vercel.com/font](https://vercel.com/font) |
| 4 | **Stripe Dashboard** | 5 métricas na home, cor só pra status, sparklines mono, 6 tamanhos de tipo, erro = "o que + o que fazer", empty state mostra zero (não esconde), tabelas que escalam de 5 pra 50 features. | Hierarquia por tipografia/espaço; microcopy de erro; estado vazio com ação. | Tema claro (nosso é escuro); densidade de sidebar com 30 links. | ⭐⭐⭐ | [925studios – Stripe](https://www.925studios.co/blog/stripe-dashboard-design-breakdown) |
| 5 | **Mercury** | "Calma, não energia"; verde=crescimento, azul=estabilidade, vermelho/amarelo **só** erro/aviso; vocabulário de produto, não de banco; NPS 73,8. | Regra de cor semântica; tom que trata o usuário como profissional. | Onboarding de 10 telas (não precisamos). | ⭐⭐ | [925studios – Mercury](https://www.925studios.co/blog/mercury-design-breakdown) |
| 6 | **Bloomberg Terminal** | Densidade pra quem passa 14 h na tela; âmbar como cor não-semântica pra preservar vermelho/verde; mono pra números; escuro por padrão; acessibilidade de cor estudada. | Telemetria mono; âmbar = aviso não bloqueante; linhas 32 px em listas. | Estética CRT/legado; sem espaço em branco; navegação por código digitado. | ⭐⭐ | [Bloomberg UX – cor](https://www.bloomberg.com/ux/2021/10/14/designing-the-terminal-for-color-accessibility/) · [UX Mag](https://uxmag.com/articles/the-impossible-bloomberg-makeover) |
| 7 | **Oblivion** (GMUNK, 2013) | Dot grid como esqueleto; azuis/laranjas dessaturados; saturação só em alerta; linhas finas; duas fontes; brief de "funcionalidade e minimalismo". | Dot grid a 3–4% no fundo do palco; regra "saturado = alerta"; retículo de canto na seleção. | Glitch, flicker, fragmentação (são narrativa de paranoia, não UX); overlay de luz. | ⭐⭐⭐ | [HUDS+GUIS Oblivion](https://www.hudsandguis.com/home/2013/05/02/oblivion-interface-design) · [AWN](https://www.awn.com/vfxworld/crushing-the-user-interface-designs-of-oblivion) |
| 8 | **Iron Man / JARVIS** | HUD que reorganiza a informação pelo objetivo do momento; foco em um alvo; informação transitória some quando não serve. | "Informação transitória some" (aviso de custo vivo que desaparece quando volta ao normal); foco em uma coisa. | Anéis girando, camadas 3D, densidade de sobreposição; é cinema pra ser olhado em 2 s de corte. | ⭐ | [scifiinterfaces – Iron HUD](https://scifiinterfaces.com/tag/iron-hud/?order=asc) |
| 9 | **Minority Report** (Underkoffler) | Pesquisa real do MIT; mental model de "manipular dados direto". Lição principal é negativa: **gorilla arm** — o que impressiona cansa. | O teste "20 minutos de uso" antes de aprovar qualquer efeito. | Gesto/efeito que exige esforço contínuo; interface que vira performance. | ⭐ | [Dan Saffer](https://odannyboy.medium.com/why-you-want-but-wont-like-a-minority-report-style-interface-626d0fd6096b) · [The Awl](https://www.theawl.com/2013/02/how-minority-report-trapped-us-in-a-world-of-bad-interfaces/) |
| 10 | **Apple visionOS** | Materiais de vidro com propósito (deixar o mundo passar), evitar empilhar materiais leves, foco em legibilidade, profundidade por camadas contadas (3). | Máx. 1 camada de vidro por tela (paleta `⌘K` e gavetas); nunca vidro sobre vidro. | Glass em cartões de conteúdo; blur pesado em máquina fraca (custa GPU). | ⭐⭐ | [WWDC23 Spatial UI](https://developer.apple.com/videos/play/wwdc2023/10076/) |
| 11 | **Apple HIG – Motion** | "Prefira animações rápidas e precisas"; nunca comunicar só por movimento; respeitar Reduce Motion; evitar movimento em interação frequente. | As quatro regras acima, literalmente. | — | ⭐⭐⭐ | [HIG Motion](https://developer.apple.com/design/human-interface-guidelines/motion) |
| 12 | **Material Design 3 – Motion** | Tokens: easing *standard* `cubic-bezier(.2,0,0,1)` e *emphasized decelerate* `cubic-bezier(.05,.7,.1,1)`; durações short 50–200, medium 250–400, long 450–600, extra-long 700–1000 ms. | Tokens de duração/easing como base do nosso `--t-*`. | Emphasized em tudo (fica "molenga"); durações long fora do "momento cinema". | ⭐⭐ | [M3 easing & duration](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs) |
| 13 | **Emil Kowalski – Animations on the Web** | `ease-out` pra entrar/sair, nunca `ease-in`; < 300 ms; não animar de `scale(0)` (começar em .93+); `transform-origin` na origem do gatilho; `:active{scale(.97)}`; blur 2 px pra mascarar transição. | Todas as sete dicas; particularmente origem do gatilho na gaveta e no `⌘K`. | Bounce/elastic (tell de IA). | ⭐⭐⭐ | [7 practical tips](https://emilkowal.ski/ui/7-practical-animation-tips) |
| 14 | **Tesla UI** (e a reação Euro NCAP 2026) | Provou que tela grande e limpa vende; **e** provou o limite: sem feedback tátil/hierarquia, função crítica escondida em menu irrita (Euro NCAP passou a exigir controle físico pra 9 funções). | Fundo escuro pra uso longo; poucas ações grandes. | Esconder ação crítica (Enviar proposta, APAGAR) em menu; alvos pequenos pra "caber mais". | ⭐ | [NN/g Tesla](https://www.nngroup.com/articles/tesla-big-touchscreen/) · [Euro NCAP 2026](https://autotechinsight.spglobal.com/news/5284766/euro-ncap-tightens-2026-safety-norms-requires-physical-buttons-again) |
| 15 | **SpaceX Crew Dragon** | Touchscreen projetada com os astronautas; "intuitivo saber o que fazer a cada momento"; ações críticas confirmadas; botões físicos mantidos pro que não pode falhar. | Confirmação de ação irreversível com **texto digitado** (já é regra: "APAGAR"); estado por fase (rascunho → enviando → enviada). | Estética de painel de controle literal. | ⭐⭐ | [Space.com](https://www.space.com/spacex-crew-dragon-touchscreen-astronaut-thoughts.html) · [Shane Mielke](https://www.shanemielke.com/work/spacex/crew-dragon-displays/) |
| 16 | **Volante/painel de F1** | Tudo pra uma **olhada**: LEDs de troca no topo do campo visual, página configurável, legível em sol e vibração; cor = urgência. | A "faixa de troca": barra fina de estado no topo que muda de cor **só** quando algo pede ação. | Página com 100 telas (o piloto tem engenheiro no rádio; a May não). | ⭐⭐ | [Motorsport Technology](https://motorsport.tech/formula-1/understanding-the-f1-steering-wheel) |
| 17 | **Xometry Instant Quote** | Upload → preview → configuração à esquerda, preço e prazo à direita atualizando a cada escolha; DFM em aba própria; 3 opções de prazo. | Preço reagindo a cada escolha (já temos: `agendar` 300 ms); avisos de fabricabilidade separados do preço. | Poluição de opções de certificação; layout de e-commerce. | ⭐⭐⭐ | [How Xometry works](https://www.xometry.com/how-xometry-works/) |
| 18 | **Fractory / OSH Cut / Fabworks** | Fluxo linear de cotação; dimensões lidas do arquivo mostradas ao lado do nome da peça pra conferência; DXF = só corte, 3D = mais operações. | "Dimensão detectada ao lado do nome" no importar DXF; distinguir o que o arquivo garante do que é sugestão. | Checkout de loja; preço sem decomposição. | ⭐⭐ | [Fractory](https://fractory.com/laser-cutting-quote/) · [OSH Cut](https://www.oshcut.com/) |
| 19 | **Arc Browser** | Sidebar como espaço, não como lista; "tudo tem um lugar pra sua cabeça não malabarizar"; arquiva o que não se usa. | Trilho lateral estreito e estável como "lugar" de cada modo; rascunho local (`espRecuperaLocal`) mostrado como "continuar de onde parou". | Excesso de personalidade cromática (Arc usa gradientes de espaço). | ⭐ | [Arc – rethinking the browser](https://medium.com/design-bootcamp/arc-browser-rethinking-the-web-through-a-designers-lens-f3922ef2133e) |
| 20 | **Figma UI3** (2024) | Rebuild pra "dar espaço ao trabalho"; **reverteram** painéis flutuantes porque cobriam o canvas. | Painéis fixos; conteúdo no centro do palco. | Painel flutuante sobre o formulário. | ⭐⭐ | [Figma – UI3](https://www.figma.com/blog/our-approach-to-designing-ui3/) |
| 21 | **NN/g – skeleton/spinner/progress** | < 1 s: nada; 2–10 s: skeleton (página) ou spinner (módulo); > 10 s: barra de progresso; skeleton só de moldura é inútil. | Regras de estado de carregamento da seção 4.5. | Skeleton genérico "pra parecer rápido". | ⭐⭐⭐ | [NN/g skeleton screens](https://www.nngroup.com/articles/skeleton-screens/) |
| 22 | **Tufte** | Data-ink; apagar chartjunk; sparklines; small multiples com escala igual; camadas. | Decomposição de preço como barra proporcional única; sparkline do preço do item nos últimos 90 dias; sem gridlines. | Gráficos 3D, gauges, donut de "margem". | ⭐⭐ | [Dashboards à la Tufte](https://medium.com/design-bootcamp/designing-efficient-dashboards-with-the-tufte-way-9209e79f2ffb) |
| 23 | **Ramp / Brex** | Densidade pra profissional ("densidade é velocidade"); lidera com o que importa (economia, não gasto); grafite + acento contido. | Lista de propostas por **valor e dias parados**, não por data de criação. | AI-copilot em toda tela. | ⭐ | [Masterly – fintech](https://www.themasterly.com/blog/fintech-dashboard-design-guide) |
| 24 | **Awwwards / Godly / Mobbin** | Bancos de inspiração; Mobbin tem telas reais de produto (não conceitos). | Usar Mobbin pra checar **fluxos reais** de configuradores; Awwwards só pra "clima" de landing. | Copiar Dribbble (conceitos que nunca foram operados). | ⭐ | [Mobbin SaaS dashboards](https://mobbin.com/explore/web/screens/saas-dashboard) · [Awwwards](https://www.awwwards.com/) · [Godly](https://godly.website/) |

---

## 4. Sistema de layout recomendado

### 4.1 A metáfora: **Mesa de comando** (não "dashboard")

A calculadora vira uma **única tela-palco** com três zonas fixas e uma flutuante:

```
┌──────────────────────────────────────────────────────────────────────────────┐
│ TELEMETRIA  MOTOR V36 · OK   BDCUSTOS 11/09 07:12   ✓ CONFERIDA 03/09   ⌘K   │ 28 px
├────────┬─────────────────────────────────────────────────┬───────────────────┤
│ TRILHO │                    PALCO                        │   PAINEL DE PREÇO │
│ 64 px  │  contrato da família / lista de materiais /     │   (fixo, sticky)  │
│ ícone+ │  catálogo / propostas / funil                   │                   │
│ rótulo │                                                 │   R$ 12.480,00    │
│        │  ┌─ Dimensões ───────────────┐                  │   margem 41%  ●   │
│ Famíl. │  │ Comprimento  Largura  Alt │                  │   ─────────────   │
│ Itens  │  └───────────────────────────┘                  │   reforço 1,0 mm  │
│ Espec. │  ┌─ Tampo ───────────────────┐                  │   (só neste)      │
│ Propos.│  │ …                          │                  │   ─────────────   │
│ Funil  │  └───────────────────────────┘                  │   + à proposta ↵  │
│        │                                                 │   proposta #14310 │
│        │                                                 │   2 itens · 24,9k │
├────────┴─────────────────────────────────────────────────┴───────────────────┤
│  GAVETA (Configurar da vez · Ficha · Detalhe) — desliza da direita, 420 px   │
└──────────────────────────────────────────────────────────────────────────────┘
```

- **Telemetria** (topo, 28 px, mono 11–12 px, caps): estado do motor, data do preço vivo, selo de conferência, proposta ativa, atalho `⌘K`. Muda de cor **só** quando pede ação (faixa de troca da F1).
- **Trilho** (esquerda, 64 px fechado / 200 px aberto, ícone + rótulo curto): os 5 modos. É o "lugar" de cada coisa (Arc). Fica **dimmed** (`--muted` a 70%) — recua depois que você chegou (Linear).
- **Palco** (centro, `max-width: 860px` centrado quando é formulário; largura total quando é lista/funil): uma coisa por vez.
- **Painel de preço** (direita, 320–360 px, `position: sticky; top: 28px`): o número, margem, resumo das configurações da vez, botão "Adicionar à proposta", carrinho compacto. **Nunca rola fora da vista**.
- **Gaveta** (direita, 420–520 px, cobre o painel de preço com um degrau de superfície `--panel3`, fecha com `Esc`): Configurar da vez, ficha do negócio, detalhe de proposta, composição de item. É a única camada "acima" do palco. Nada flutua sobre o formulário (Figma UI3).

### 4.2 Grid e espaçamento

- **Unidade**: 4 px (micro) / 8 px (macro). Tokens: `--s1 4 · --s2 8 · --s3 12 · --s4 16 · --s5 24 · --s6 32 · --s7 48 · --s8 64`.
- **Colunas do palco**: 12 colunas, gutter 16 px. Formulário usa 8/12 centrado em ≥1280 px; listas usam 12/12.
- **Breakpoints**: 1440+ (ideal, tudo aberto) · 1280 (trilho fecha pra ícone) · 1024 (painel de preço vira barra inferior fixa de 64 px com o número + botão) · < 900 (uso excepcional: tablet no chão de fábrica — trilho vira barra inferior, preço no topo colapsado).
- **Raio**: `--r-sm 6` (chips, inputs) · `--r-md 10` (cartões, gaveta) · `--r-lg 14` (painel de preço) · `--r-pill 999`. Nunca > 14 px em app (raio grande = "app de consumo 2021").
- **Dot grid** do fundo do palco: `radial-gradient(circle, rgba(130,150,171,.09) 1px, transparent 1px)` a cada 24 px, **só no palco**, nunca atrás de texto pequeno. É a assinatura Oblivion — e some abaixo de 1024 px.

### 4.3 Hierarquia tipográfica dentro da tela (do mais alto ao mais baixo)

1. **O preço** (painel): 40–56 px, 600, tabular.
2. **Título do palco** ("Bancada com cuba · 1 cuba · plano liso"): 20–24 px, 600, `letter-spacing: -.01em`.
3. **Título de grupo** ("DIMENSÕES", "TAMPO"): mono 11 px, caps, `.12em`, `--accent` a 80%.
4. **Rótulo de campo**: 13 px, 500, `--text-2`.
5. **Valor de campo / linha de lista**: 14 px, 400, `--text`; números tabulares.
6. **Ajuda / telemetria / meta**: 11–12 px, `--muted`.

Regra: **no máximo 6 tamanhos** por tela (Stripe). Se precisar de um sétimo, algo está errado na hierarquia.

### 4.4 Navegação

- **Trilho** = modo (Família / Itens padrão / Projeto especial / Propostas / Funil). Estado ativo: barra de 2 px `--accent` à esquerda do ícone + rótulo em `--text`. Sem fundo pintado.
- **Paleta `⌘K`**: única camada com vidro (`backdrop-filter: blur(14px)` + `--panel` a 85%). Busca famílias, itens, clientes, propostas (nº), negócios. Origem do transform no centro-topo. 160 ms.
- **Sem breadcrumb**: a telemetria já diz onde você está e com que proposta.
- **Voltar** é `Esc` (fecha gaveta) ou clique no trilho. Estado do formulário **persiste** ao trocar de modo e voltar (já é assim: `voltarCalc`).
- **Ações destrutivas** (apagar proposta, cancelar) ficam **fora** do caminho do teclado: botão secundário, à esquerda do rodapé da gaveta, confirmação por texto digitado (regra "APAGAR"). Nunca como ícone 🗑 solto na lista.

### 4.5 Estados (vazio · carregando · erro · parcial · sucesso)

| Estado | Regra | Exemplo concreto |
|---|---|---|
| **Vazio – sem família** | O palco mostra uma frase e o **caminho**: "Escolha uma família no trilho ou aperte `⌘K`". Sem ilustração, sem blob. O painel de preço mostra `R$ —` com "escolha uma família" embaixo, e a **onda da Guerra Intelligence** roda discreta no painel (única animação infinita permitida, só em vazio). | Ao escolher família, a onda para e vira o número. |
| **Vazio – lista** (propostas, itens) | Mostra o cabeçalho da lista + linha única: "Nenhuma proposta enviada em setembro. Ver rascunhos (3) →". Mostra zero, não esconde (Stripe). | Filtro ativo é mostrado como chip pra evitar "cadê minhas propostas?". |
| **Carregando < 1 s** | Nada. Nenhum indicador. | Troca de família em cache. |
| **Carregando 1–10 s** | Skeleton **fiel ao contrato**: um retângulo por grupo/campo que vai aparecer (a API já diz quantos grupos existem). No painel de preço, o número anterior fica "ghost" (opacidade .45) até chegar o novo — nunca some, nunca spinner. | `carregarForm` → skeleton de 3 grupos; `calcular` → ghost. |
| **Carregando > 10 s** (upload DXF/PDF, PDF do Ploomes) | Barra de progresso com etapas nomeadas: "Lendo desenho → Casando materiais → Montando lista". | `importar` e `acompanhar` (polling 3 s até 40×). |
| **Erro do motor** | Faixa de telemetria vai a `--bad`; palco continua operável; painel mostra "último preço válido 14:02" em ghost e botão "Tentar de novo". Mensagem = o que + o que fazer. | "Motor de cálculo não respondeu. O preço mostrado é o de 14:02. Tentar de novo · Avisar suporte". |
| **Erro de campo** | Inline, abaixo do campo, `--bad`, sem tremer o campo. Foco vai pro campo. | "Largura precisa ser entre 300 e 1200 mm." |
| **Parcial / aviso** | Âmbar, não bloqueante, com ação: parâmetro quebrado, custo vivo diferente, sugestão de material do DXF com confiança < 80%. | "Aço 304 1,2 mm — sugestão 78% · confirmar / trocar". |
| **Sucesso** | **Momento cinema**: contorno do painel pulsa `--ok` 600 ms, número da proposta assenta na telemetria; toast **com** link ("Proposta nº 14310 no Ploomes ↗") que fica 8 s. | `acompanhar` → `enviada_ploomes`. |
| **Sem alçada** | Custo aparece como linha "Custo ▸ (sem alçada)" desabilitada, não some — a pessoa sabe que existe. | Vendedor. |
| **Rascunho local recuperado** | Banner fino no topo do palco: "Você tinha um projeto especial não salvo (há 2 h) — Continuar · Descartar". | `espRecuperaLocal`. |

---

## 5. Tipografia, cor, movimento e efeitos de cinema

### 5.1 Tipografia (Google Fonts, gratuita — todas verificadas na API do Google Fonts em 11/09/2026)

**Recomendação principal — par Geist + Geist Mono**

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
```

```css
:root{
  --font-ui:  "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"Geist Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
}
body{ font-family:var(--font-ui); font-feature-settings:"tnum" 1, "cv11" 1; }
.num, .preco, td.valor{ font-variant-numeric: tabular-nums; }
```

**Por que Geist e não Inter**: Inter "em todo peso" é o tell nº 1 de "parece IA" (925studios). Geist tem a mesma legibilidade suíça, numerais nítidos, e a família mono casa **na mesma voz** — o que dá ao número do preço e à telemetria o ar de instrumento, sem virar "terminal hacker".

**Alternativa aprovada** (se Geist parecer "Vercel demais"): **Instrument Sans** (UI) + **JetBrains Mono** (números/telemetria). Instrument tem personalidade sem gritar; JetBrains Mono tem os melhores numerais tabulares entre os monos gratuitos.

**Proibidas** (fazem a tela "do passado" ou "de jogo"): Orbitron, Rajdhani, Michroma, Chakra Petch, Audiowide, Exo, Play, qualquer fonte "sci-fi". Também proibido: Inter sozinha em todos os pesos, Roboto como voz principal, fontes serifadas de display "editorial" (não é revista).

**Escala** (base 14 px em app; `clamp` só no preço e no título do palco):

| Token | Tamanho | Peso | Line-height | Uso |
|---|---|---|---|---|
| `--fs-preco` | `clamp(36px, 2.2rem + 1vw, 56px)` | 600 | 1.0 | O número (tabular) |
| `--fs-titulo` | 22 px | 600 | 1.2 | Título do palco |
| `--fs-sub` | 16 px | 500 | 1.35 | Subtítulo, total do carrinho |
| `--fs-base` | 14 px | 400 | 1.5 | Campos, listas, texto |
| `--fs-rotulo` | 13 px | 500 | 1.3 | Rótulos |
| `--fs-meta` | 12 px | 400 | 1.4 | Ajuda, meta, chips |
| `--fs-tele` | 11 px mono | 500 | 1 | Telemetria, títulos de grupo (caps `.12em`) |

Regras: `letter-spacing` negativo (-.01em) só acima de 20 px; positivo (.08–.14em) só em mono caps; **nunca** em texto corrido. Largura máxima de linha de texto: 62ch. Números sempre `tabular-nums` (evita o "pulo" ao recalcular).

### 5.2 Cor — o tema GuerraTech mantido, com evoluções

Os tokens atuais ficam **intactos** (são a marca). Todos passam WCAG AA sobre `--bg` (verificado por cálculo de luminância): `--text` ≈ 17:1, `--muted` ≈ 6,5:1, `--accent` ≈ 7,5:1, `--ok` ≈ 10:1, `--warn` ≈ 11:1, `--bad` ≈ 6:1.

**Evoluções propostas** (adições, não trocas):

```css
:root{
  /* — herdados (não mexer) — */
  --bg:#020814; --panel:#06101f; --panel2:#050b16; --border:#163a74;
  --text:#e6edf5; --muted:#8296ab; --accent:#2ea3ff; --ok:#2fd579; --warn:#ffb02e; --bad:#ff5468;

  /* — escada de superfícies (Raycast, traduzida pro azul) — */
  --panel3:#0a1729;                 /* gaveta, paleta ⌘K, hover de cartão: "mais perto" */
  --panel4:#0f1f38;                 /* linha selecionada, keycap */
  --border-soft:rgba(22,58,116,.45);/* borda padrão de cartão/lista — o #163a74 cheio vira só foco/seleção */
  --border-strong:#1f4d96;          /* hover em borda, divisor de gaveta */

  /* — texto intermediário — */
  --text-2:#c3cfdd;                 /* rótulos, valor secundário (≈ 12:1) */
  --ink:#ffffff;                    /* SÓ o preço e o título do palco */

  /* — acento em camadas (nunca gradiente) — */
  --accent-soft:rgba(46,163,255,.14);  /* fundo de seleção, chip ativo */
  --accent-ring:rgba(46,163,255,.45);  /* anel de foco (3px) */
  --ok-soft:rgba(47,213,121,.14); --warn-soft:rgba(255,176,46,.14); --bad-soft:rgba(255,84,104,.14);

  /* — foco (obrigatório, visível, único) — */
  --focus:0 0 0 3px var(--accent-ring);
}
```

**Regras de uso**
1. **Acento por escassez**: `--accent` cheio aparece em no máximo **3 lugares** por tela: foco/seleção, o botão primário, a barra do trilho ativo. Títulos de grupo usam `--accent` a 80% em mono caps (isso já é da landing e é assinatura).
2. **Verde só confirma**: ✓ conferido, proposta enviada, margem ≥ 40%. Nunca "verde de botão salvar" solto.
3. **Âmbar avisa, não bloqueia**: custo vivo diferente do estudo, parâmetro quebrado, confiança baixa no DXF, rascunho antigo.
4. **Vermelho bloqueia ou nega**: erro de motor, desconto negado, campo inválido, APAGAR.
5. **Branco puro só no preço e no título**: é a luz da tela. Se tudo é branco, nada é.
6. **Nunca gradiente cromático em UI** (roxo→azul, azul→ciano). Os únicos gradientes permitidos são os **radiais de luz** do fundo (`#12202f`, `#0a1a33` → transparente), já usados no hero da landing, e **só** no estado vazio e na landing.
7. **Nada de cor por categoria** (família A azul, B verde…). Categoria é texto e ícone.
8. Chips de estado de proposta: **um** desenho (ponto 8 px + texto `--text-2`), cor só no ponto: rascunho `--muted`, aguardando `--warn`, enviando `--accent` (pulsa 1× a cada 2 s, para ao terminar), enviada `--ok`, negada/erro `--bad`, cancelada `--muted` riscado.

### 5.3 Movimento

**Tokens**

```css
:root{
  --t-instant:0ms;      /* hover em item repetido, troca de campo, tooltip subsequente */
  --t-fast:100ms;       /* highlight, chip, botão :active */
  --t-base:180ms;       /* dropdown, paleta ⌘K, troca de modo */
  --t-slow:260ms;       /* gaveta, painel de preço trocando de conteúdo, número rolando */
  --t-cinema:600ms;     /* UM por fluxo: pulso de sucesso, traçado do DXF */

  --ease-out:cubic-bezier(.2,0,0,1);        /* entrar (M3 standard) */
  --ease-exit:cubic-bezier(.3,0,.8,.15);    /* sair — só opacity, mais curto (150ms) */
  --ease-cinema:cubic-bezier(.05,.7,.1,1);  /* emphasized decelerate: o momento único */
}
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:0ms !important; animation:none !important; }
  .preco{ transition:opacity 120ms linear; } /* mantém só a troca de opacidade */
}
```

**O que animar (e como)**

| O quê | Como | Duração/easing |
|---|---|---|
| Gaveta abrindo | `translateX(16px)→0` + `opacity 0→1`, `transform-origin` na borda direita | 200 ms `--ease-out`; fechar 150 ms só opacity |
| Paleta `⌘K` | `scale(.96)→1` + opacity, origem centro-topo; **sem** delay | 160 ms `--ease-out` |
| Preço mudando | dígitos "rolam" verticalmente (odômetro) em `tabular-nums`; **só** após o debounce entregar valor novo e diferente | 250 ms `--ease-out` |
| Ghost do preço | opacity 1→.45 ao começar a recalcular (sem transição), volta a 1 com o novo valor | 120 ms |
| Campo aparecendo por regra (`visivel_se`) | `height` auto via grid-template-rows 0fr→1fr + opacity; **sem** deslocar campos vizinhos bruscamente | 180 ms |
| Linhas do DXF importado | stagger 30 ms × até 12 linhas, `translateY(6px)→0`; perímetro de corte traçado em `stroke-dashoffset` | 400 ms total, `--ease-cinema` |
| Proposta enviada | contorno do painel de preço em `--ok` (box-shadow inset 0 0 0 1px → 2px → 1px) + número assentando na telemetria | 600 ms `--ease-cinema`, **uma vez** |
| Botão primário `:active` | `scale(.97)` | 100 ms |
| Skeleton | pulso de opacidade .5↔.8 | 1,2 s linear, infinito **só enquanto carrega** |
| Onda GI no vazio | a mesma da landing (9 s loop) | só em estado vazio; para ao escolher família |

**O que NUNCA animar**
- Hover em linha de lista/item padrão/campo (muda seco). Interação de alta frequência = 0 ms (Linear, HIG, Kowalski).
- Preço **durante** a digitação (só após o debounce e só se mudou).
- Largura/altura de inputs; reflow do formulário ao trocar família (troca com skeleton, não com "morph").
- Texto: nada de typewriter, glitch, flicker, letras caindo. Kinetic typography **fora** de app (só na landing, se muito).
- Fundo: nada de parallax, partículas, orbes, aurora em movimento, scanline permanente.
- Ícones girando em loop (o "anel de HUD"); progress indeterminado no preço.
- Qualquer coisa com `ease-in`, `bounce`, `elastic`, `spring` exagerado.
- Nada com duração > 600 ms, nunca; nada infinito enquanto a pessoa opera.

### 5.4 Efeitos "de cinema" que não atrapalham a operação (o kit aprovado)

Cada um tem gatilho, lugar e função. Fora disso, é ruído.

1. **Dot grid do palco** — fundo do palco a ~9% de branco-azulado, passo 24 px. Função: dar a sensação de "mesa de instrumentos" e alinhar visualmente cartões. Estático. (Oblivion)
2. **Retículo de canto na seleção** — quatro cantos em `L` de 10 px em `--accent` no cartão/linha selecionada (família ativa, item ativo, negócio aberto). Aparece seco (0 ms), some seco. Função: mostrar "isto está travado no alvo" sem pintar fundo. (HUD, mas estático)
3. **Painel de preço como instrumento** — número branco grande, régua de decomposição como **uma** barra horizontal proporcional (MP · mão de obra · laser · markup) em tons de azul, sem legenda colorida; margem como ponto + número. Função: ler custo/preço em um olhar. (Tufte)
4. **Telemetria mono no topo** — 11 px caps, `--muted`, com ponto de status; muda de cor só quando pede ação. Função: status contínuo. (F1)
5. **Ghost do preço anterior** — o número não some enquanto recalcula. Função: nunca ver `R$ 0,00` por engano.
6. **Odômetro** — dígitos rolando 250 ms quando o preço muda. Função: o olho percebe **que** mudou e **quanto** sem ler de novo.
7. **Traçado do DXF** — ao importar, a silhueta da peça (quando houver preview) se desenha em 400 ms e as linhas entram em cascata. Função: mostrar que o arquivo virou peças. (momento cinema do fluxo Importar)
8. **Pulso de contorno no sucesso** — 600 ms `--ok` no painel. Função: confirmar sem modal. (momento cinema do fluxo Enviar)
9. **Vidro só na paleta `⌘K` e na gaveta** — `backdrop-filter: blur(14px)` sobre `--panel3` a 85%. Função: mostrar que é uma camada acima e que o palco continua ali. **Uma** camada de vidro por vez, nunca vidro sobre vidro. (visionOS)
10. **Luz radial no vazio** — os dois radiais do hero da landing atrás do palco vazio. Some quando a tela tem conteúdo. Função: acolher e indicar "comece aqui".
11. **Onda Guerra Intelligence** — a assinatura da landing, só no painel de preço vazio e no rodapé da paleta. Função: marca.
12. **Anel de foco de 3 px** — `--focus` em todo elemento focável, sem exceção. É o único "glow" permitido, e ele é acessibilidade, não decoração.

**Teste dos 20 minutos**: qualquer efeito novo precisa ser usado por 20 minutos seguidos por alguém orçando de verdade (May ou Rai). Se cansou, sai. (Lição Minority Report.)

---

## 6. Anti-padrões: o que faz uma tela "parecer IA" ou "do passado"

### 6.1 "Parece IA" (lista de tells, com a correção)

| Tell | Por que denuncia | Correção na GuerraTech |
|---|---|---|
| Gradiente roxo→azul / azul→ciano em hero, botão ou texto | É o default estatístico do Tailwind nos dados de treino; "o tell mais alto de 2026" | Sem gradiente cromático. Acento sólido `--accent`. Luz só radial e só no vazio. |
| Glassmorphism em todo cartão | Cartão de vidro flutuando em névoa pastel = template | Vidro em **uma** camada (paleta/gaveta). Cartões são superfície sólida da escada. |
| Três cartões iguais em fila (ícone + título + 2 linhas) | Tríptico de tutorial | Se três coisas, três formas diferentes ou uma lista. Na landing atual há 3–6 cartões iguais em grade: **evoluir** pra ritmo assimétrico (1 largo + 2 estreitos) ou lista com números. |
| Inter em todos os pesos | "Ninguém escolheu a fonte" | Geist + Geist Mono (ou Instrument Sans + JetBrains Mono). |
| Texto com gradiente em métrica | Decoração sem função | Métrica em branco sólido, tabular. |
| Bordas com brilho neon / `box-shadow: 0 0 20px accent` em cartão | HUD de estoque | Glow só no anel de foco (3 px, 45% de opacidade). |
| Orbes/blobs desfocados flutuando atrás | Fundo de gerador | Dot grid estático + radiais só no vazio. |
| Ícones de linha fina genéricos em círculo colorido | "Serve pra qualquer produto" | Ícones de 16–20 px em `--muted`, sem círculo de fundo; só onde substituem palavra. |
| Copy "pesada de adjetivo e leve de substantivo" ("Potencialize sua eficiência") | Vazio | Copy do produto: "Preço de hoje. Conta exata. Proposta no CRM." (a landing já faz certo). |
| Bounce/elastic em modal; tudo com `ease-in-out` 500 ms | Motion de biblioteca padrão | Tokens da seção 5.3. |
| Dark mode "porque sim" com preto #000 | Halation, cansaço | `--bg #020814` (azul profundo), já é o tema. |
| Cartão dentro de cartão dentro de cartão | Sem hierarquia real | Máximo 2 níveis: superfície + item. |
| Sidebar com 20 itens + ícone colorido cada | Template de admin | Trilho com 5 modos, ícone mono, rótulo. |
| Emoji como ícone de UI (⭐ 📎 🗑 ✓ no botão) | Amador; renderiza diferente em cada SO | Emoji **só** em toast/mensagem informal e na bolinha de novidades. Ícone é SVG. A landing hoje usa "⭐ Projeto especial" e "📎 Upload DXF" nos títulos: trocar por ícone SVG. |
| "Dashboard" com 8 KPIs iguais em bento | Não há hierarquia — nada manda | Um número manda (P1). Bento só se as células têm **pesos** diferentes por importância. |

### 6.2 "Parece do passado"

| Tell | Correção |
|---|---|
| Fonte "sci-fi" (Orbitron, Rajdhani, Eurostile-like) | Grotesca suíça precisa (Geist). Futuro em 2026 é contenção. |
| Anel de HUD girando, radar, "carregando" circular com ticks | Skeleton fiel ao contrato; telemetria textual. |
| Scanline/CRT permanente, verde fósforo, "terminal hacker" | Scanline só no hero da landing (já é assim). No app, nunca. |
| Skeuomorfismo de painel (botão com chanfro, LED 3D, tela de vidro com reflexo) | Superfície plana + escada de tons. |
| Botões azuis cheios em toda ação; ícone + texto + seta em cada botão | Um primário por tela; secundários em outline `--border-soft`; terciários em texto. |
| Tabela zebrada com bordas em toda célula, cabeçalho pintado | Linhas 32–36 px, divisor `--border-soft`, cabeçalho mono caps sem fundo. |
| Modal sobre modal; alerta nativo `confirm()` | Gaveta; confirmação por texto digitado dentro da gaveta. |
| Barra de título com logo grande + nome + versão + relógio | Telemetria de 28 px. O logo "G" cabe no trilho, 24 px. |
| "Bootstrap 2013": cinza #f5f5f5, cantos 4 px, sombra `0 1px 3px` | Fora do tema. |
| Chips de status em 7 cores pastel | Ponto + texto (5.2, regra 8). |
| Tela cheia de texto de ajuda inline | Ajuda atrás de `?` e no tooltip (com `data-instant` pros seguintes). |
| Splash screen / intro animada ao abrir | Nunca. Abre no palco, com o último estado. |

### 6.3 Como evitar no processo (não só no pixel)

- **Restrições antes do prompt/mock**: fonte, paleta, tokens de motion e layout já decididos aqui. Quem for gerar mock (humano ou IA) recebe este arquivo — "o modelo executa a decisão, não faz o gosto".
- **Bater o olho em 5 s**: mostrar o mock por 5 s pra alguém e perguntar "onde está o preço? o que você faria primeiro?". Se errar, volta.
- **Teste do cinza**: tirar toda cor do mock (filtro grayscale). A hierarquia continua? Se depende de cor, está errado.
- **Teste do 1280**: o layout precisa funcionar num notebook de 1280 px com o trilho fechado e o painel de preço visível.
- **Teste do teclado**: orçar uma bancada com cuba sem tocar no mouse.

---

## 7. Roteiro de avaliação (checklist pra julgar os modelos)

Pontuação: **0** = não atende · **1** = parcial · **2** = atende. Máximo 100. Aprovado ≥ 85 e **nenhum zero nos itens marcados 🚨**. Cada avaliador (Edson, May, Rai) pontua separado; média final.

### A · Primeiro olhar (10 s, sem explicação) — 16 pts
| # | Critério | 0/1/2 |
|---|---|---|
| A1 🚨 | Em 5 s a pessoa aponta **onde está o preço**. | |
| A2 🚨 | Em 5 s a pessoa aponta **o que fazer primeiro**. | |
| A3 | Causa impressão ("uau") em alguém que não é da equipe — e a pessoa consegue dizer **o quê** impressionou (não "é bonito"). | |
| A4 | Parece um **produto próprio**, não uma tela do /gestao escurecida. | |
| A5 | Não parece template/IA (nenhum item da tabela 6.1 presente). | |
| A6 | Não parece "do passado" (nenhum item da 6.2 presente). | |
| A7 | Tema GuerraTech reconhecível (bg #020814, azul #2ea3ff, mono caps) sem precisar do logo. | |
| A8 | Passa o **teste do cinza**: hierarquia sobrevive sem cor. | |

### B · Entendimento — 14 pts
| # | Critério | 0/1/2 |
|---|---|---|
| B1 🚨 | Um número manda na tela (P1). | |
| B2 | Rótulos no vocabulário da May (P9): nenhum termo de código visível. | |
| B3 | Os 5 modos (Família, Itens padrão, Especial, Propostas, Funil) são achados sem tutorial. | |
| B4 | O que está escondido tem sinal de que existe (P6). | |
| B5 | Estado do motor / data do preço / conferido são visíveis o tempo todo (P7). | |
| B6 | Configurações "só neste orçamento" são claramente distintas do padrão. | |
| B7 | Custo destrinchado aparece só pra quem tem alçada — e o vendedor sabe que existe. | |

### C · Operação — 20 pts
| # | Critério | 0/1/2 |
|---|---|---|
| C1 🚨 | Orçar uma bancada com cuba **só de teclado**, do trilho ao "adicionar à proposta". | |
| C2 | Foco cai no campo certo ao escolher família. | |
| C3 | `⌘K` acha família, cliente, proposta por nº, item. | |
| C4 | Painel de preço nunca sai da vista (sticky) em 1280 px+. | |
| C5 | Gaveta fecha com `Esc`; nada flutua sobre o formulário. | |
| C6 | Ação destrutiva fora do caminho do teclado e com confirmação digitada. | |
| C7 | Lista de 40 materiais cabe em uma tela de 1440×900 sem scroll interno duplo. | |
| C8 | Trocar família e voltar mantém o que foi digitado. | |
| C9 | Importar DXF: cada linha mostra dimensão detectada + o que é sugestão (com confiança). | |
| C10 | Enviar proposta mostra as fases (rascunho → enviando → nº) sem modal. | |

### D · Respiro e densidade — 12 pts
| # | Critério | 0/1/2 |
|---|---|---|
| D1 🚨 | Nada apertado: campos ≥ 36 px, 16–24 px entre grupos, ≤ 6 tamanhos de tipo. | |
| D2 | Nada poluído: ≤ 3 usos de `--accent` cheio por tela; cor só semântica. | |
| D3 | Três níveis de densidade (palco / lista / telemetria) e não se misturam (P8). | |
| D4 | Bordas suaves (`--border-soft`); zero sombras em cartões. | |
| D5 | Máximo 2 níveis de aninhamento (superfície + item). | |
| D6 | Ícones: mono, 16–20 px, só onde substituem palavra; zero emoji em UI. | |

### E · Movimento e cinema — 14 pts
| # | Critério | 0/1/2 |
|---|---|---|
| E1 🚨 | Interações repetidas (hover, troca de campo) = 0 ms. | |
| E2 | Nenhuma transição > 300 ms fora do **único** momento cinema por fluxo. | |
| E3 | Preço não anima durante a digitação; anima (odômetro) só quando muda. | |
| E4 | Nada infinito enquanto se opera (loop só em vazio/carregando). | |
| E5 | `prefers-reduced-motion` respeitado. | |
| E6 | O(s) efeito(s) de cinema estão no kit da 5.4 e têm função declarada. | |
| E7 | Passou o teste dos 20 minutos com May ou Rai sem "cansar". | |

### F · Estados — 12 pts
| # | Critério | 0/1/2 |
|---|---|---|
| F1 | Vazio sem família: frase + caminho, sem ilustração. | |
| F2 | Carregando: skeleton fiel ao contrato; preço anterior em ghost, nunca zero/spinner. | |
| F3 | > 10 s (upload/PDF): barra com etapas nomeadas. | |
| F4 | Erro: o que + o que fazer; palco continua operável; último preço válido visível. | |
| F5 | Aviso (âmbar): não bloqueia, tem ação. | |
| F6 | Sucesso: pulso único + toast com link 8 s. | |

### G · Acessibilidade e técnica — 12 pts
| # | Critério | 0/1/2 |
|---|---|---|
| G1 🚨 | Todo texto ≥ 4,5:1 sobre sua superfície real (medido, não estimado); UI/ícones ≥ 3:1. | |
| G2 | Anel de foco visível em tudo que é focável. | |
| G3 | Funciona em 1280 px (trilho fechado) e degrada em 1024 (preço vira barra). | |
| G4 | Fontes via Google Fonts com fallback de sistema; `font-display: swap`; sem FOIT no preço. | |
| G5 | `backdrop-filter` em no máximo 1 elemento por vez (custo de GPU em máquina fraca). | |
| G6 | Nada depende de cor pra ser entendido (ponto + texto, ícone + texto). | |

**Total: 100.** Guardar a planilha de notas em `docs/avaliacoes/DESIGN_<modelo>_<data>.md` (a criar) com as três notas e o veredito.

**Testes rápidos complementares** (passa/não passa, antes de pontuar):
- **5 segundos**: mostrar e esconder; perguntar preço e primeira ação.
- **Cinza**: `filter: grayscale(1)` — hierarquia sobrevive?
- **1280**: abre num notebook comum?
- **Teclado**: orça sem mouse?
- **20 minutos**: May ou Rai orçando de verdade; anotar o que irritou.
- **Rai**: PCP olha e diz se "parece coisa nossa".

---

## 8. Resumo das decisões (pra quem só lê isto)

1. **Metáfora**: mesa de comando — telemetria no topo, trilho de 5 modos à esquerda, palco no centro, painel de preço fixo à direita, gaveta como única camada acima.
2. **Um número manda**: o preço, branco, 40–56 px, tabular, sticky; tudo o mais é apoio.
3. **Estrutura sentida, não vista**: escada de superfícies (`--panel2 → --panel → --panel3 → --panel4`), bordas a 45%, zero sombras.
4. **Cor é sinal**: azul = foco/ação (≤ 3 por tela), verde = confirmado, âmbar = aviso, vermelho = erro; nunca gradiente cromático, nunca cor por categoria.
5. **Tipografia**: Geist + Geist Mono (Google Fonts); alternativa Instrument Sans + JetBrains Mono; proibidas fontes "sci-fi" e Inter-por-padrão; ≤ 6 tamanhos por tela.
6. **Movimento**: 0 ms no repetitivo, 100–260 ms no contexto, um momento cinema de 600 ms por fluxo; `ease-out`; nada infinito enquanto opera; reduced-motion respeitado.
7. **Kit de cinema aprovado** (12 efeitos com função): dot grid, retículo de canto, painel-instrumento, telemetria, ghost, odômetro, traçado do DXF, pulso de sucesso, vidro em uma camada, luz radial no vazio, onda GI no vazio, anel de foco.
8. **Estados** definidos um a um: vazio com caminho, skeleton fiel ao contrato, ghost do preço, barra com etapas > 10 s, erro com "o que + o que fazer", aviso âmbar com ação, sucesso com pulso único.
9. **Anti-padrões** listados (IA e passado) com correção — e três testes de processo (5 s, cinza, teclado) antes de qualquer pontuação.
10. **Roteiro de avaliação** de 100 pontos com 8 itens eliminatórios; aprovado ≥ 85.

---

## 9. Fontes consultadas

- Linear — [A calmer interface for a product in motion](https://linear.app/now/behind-the-latest-design-refresh) · [How's Linear so fast? (performance.dev)](https://performance.dev/how-is-linear-so-fast-a-technical-breakdown)
- Raycast — [DESIGN.md (awesome-design-md)](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/raycast/DESIGN.md)
- Vercel — [Geist design system](https://vercel.com/geist/introduction) · [Geist font](https://vercel.com/font) · [Geist no Google Fonts](https://fonts.google.com/specimen/Geist)
- Stripe — [Dashboard design breakdown (925studios)](https://www.925studios.co/blog/stripe-dashboard-design-breakdown) · [Dashboard update May 2024](https://support.stripe.com/questions/dashboard-update-may-2024)
- Mercury — [Design breakdown (925studios)](https://www.925studios.co/blog/mercury-design-breakdown)
- Bloomberg — [Designing the Terminal for color accessibility](https://www.bloomberg.com/ux/2021/10/14/designing-the-terminal-for-color-accessibility/) · [The impossible Bloomberg makeover (UX Mag)](https://uxmag.com/articles/the-impossible-bloomberg-makeover)
- Oblivion / GMUNK — [HUDS+GUIS](https://www.hudsandguis.com/home/2013/05/02/oblivion-interface-design) · [AWN](https://www.awn.com/vfxworld/crushing-the-user-interface-designs-of-oblivion) · [Interface Love review](https://ilikeinterfaces.com/2015/04/21/ui-review-oblivion/)
- Iron Man — [scifiinterfaces Iron HUD](https://scifiinterfaces.com/tag/iron-hud/?order=asc) · [Iron Man HUD & cognitive clarity](https://medium.com/design-bootcamp/the-iron-man-hud-designing-for-cognitive-clarity-in-a-generative-ui-world-c4d262b7c279)
- Minority Report — [Dan Saffer](https://odannyboy.medium.com/why-you-want-but-wont-like-a-minority-report-style-interface-626d0fd6096b) · [The Awl](https://www.theawl.com/2013/02/how-minority-report-trapped-us-in-a-world-of-bad-interfaces/) · [Gorilla arm (Springer)](https://link.springer.com/chapter/10.1007/978-3-319-57987-0_41)
- Apple — [HIG Motion](https://developer.apple.com/design/human-interface-guidelines/motion) · [WWDC23 Design for spatial UI](https://developer.apple.com/videos/play/wwdc2023/10076/)
- Material Design 3 — [Easing and duration tokens](https://m3.material.io/styles/motion/easing-and-duration/tokens-specs)
- Emil Kowalski — [7 practical animation tips](https://emilkowal.ski/ui/7-practical-animation-tips) · [Great animations](https://emilkowal.ski/ui/great-animations)
- Tesla / Euro NCAP — [NN/g Tesla touchscreen](https://www.nngroup.com/articles/tesla-big-touchscreen/) · [Euro NCAP 2026 physical controls](https://autotechinsight.spglobal.com/news/5284766/euro-ncap-tightens-2026-safety-norms-requires-physical-buttons-again)
- SpaceX — [Crew Dragon touchscreen (Space.com)](https://www.space.com/spacex-crew-dragon-touchscreen-astronaut-thoughts.html) · [Crew Dragon displays (Shane Mielke)](https://www.shanemielke.com/work/spacex/crew-dragon-displays/)
- F1 — [Understanding the F1 steering wheel](https://motorsport.tech/formula-1/understanding-the-f1-steering-wheel)
- CPQ / instant quote — [Xometry](https://www.xometry.com/how-xometry-works/) · [Fractory](https://fractory.com/laser-cutting-quote/) · [OSH Cut](https://www.oshcut.com/) · [Fabworks](https://www.fabworks.com/) · DesignCNC (BR, hoje makercuttfactory.com/quote/design — página não carregou sem JS)
- Arc — [Rethinking the web through a designer's lens](https://medium.com/design-bootcamp/arc-browser-rethinking-the-web-through-a-designers-lens-f3922ef2133e)
- Figma UI3 — [Our approach to designing UI3](https://www.figma.com/blog/our-approach-to-designing-ui3/) · [Floating panels lesson](https://bitskingdom.com/blog/figma-floating-panels-ux-lesson/)
- NN/g — [Skeleton screens](https://www.nngroup.com/articles/skeleton-screens/) · [Visibility of system status](https://www.nngroup.com/articles/visibility-system-status/) · [10 heuristics (UXtweak)](https://blog.uxtweak.com/usability-heuristics/)
- Tufte — [Designing efficient dashboards the Tufte way](https://medium.com/design-bootcamp/designing-efficient-dashboards-with-the-tufte-way-9209e79f2ffb)
- Acessibilidade dark — [WebAIM contrast](https://webaim.org/articles/contrast/) · [Dark mode contrast guide](https://www.colorcontrast.org/blog/dark-mode-contrast-accessibility-guide/)
- "AI slop" — [925studios tells](https://www.925studios.co/blog/ai-slop-design-tells) · [Youware purple gradient](https://www.youware.com/blog/how-we-escaped-the-purple-prison-of-ai-frontends) · [Mania Design – Spot the slop](https://www.mania.design/blog/spot-the-slop-a-ui-designers-guide-to-fixing-ai-defaults/)
- Tendências — [Bento/glass/aurora 2025–26 (Rajesh R Nair)](https://rajeshrnair.com/blog/design/ui-ux/ui-design-trends-2026-bento-grids-glassmorphism.html) · [Mobbin SaaS dashboards](https://mobbin.com/explore/web/screens/saas-dashboard)
- Tipografia — [Tabular numbers in CSS](https://dev.to/alanwest/tabular-numbers-in-css-font-variant-numeric-vs-monospace-hacks-25cn) · [JetBrains Mono (Google Fonts)](https://fonts.google.com/specimen/JetBrains+Mono)
- Ramp/Brex/fintech — [Fintech dashboard patterns (Masterly)](https://www.themasterly.com/blog/fintech-dashboard-design-guide)