Balcão.

Painel do dia para dono de pequeno negócio: saudação com resumo em uma frase, números grandes, pedidos e horários com status em pílulas, estoque em gomos e o caixa como recibo serrilhado. Claro, amigável e feito para o celular, sem cara de ERP.

Tipo: Painel admin
Tema: Claro
Títulos: Plus Jakarta Sans
Texto: Plus Jakarta Sans

ParaDono ou gerente de pequeno negócio que acompanha o dia pelo celular entre um cliente e outro; não é analista

Obter acesso · a partir de R$ 49ou todos os designs por R$ 297 ao ano

Abrir em tela cheia

/preview/balcaoTela cheia

Blocos da tela01/04Topo e navegação

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

Conceito

Painel do dia para quem toca um negócio pequeno: pet shop, loja, delivery, salão, clínica. Claro, amigável e com números grandes. Parece app de celular bem-feito, não ERP cinza. Quem usa é o dono, de pé, entre um cliente e outro: poucas palavras, uma ação por linha.

ParaDono ou gerente de pequeno negócio que acompanha o dia pelo celular entre um cliente e outro; não é analista

Paleta

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

Tipografia

Plus Jakarta Sans nos títulos, Plus Jakarta Sans no texto.

TítulosPlus Jakarta Sans

Aag!

Balcão em uma linha

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoPlus Jakarta Sans

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

negócio com pedidos e agenda no mesmo dia
uso principal no celular
marca simpática, colorida sem ser infantil
sistema vendido para pequenos comerciantes (SaaS de gestão simples)

Evitar para

painel financeiro ou analítico denso
B2B corporativo e ferramentas de desenvolvedor
marca sóbria de luxo
telas com dezenas de colunas de dados

Nichos

loja de bairropet shoprestaurante com deliverylanchonetepadaria e confeitariasalão de belezabarbeariaclínica pequenaestéticaPDV e gestão de pequeno varejo

Tom

amigávellevediretootimista

O que faz ser Balcão

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

01
Toldo listrado com borda em ondas no topo da saudação (.balcao-toldo) e a vitrine ilustrada ao lado.
02
Saudação com resumo em uma frase ("Hoje tem 14 pedidos, 6 horários e 3 produtos acabando"), números coloridos.
03
Sombras coloridas: cada cartão tem a sombra da própria cor (--b-sombra-primaria/pessego/menta).
04
Caixa do dia como recibo com borda serrilhada (.balcao-recibo, máscara CSS), linhas pontilhadas, fonte mono e código de barras decorativo.
05
Estoque em gomos: 10 segmentos que acendem em sequência; pêssego forte quando está crítico.
06
Barra inferior de app no celular com o botão "Novo" saltado no meio.
07
Status sempre em pílula com ponto; o ponto pulsa quando pede atenção.

Regras do jogo

Direto do DESIGN.md.

Ver DESIGN.md

Identidade

Fundo areia #f6f5f1; cartões brancos com cantos bem arredondados (rounded-d-lg = 1.75rem).
Texto #1d1b16, secundário #6d685c. Nada de cinza frio.
Primária índigo #5b5bd6: item ativo, botão principal, barra de hoje, o que é "seu".
Pêssego #ffb86b (forte #e8892a) é só para o que pede atenção: falta pagar, sem resposta, estoque acabando, a receber. Se tudo estiver bem, quase não aparece pêssego na tela.
Apoio: lavanda #ecebfc (fundo de coisa em andamento/ativa) e menta #e2f5ea/#2f9160 (confirmado, alta).
Fonte: Plus Jakarta Sans (extrabold nos números e títulos); JetBrains Mono para hora, valores e recibo.

Regras

Uma frase, um número, uma ação. Nada de jargão ("ticket médio", "KPI", "MRR"): "Vendas hoje", "A receber".
Toda comparação é simples e com referência humana: "+12% que quinta passada".
Toda linha da lista tem uma ação rápida com verbo ("Cobrar", "Chegou", "Aceitar").
Lista é lista, não tabela: no celular a pílula e o valor descem para a segunda linha, sem rolagem lateral.
Gráficos em SVG próprio: barras com rx generoso, linha de média tracejada, valor no balão ao passar o mouse.
Animação: data-sobe na saudação/atalhos/cartões; barras crescem, gomos acendem, sparkline se desenha. Tudo para em prefers-reduced-motion.
Filtro da lista só com CSS (radios + :has). Estado real (abrir pedido, cobrar) é do app do cliente.

Adaptar à marca do cliente

Troque --d-primary (e as sombras --b-sombra-primaria) pela cor da marca, se for média/escura. Mantenha o pêssego como cor de atenção; se a marca for laranja, use outra cor quente só para atenção.
Troque a ilustração Vitrine e os ícones do tipo de item (tesoura = serviço, sacola = pedido) pelo nicho: prato/moto no delivery, estetoscópio na clínica.
Nicho sem agenda? Tire o cartão "Agendamentos" e a linha do tempo; o grid se ajusta.

Como usar

Dois arquivos.
Um prompt.

O Balcão vira o sistema do seu agente de código: ele monta qualquer tela com esta cara, não só a landing de exemplo.

Prompt para o agente

Leia o DESIGN.md na raiz do projeto e siga as regras dele em toda tela. Importe o sistema.css uma única vez no ponto de entrada do projeto e use as classes e tokens dele em vez de criar estilos novos. Antes de cada mudança de interface, releia o DESIGN.md.

01Baixe os dois arquivosDESIGN.md (as regras visuais) e sistema.css (tokens, componentes e as assinaturas do design).
02Coloque no projetoDESIGN.md na raiz. O sistema.css importado uma vez no ponto de entrada: funciona em React, Vue, Svelte, HTML ou WordPress.
03Cole o prompt no seu agenteEle lê as regras e passa a montar qualquer tela (login, preços, painel) com a cara do design.
04Deixe a regra fixaColoque o prompt nas regras do projeto do agente para toda tela nova seguir as mesmas cores, fontes e espaçamentos.