Um amarelo só
O amarelo marca a ação principal, o total e a seleção. Dois botões amarelos juntos indicam hierarquia errada.
Projeto · outubro de 2026
Bastião
Delivery.
Tudo do projeto num lugar só: regras, fluxo do pedido, as telas do sistema da rede, o app do cliente e o Design System.
6 lojas
13 telas do sistema
8 telas do app
7 componentes
Rede Bastião · desde a primeira gelada
O que é o projeto
Um sistema próprio para a rede de lojas de bebidas do Bastião, em duas partes ligadas ao mesmo banco: o sistema interno da equipe (PDV, pedidos, estoque, caixa e gestão) e o app em que o cliente faz o pedido.
DOCUMENTORegras de negócioLojas, perfis, PDV, pedidos, estoque, caixa, cascos e app do cliente, com o status de cada regra.
13 TELASSistema da redeLogin, Início, PDV, Pedidos, Caixa, Produtos, Estoque, Clientes, Gestão e Configurações.
8 TELASApp do clienteDa confirmação de idade até "Pedir de novo", com o fluxo inspirado no Zé Delivery.
EDITÁVELCanvas das telasO arquivo de design onde as telas são ajustadas e comentadas.
Do app até a impressora da loja
O pedido feito no app aparece na hora no quadro da loja e sai impresso sozinho, como no sistema que as lojas usam hoje.
Cliente pede no appEscolhe as bebidas e paga por PIX, cartão ou na entrega.
Pedido vai para o bancoGravado já com a loja que atende aquele endereço.
Aparece no KanbanEm tempo real, com som, na coluna "Novo pedido".
Sai na impressoraO agente de impressão imprime o cupom sem ninguém clicar.
Saiu para entregaO atendente informa o entregador e o cliente acompanha no app.
EntregueO estoque baixa e o pagamento entra no caixa da loja.
Como imprimir automaticamente
Agente de impressão (recomendado)Programa instalado no computador da loja. Escuta os pedidos novos e manda o cupom direto para a impressora térmica, mesmo com o sistema minimizado. É o que os sistemas atuais fazem.
Chrome em modo quiosqueO sistema fica aberto no Chrome configurado para imprimir sem perguntar. Bom para começar rápido, mas depende da aba aberta.
Impressão pela nuvemServiço pago (ex.: PrintNode) que recebe a ordem pela internet. Útil com várias impressoras ou sem computador fixo.
O cupom traz número do pedido, horário, cliente, telefone, endereço com referência, itens, total, forma de pagamento e troco. É um cupom de controle: a nota fiscal (NFC-e) é outra integração, a decidir.
Telas do sistema da rede
Desktop, tema escuro oficial, 1440 × 900. Toque numa tela para ver em tamanho real.
App do cliente
Celular, tema claro quente, 390 × 844. O fluxo segue o Zé Delivery: idade, endereço, vitrine, sacola, pagamento e acompanhamento.
O que falta decidir
Cada item trava uma parte da construção. A sugestão é só um ponto de partida.
| Decisão | Trava | Sugestão |
|---|---|---|
| Modelo da impressora e sistema atual das lojas | Impressão automática | Levantar marca e modelo (Epson, Elgin, Bematech) e como imprimem hoje |
| Nota fiscal (NFC-e) | Balcão e entrega | Integrar depois do MVP com um emissor (ex.: Focus NFe) |
| Taxa de entrega | Pedidos e app | Valor fixo por bairro |
| Estoque negativo | Estoque e PDV | Bloquear venda sem estoque |
| Momento da baixa no delivery | Estoque e pedidos | Reserva ao confirmar, baixa ao sair para entrega |
| Pagamento misto | PDV e caixa | Permitir duas formas na mesma venda |
| Sobra e falta no fechamento | Caixa | Diferença exige justificativa escrita |
| Cascos retornáveis | PDV, estoque e app | Casco como item separado, com saldo por cliente |
| Backend, banco e login | Tudo depois das telas | Supabase com tempo real e permissões por loja |
| Pagamento online no app | App do cliente | PIX e cartão via Mercado Pago ou Asaas |
Feito para o balcão, não para a vitrine
A operação deve ser rápida para o atendente, rastreável para o gerente e clara para o administrador. Estas quatro regras resolvem a maior parte das dúvidas de tela.
Números são a voz
Preços e totais em Archivo, com algarismos alinhados. Dinheiro é guardado em centavos e formatado na tela.
R$ 1.220,50
Escuro confortável
Cinza-chumbo em degraus, nunca preto puro em tudo. Feito para turnos inteiros na frente da tela.
Estado com palavra
Toda cor de status vem com texto. "Estoque baixo" é sempre "Estoque baixo", em todas as telas.
Estoque baixo
Amarelo Bastião sobre cinza-chumbo
Toque numa cor para copiar o valor. As cores acompanham o tema da sua tela: no escuro você vê os valores oficiais, no claro os provisórios.
Hierarquia do amarelo
Primário
Fundo amarelo sólido, texto quase preto. Uma vez por região.
Selecionado
Borda amarela e fundo suave. Opções, categorias, item ativo.
R$ 78,87
Ênfase
Texto amarelo para o total e a meta. Só no tema escuro.
Evitar
Decorativo
Cards, ícones e bordas amarelas em toda parte gastam a cor.
Superfícies
canvas#151515 · #F6F5F0Fundo da aplicação
surface-1#1B1B1B · #FFFFFFPainéis, modais, drawers
surface-2#202020 · #F6F5F0Inputs e produtos
surface-3#272727 · #EDECE6Seleção neutra
surface-4#303030 · #DEDDD7Elevação rara
Marca, texto e estados
Gráficos, nesta ordem
Três vozes, cada uma com seu trabalho
Archivo fala alto nos títulos e nos números. Inter carrega a interface. JetBrains Mono fica com o que precisa ser lido caractere por caractere.
R$Archivo
Títulos de página, métricas e totais do PDV. 600 a 800.
AaInter
Corpo, botões, tabelas e campos. Nunca abaixo de 13px no desktop.
#07JetBrains Mono
Número de pedido, senha do balcão e código de barras.
Escala
Pedido entrou.display-xlArchivo 700 · 40/44
R$ 1.220,50metric-xlArchivo 700 · 30/32 · total do PDV
Pedidospage-titleArchivo 700 · 28/34
Venda atualheading-lgArchivo 650 · 20/26
Fechar caixaheading-mdInter 600 · 18/24
Cliente retira no balcão. O estoque baixa quando a venda é finalizada.bodyInter 400 · 14/21
Forma de pagamentolabelInter 500 · 13/18
#1043 · 7891149108718monoJetBrains Mono 500 · 12/17
Como escrever números
MoedaR$ 1.220,50
Negativo−R$ 49,70
Percentual14,2%
Quantidade1.654
Horário20:15
Data20/05/2026
Base de 4px, toque de 44px
Espaço agrupa antes da borda. Botões e campos têm 44px, que também é a área mínima de toque. Card só existe quando é um objeto que se seleciona.
Espaçamento
space-14px
space-28px
space-312px
space-416px
space-520px
space-624px
space-832px
space-1040px
space-1248px
space-1664px
Raios
radius-sm · 6pxTags
radius-md · 8pxCampos
radius-lg · 12pxBotões, cards
radius-xl · 16pxModais
radius-fullStatus
radius-xs · 4pxContadores
Peças prontas para montar as telas
Os mesmos sete componentes do Design System, com os estados que aparecem no dia a dia da loja. Os botões e seletores aqui respondem ao clique.
Button Bastiao.Button
Primário uma vez por região. Contorno amarelo para a alternativa importante. O texto nomeia a ação: nunca "OK" ou "Enviar".
SegmentedControl Bastiao.SegmentedControl
Até cinco opções exclusivas. Acima disso, use um seletor.
R$
Devolver R$ 21,13R$
Informe o valor em dinheiro na gaveta.Input Bastiao.Input
Label sempre visível. Moeda com prefixo separado. Erro escrito embaixo do campo.
2
Heineken Long Neck330 ml · unidadeDisponível · 48 un.
R$ 8,99
Gelo em cubosSaco 5 kgSem estoque
R$ 12,00
ProductTile Bastiao.ProductTile
O botão amarelo de adicionar é a assinatura do PDV. Sem foto boa, o mascote entra como placeholder.
#1043há 6 min
Mariana Souza
Nova Pampulha · 4 itens
R$ 86,40PIX na entrega
Novo pedido
OrderCard Bastiao.OrderCard
Número, tempo, cliente, bairro, total e a próxima ação. O tempo decorrido é o sinal de urgência.
Faturamento hojeR$ 19.750+8,4% vs. ontem
Pedidos hoje142+12 vs. ontem
Ticket médioR$ 139,08−2,1% vs. semana passada
Cancelamentos3−4 vs. ontem
MetricCard Bastiao.MetricCard
Sempre com a base da comparação. A cor segue o significado: menos cancelamentos é verde.
Mesma palavra, mesma cor, em toda tela
Estes são os únicos status do sistema. Um status novo só entra depois de registrado nas regras de negócio.
| Status | Quando |
|---|---|
| Novo pedido | Entrou pelo app ou pelo PDV |
| Saiu para entrega | Entregador informado |
| Entregue | Pagamento confirmado |
| Cancelado | Reserva de estoque liberada |
| Status | Regra |
|---|---|
| Disponível | Acima do mínimo |
| Estoque baixo | No mínimo ou abaixo |
| Crítico | No limite crítico |
| Sem estoque | Quantidade zero |
| Inativo | Desligado na loja |
Fala como gente de loja
Direta, calma e específica. O botão diz o que acontece. O erro diz o que houve, o que foi guardado e o que fazer.
Assim
Finalizar venda
Não assim
Processar
Assim
Não foi possível finalizar a venda. O carrinho foi preservado. Verifique a conexão e tente de novo.
Não assim
Erro 500. Algo deu errado.
Assim
Nenhum lançamento neste caixa. As vendas aparecem aqui depois da abertura.
Não assim
Nada por aqui ainda!
O boiadeiro
O mascote assina o login, o ícone do app e os estados vazios. Fica fora de tabelas, cards de métrica e modais comuns.
Sobre o amareloUso principal. Traço preto, fundo brand-yellow.
Sobre o escuroTraço invertido para branco.
Ícone e faviconO mascote no quadrado amarelo arredondado.