LEW-ERP · protótipos navegáveis · jul 2026

Um produto, quatro conceitos.

Todos partem do mesmo guia de marca — petróleo como âncora, dourado pontual, Fraunces + Inter + IBM Plex Mono — e das mesmas 17 telas funcionais. O que muda é layout, tema e personalidade: de um ERP clássico premium até uma torre de controle futurista. Navegue, compare e escolha (ou monte o híbrido).

01 · Os conceitos

Quatro leituras do mesmo produto

Os previews abaixo são os protótipos reais, ao vivo — tudo neles funciona: bipagem do checkout, ⌘K, drawers de margem, Cockpit do Full com as regras ML 2026. Clique para abrir em tamanho cheio.

Abrir conceito A →
A

Clássico Premium

PROTOTIPO.html
LayoutSidebar fixa com grupos
TemaClaro (areia + branco)
PersonalidadeSóbrio, familiar, confiável

A aplicação 1:1 do guia de marca: sidebar petróleo com rail dourado, cartões brancos com sombra suave, títulos em Fraunces, números em mono. É o ERP que o seller reconhece no primeiro segundo — zero curva de aprendizado, máxima sensação de solidez.

Dashboard de KPIsGráficos SVG clássicosFilete dourado nos painéis de margem
Abrir protótipo A
Abrir conceito B →
B

Mesa de Operações

PROTOTIPO-B.html
LayoutRail que expande + barra de comando
TemaClaro quente (papel)
PersonalidadeOperacional, "resolva agora"

Muda o modelo de uso: o seller não navega por módulos, ele resolve pendências. A tela "Hoje" é uma fila de trabalho priorizada por impacto em R$, os sinais vitais ficam sempre visíveis no topo e o detalhe abre em drawer lateral — sem nunca perder o contexto da lista.

⌘K funcionalFila de trabalho em R$Drawers com waterfallToasts
Abrir protótipo B
Abrir conceito C →
C

Torre de Controle

PROTOTIPO-C.html
LayoutRail de ícones + painéis de vidro
TemaEscuro (petróleo profundo)
PersonalidadeFuturista, terminal financeiro

O mais ousado: tema escuro com grade sutil de fundo, vidro translúcido e brilhos dourado/teal. Os gráficos foram todos repensados — Sankey do dinheiro, heatmap de vendas, gauges, treemap de SKUs — e ganhou o Copiloto IA (demo da F5) que responde com dados reais.

Copiloto IASankey do dinheiroHeatmap 7d×12hGauges + treemap
Abrir protótipo C
Abrir conceito D →
D

Torre · Menu Superior

PROTOTIPO-D.html
LayoutMenu horizontal com dropdowns
TemaEscuro (idêntico ao C)
PersonalidadeTorre de controle, tela limpa

O C com a navegação repensada: menu no topo com o dia a dia sempre visível (Centro · Pedidos · Checkout · Rede) e o restante agrupado em dropdowns. Sem rail lateral, o conteúdo usa a largura inteira — os gráficos respiram mais. Indicador ativo: sublinhado dourado com glow.

Tudo do CNavegação horizontalConteúdo full-width
Abrir protótipo D
02 · Branding aplicado

O mesmo DNA, quatro expressões

A base é o guia de marca: petróleo #062A2A como âncora, dourado #F59E0B pontual (regra 60-30-10, dourado nunca é cor semântica), teal para positivo/links, Fraunces nos títulos, Inter na interface e IBM Plex Mono em todo número. Abaixo, o que cada conceito mantém e o que muda.

A

Clássico Premium

fidelidade ao guia: 100% · tema claro

É o guia de marca em movimento. Nenhuma regra é dobrada: superfícies areia/branco, sidebar em petróleo-950, dourado restrito a CTA + número-chave, serifa nos títulos de página.

Mantém do guia
  • Paleta e proporção 60-30-10 exatas (neutro / petróleo / dourado)
  • Fraunces 600 em todos os títulos de página
  • Semânticas separadas da marca (verde/laranja/vermelho/ciano)
Assinaturas próprias
  • Filete dourado no topo dos painéis escuros de margem real
  • Headers de cartão e tabela em mono uppercase (ar de "livro-razão")
  • Badges com ponto de status; sombras em 2 camadas com tom petróleo
Paleta aplicada
#FAFAF9 fundo
#FFF cartão
#03211F sidebar
#F59E0B CTA
#14B8A6 acento
Componentes
Sua margem real, sem surpresa.Faturamento hoje · header mono
AutorizadaDivergência
R$ 12.480números sempre em mono tabular
R$ 38,40 · 23,4% — painel de margem com filete dourado
B

Mesa de Operações

fidelidade ao guia: alta · tema claro quente · foco em fluxo de trabalho

Mesma paleta, outra hierarquia: o dourado sobe para a barra de comando escura como cor dos sinais vitais do dia. Os cartões perdem a borda (só sombra, raio 16) sobre um fundo papel mais quente.

Mantém do guia
  • Toda a paleta e as três famílias tipográficas
  • Fraunces nos títulos de página; mono nos números e headers
  • Dourado pontual — CTA, vitais e indicador de navegação
O que muda
  • Fundo papel quente #F6F5F1; cartões sem borda, raio 16
  • Barra de comando petróleo fixa no topo com faturamento/margem/corte ao vivo
  • Componentes novos: fila de trabalho com impacto em R$, drawer com waterfall de margem, segmented control, toasts
  • Rail lateral que expande no hover (64 → 218px)
Paleta aplicada
#F6F5F1 papel
#FFF cartão
barra de comando
#F59E0B vitais/CTA
#EDF3F2 hover tint
Componentes
Bom dia, João.fila de trabalho · urgência × impacto
corte em 43:52Conferido
+R$ 4,20impacto em R$ em cada pendência
FAT R$ 12.480 · MARGEM 21,3% — vitais na barra de comando
C

Torre de Controle

fidelidade ao guia: reinterpretada · tema escuro · gráficos reinventados

O petróleo deixa de ser detalhe e vira o mundo inteiro: fundo #04211F→#021312 com grade sutil, painéis de vidro translúcido e o dourado como luz (glow), não como tinta. É a marca no modo noturno de um terminal financeiro.

Mantém do guia
  • As três famílias; mono continua dono dos números
  • Dourado ainda é escasso e valioso: CTA, número-chave, indicador ativo
  • Fraunces preservada na marca e na saudação (itálica)
O que muda
  • Títulos de página em mono uppercase com tick dourado (Fraunces sai dos títulos)
  • Semânticas clareadas para dark: #34D399 / #FB923C / #F87171 / #22D3EE
  • Gráficos novos: Sankey do fluxo do dinheiro, heatmap de vendas, gauges com glow, treemap de SKUs
  • Copiloto IA flutuante (demo da F5) com trava de segurança
Paleta aplicada
fundo profundo
painel de vidro
dourado = luz
#2DD4BF teal glow
#34D399 ok (dark)
Componentes
Bom dia, João.▮ fluxo do dinheiro — hoje
AutorizadaRuptura
21,3%número-chave com glow dourado
painel de vidro translúcido · borda teal 11% · blur 8px
D

Torre · Menu Superior

fidelidade ao guia: idêntica ao C · muda só a arquitetura de navegação

Visualmente é o C — mesmo fundo, vidro, glow, gráficos e Copiloto. A única decisão nova é de arquitetura de informação: navegação horizontal no topo, estilo web-app moderna.

Mantém do C
  • 100% do tema escuro, dos gráficos novos e do Copiloto
  • Todos os componentes (drawers, ⌘K, toasts, fila de missões)
O que muda
  • Menu horizontal sob a barra de comando: Centro · Pedidos · Checkout · Rede sempre visíveis
  • Demais telas em dropdowns: Catálogo, Financeiro, Fiscal & Log, Sistema
  • Item ativo = sublinhado dourado com glow; grupo pai marca quando um filho está aberto
  • Sem rail: conteúdo full-width centrado (máx. 1340px)
Trade-off honesto
  • Tela mais limpa e horizontal — mas dropdowns escalam pior que rail se o produto ganhar muitos módulos
Paleta aplicada
= conceito C
barra de menu blur
sublinhado ativo
dropdown
Componentes
CENTRO  ·  PEDIDOS  ·  CHECKOUT  ·  CATÁLOGO ▾  ·  FINANCEIRO ▾ ━━ item ativo com glow
navegação testadadropdown no hover
conteúdo full-width · máx. 1340px centrado · gráficos com mais respiro
03 · Comparativo

Lado a lado

Mesmas 17 telas, mesmo motor (checkout com bipagem, Cockpit do Full com regras ML 2026, conciliação). O que muda:

A Clássico Premium B Mesa de Operações C Torre de Controle D Torre · Menu Sup.
Tema Claro areia Claro papel quente Escuro profundo Escuro profundo
Navegação Sidebar fixa com grupos Rail 64px que expande no hover Rail de ícones + ⌘K Menu horizontal + dropdowns + ⌘K
Tela inicial Dashboard de KPIs e gráficos "Hoje": fila de trabalho em R$ + ledger do dia "Centro": Sankey + missões + gauges + heatmap Igual ao C, full-width
Detalhe de pedido Página própria Drawer lateral com waterfall Drawer lateral com waterfall Drawer lateral com waterfall
Gráficos Linha, donut, barras, anel Os do A + barra de fluxo do dinheiro Sankey, heatmap, gauges, treemap + glow Iguais ao C
Interações Navegação por telas e abas ⌘K · drawers · toasts · filtros que filtram Tudo do B + Copiloto IA Tudo do C
Tipografia de título Fraunces 600 (serifa) Fraunces 600 (serifa) Mono uppercase + tick dourado Mono uppercase + tick dourado
Melhor para Confiança — comprador conservador, contador na sala Uso diário — operação eficiente, menor fricção Demo & diferenciação — "isso eu nunca vi em ERP" Demo + quem prefere nav horizontal
04 · Como escolher

Regra de bolso

A

Se a prioridade é não assustar quem vem do Bling/Tiny e passar solidez fiscal-financeira desde o primeiro print.

B

Se a prioridade é produtividade do seller no dia a dia — a fila de trabalho em R$ é o argumento de venda mais direto.

C

Se a prioridade é diferenciação e demo — justifica visualmente um ticket premium e o Copiloto ancora o roadmap de IA.

D

Se o C ganhou mas o time prefere menu superior e conteúdo em largura total. Mesmo impacto, outra ergonomia.

💡 Híbridos valem: dá para casar, por exemplo, a estrutura clara do B com o Sankey, o heatmap e o Copiloto do C. Escolhido o caminho, a versão final consolida o melhor de cada um.