Balcão.

• negocio que vende por más de un canal (mostrador, WhatsApp, iFood)
• operación con caja física y delivery
• sistema de gestión/POS vendido a pequeños comerciantes
• marca simpática que necesita parecer software serio

• panel financiero o analítico corporativo
• herramienta para desarrolladores o B2B técnico
• marca sobria de lujo
• cocina en tiempo real (KDS)

Tono

Identidade

• Fundo areia #f6f5f1; painéis brancos com filete #e3dfd3 e raio de 12px (rounded-d-lg); controles com 7px. Segunda camada neutra --b-lateral #efede6 na lateral.
• Texto #1d1b16, secundário #6b665a (≥ 4.5:1 no branco e na areia). Nada de cinza frio.
• Primária índigo #5b5bd6: botão principal ("Nova venda", "Aceitar", "Fechar caixa"), aba ativa, ícone do item ativo, linha do "agora" no gráfico, foco de teclado.
• Canais numa rampa de índigo: Balcão --b-balcao #3b3bb3, Delivery próprio --b-delivery #8584e3, iFood --b-ifood #c7c6f3. A mesma cor aparece no gráfico por hora, na barra de participação, na tabela de canais e no quadradinho de canal de cada pedido.
• Pêssego #ffb86b (texto --b-atencao #9a4d05) = pede atenção: fiado, conta que vence hoje, ração que acaba hoje, botão de resolver pendência ("Avisar", "Pagar" vencida).
• Tijolo --b-critico #b3361f = erro ou atraso, só: nota fiscal rejeitada, pedido atrasado, conta vencida, produto esgotado. Verde --b-positivo = entrou dinheiro / subiu.
• Fonte: Plus Jakarta Sans para tudo, com tabular-nums no design inteiro (números alinham em coluna). JetBrains Mono só para código: número do pedido e SKU. Escala fixa de produto: 13px quase tudo, 15px título de painel, 22px título da página, 24px número de KPI.

Regras

• Status é ícone lucide + texto de uma cor com o detalhe embaixo ("Saiu 13:58 · Josué"), nunca pílula colorida. Contagens da lateral em texto simples na cor do papel, sem bolha.
• Item ativo da lateral: fundo branco com filete e ícone índigo. Nunca pílula tingida.
• Um vocabulário de botão (.balcao-btn: padrão, data-tipo="primario" | "atencao" | "fantasma", data-tamanho="p"), com hover, ativo, foco e desabilitado. Uma ação por linha, com verbo da operação ("Aceitar", "Pronto", "Entregue", "Despachar", "Retirou", "Pagar", "Chamar").
• Tabela (.balcao-tabela): cabeçalho --b-cabeca, hover --b-hover, seleção aria-selected, coluna de ordenação em preto com seta e aria-sort, texto longo com truncate + title. Sempre dentro de relative min-w-0 overflow-x-auto (o relative segura os sr-only dentro da rolagem).
• Abas sublinhadas com contagem em cinza, filtro só com CSS (radios + :has).
• KPIs numa faixa única com filete entre as células; cada um com uma comparação em linguagem de loja ("vs. segunda passada", "1 atrasado · 1 para aceitar"). Sem ícone, sem sparkline.
• Proibido: saudação, ilustração, toldo, gradiente, glow, vidro, sombra colorida, donut/anel, sparkline, avatar com aro, ícone em quadrado colorido, rótulo acima de título, emoji.
• Lateral ocupa a altura toda (o <aside> estica no grid; o conteúdo é sticky h-screen). No celular vira barra de topo com gaveta (<details>, sem JS); tabelas e gráfico rolam de lado dentro do painel, a página nunca.
• Movimento: data-sobe nos KPIs, data-revela nos painéis, colunas do gráfico crescem uma vez, transições de 120–150 ms. Tudo para em prefers-reduced-motion.
• Estado é só visual (CSS/props). Aceitar pedido, reenviar nota, fechar caixa e pagar conta são do app.

Adaptar à marca do cliente

• Troque --d-primary e a rampa --b-balcao/delivery/ifood pela cor da marca (média ou escura) em três claridades. Mantenha pêssego (atenção) e tijolo (erro): são papéis, não marca.
• Sem iFood? Troque pelo app do nicho (Rappi, 99Food, Aiqfome) ou tire o canal: a rampa fica com dois tons.
• Outro nicho: troque "Recompra de ração" pelo recorrente dele (padaria: encomendas de amanhã; empório: fiado para cobrar) e "Banho e tosa" na lateral pela agenda do negócio, se houver.