Ravox UIby Ravox Labs
Painelclaropráticooperacionalconfiável
PPrateleira

Prateleira.

Painel de loja online pequena de calçados: estoque por grade de numeração (34–44) com esgotado e abaixo do mínimo na própria célula, cobertura em dias, miniatura do produto, fila de expedição por prazo de postagem, vendas por canal (loja própria, Mercado Livre, Shopee) com eixo em reais, devoluções e giro. Off-white quente, marrom-tabaco, oliva de atenção e terracota crítico; SKU e pedido em mono, números tabulares.

Tipo
Painel admin
Tema
Claro
Títulos
Hanken Grotesk
Texto
Hanken Grotesk

ParaDono ou operador de expedição de uma loja online pequena que vende pela própria loja, Mercado Livre e Shopee e confere pedidos e estoque todo dia

Obter acesso · a partir de R$ 49ou todos os designs por R$ 297 ao ano
Abrir em tela cheia
/preview/prateleira

Blocos da tela01/08lateral de módulos do topo ao fim da página, com status de sincronização de cada canal (vira barra de topo com gaveta no celular)

Todo o texto fica em content.ts e as cores em tokens.css.
Conceito

Painel de operação para quem toca uma loja online pequena: separa pedido, confere estoque, acompanha canal de venda. Parece o que Bling, Tiny ERP e o admin da Nuvemshop/Shopify realmente mostram — fila de expedição, SKU com localização, estoque baixo por variação — não um app de consumo. Quem usa é o dono ou quem cuida da expedição, olhando a tela várias vezes por dia.

ParaDono ou operador de expedição de uma loja online pequena que vende pela própria loja, Mercado Livre e Shopee e confere pedidos e estoque todo dia

Paleta

As quatro cores que definem o design e todas as variáveis do tokens.css. Clique para copiar.

Tipografia

Hanken Grotesk nos títulos, Hanken Grotesk no texto.

TítulosHanken Grotesk

Aag!

Prateleira em uma linha

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoHanken Grotesk

A fonte de leitura carrega parágrafos longos sem cansar.

Texto corrido, botões, formulários e legendas. Os títulos ficam com a fonte de destaque; aqui é o dia a dia da página.

0123456789 · R$ 1.234,56 · 25/09 às 19h30

Para quem serve

O que a skill /escolher-design compara com o cliente.

Combina com
  • loja com múltiplos canais de venda
  • operação com expedição e estoque físico
  • marca com identidade quente/artesanal (couro, madeira, têxtil)
  • sistema de gestão vendido para pequeno varejo (SaaS de ERP/OMS simples)
Evitar para
  • painel puramente financeiro ou contábil
  • produto 100% digital sem estoque físico
  • marca fria/tech ou de luxo minimalista
  • operação de altíssimo volume (centenas de milhares de SKUs)
Nichos
e-commerce pequenoloja virtualvendedor de marketplacecalçados e acessóriosmodalogística de pequeno varejoexpediçãocontrole de estoque

Tom

práticooperacionalconfiáveldireto

O que faz ser Prateleira

As assinaturas do DESIGN.md: o que não pode faltar ao aplicar.

  1. 01

    Grade de numeração (Estoque por grade): um produto por cor, uma coluna por número de 34 a 44. A célula (.prateleira-celula) é o estado: número normal, fundo oliva abaixo do mínimo, fundo terracota com filete esgotado, · para numeração que o modelo não tem. Tamanho único ocupa a grade inteira com uma célula só. Nada de selo colorido.

  2. 02

    Miniatura do produto (<Miniatura>, Miniatura.tsx): perfil de catálogo em SVG próprio, pintado com a cor real da variação, num quadro .prateleira-mini. São ilustrações de exemplo: no cliente o mesmo quadro recebe a foto do produto.

  3. 03

    SKU em selo mono com borda (.prateleira-selo), nunca texto solto.

  4. 04

    Canal só pelo traço da borda (.prateleira-canal): Loja sólida, ML tracejada, Shopee pontilhada. No gráfico, o mesmo código vira padrão de preenchimento (.prateleira-serie-*).

  5. 05

    Coerência calculada: KPI "SKUs abaixo do mínimo", aba "Repor", contagem da lateral e cobertura saem da mesma lista (estoque.itens) no Landing.tsx. Nunca digite esses números.

  6. 06

    Estados reais na tela: linha-esqueleto "Importando pedidos do Mercado Livre…" na fila (carregando), canal Shopee com "token expirado · Reconectar" na lateral (erro), "Nenhuma mediação aberta" em Devoluções (vazio que ensina), paginação desabilitada (desabilitado), duas linhas marcadas com a barra de ação em massa (seleção).

  7. 07

    Gráfico de canais com eixo Y em reais, grade horizontal, data no eixo X, balão no hover e no foco (coluna focável), e o dia em aberto com o contorno tracejado do mesmo dia da semana passada. Abaixo, a tabela de participação por canal.

Regras do jogo

Direto do DESIGN.md.

Ver DESIGN.md

Identidade

  • Fundo off-white quente #f5f0e3; painéis e tabelas em #fdfbf4 com filete #ddcfae (entre linhas, --p-filete #e8dec6). Segunda camada neutra --p-lateral #efe8d6 na lateral.
  • Texto marrom-tabaco quase preto #241a10, secundário #74624c (≥ 4.5:1 no fundo).
  • Primária marrom-tabaco #5b3a1f: botão principal, ícone do item ativo, série "loja própria" do gráfico, foco de teclado. É a cor "do software".
  • Oliva (--d-accent #6f7a3f, texto --p-atencao #59642c) = atenção: numeração abaixo do mínimo, contagem da lateral que pede ação, devolução recebida para conferir.
  • Terracota --p-critico #a5432a = crítico, só: numeração esgotada, pedido atrasado, cobertura menor que o prazo do fornecedor, canal com falha, devolução recusada.
  • Fontes: Hanken Grotesk para tudo, com tabular-nums ligado no design inteiro. Red Hat Mono só para código: SKU, número de pedido, horário de postagem, localização, numeração da grade. Régua: "código é mono, quantidade e valor são grotesca tabular".
  • Escala fixa de produto: 13px para quase tudo, 15px título de painel, 22px título da página, 26px número de KPI. Cantos 0.375rem/0.625rem.

Regras

  • Status é texto + ícone pequeno de uma cor (lucide, traço 1.75), nunca pílula colorida.
  • Item ativo da lateral: fundo surface neutro com filete, ícone tabaco. Nada de pílula tingida.
  • Abas de filtro sublinhadas (.prateleira-aba), com contagem ao lado em cinza.
  • Botões: um vocabulário só (.prateleira-btn: padrão, data-tipo="primario", "fantasma"), 32px de altura, com hover, ativo, foco e desabilitado. Classes de componente ficam em @layer components para hidden/sm:inline-flex funcionarem.
  • Tabela: cabeçalho --p-cabeca, hover --p-hover, selecionada --p-selecao (aria-selected), coluna de ordenação com seta e aria-sort, primeira coluna fixa (.prateleira-fixa) quando a tabela rola de lado. Sempre overflow-x-auto com pai min-w-0.
  • Proibido: gradiente, glow, vidro, sparkline, donut, avatar com aro, ícone em quadrado colorido, rótulo em caixa-alta acima de título, numeração de seção.
  • Lateral ocupa a altura toda (o <aside> estica no grid; o conteúdo dela é sticky). No celular vira barra de topo com gaveta (<details>, sem JS) que mostra o erro de canal.
  • Animação: data-sobe nos KPIs, data-revela nos painéis, barras do gráfico crescem uma vez, 150–250 ms nas transições. Tudo para em prefers-reduced-motion.
  • Estado é só visual (CSS/props). Separar pedido, gerar pedido de compra e reconectar canal são do app real.

Adaptar à marca do cliente

  • Troque --d-primary pela cor de marca se for escura e quente (marrom, terracota, verde garrafa, azul-marinho escuro). Mantenha --d-accent oliva e --p-critico terracota — são papéis de atenção/crítico, não de marca.
  • Marca clara ou muito saturada? Use-a só no nome da loja na lateral e no botão principal; mantenha o fundo off-white e o texto tabaco para não perder a legibilidade dos números.
  • Se a loja não vender por marketplace, tire "Canais" da lateral e o gráfico de vendasCanal vira uma barra só (sem padrão tracejado/pontilhado).
Claude Code

Leve o Prateleira
para o cliente.

Dentro do projeto do cliente, cole o comando. A skill lê o DESIGN.md e o meta.json deste design e aplica tokens, fontes e textos.

/escolher-design usar o design Prateleira (prateleira)

Outros painéis

Mais painéis admin do catálogo.

Ver catálogo
PainelclaroVer design

Funil

PainelclaroVer design

Balcão

PainelclaroVer design

Canteiro

PainelclaroVer design

Rota