Prateleira.

• boutique multi-canaux
• activité avec expédition et stock physique
• marque à l'identité chaleureuse/artisanale (cuir, bois, textile)
• système de gestion vendu au petit commerce (SaaS ERP/OMS simple)

• tableau de bord purement financier ou comptable
• produit 100 % digital sans stock physique
• marque froide/tech ou de luxe minimaliste
• activité à très gros volume (centaines de milliers de SKU)

Ton

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).