Design system
Comanda
Sistema visual do pedido na mesa por QR — noite de bar como padrão, balcão legível a quatro metros.
Fonte única: DESIGN.md na raiz. Alterar um token é editar o front matter e rodar pnpm design:tokens. Esta página e o design-tokens.css saem da mesma execução — nenhum valor aqui foi digitado à mão.
Cores
Âmbar do chopp é a única cor de marca. Azul, verde e vermelho só existem como estado. O chão da noite é marrom-preto quente, não preto neutro; o do dia é azulejo, não creme.
Marca — invariante nos dois temas
chopp#f4af2d10.25:1 · AAAchopp-deep#de88007.10:1 · AAAcolarinho#fbf5e517.95:1 · degrau sobre night-pagebreu#110b0710.25:1 · AAAalarme#cc28273.63:1 · AA-largealarme-ink#fff8f65.13:1 · AANoite — o padrão do produto
night-page#110b071.00:1 · degrau sobre night-pagenight-surface#1f17121.11:1 · degrau sobre night-pagenight-raised#2c221c1.26:1 · degrau sobre night-pagenight-line#3c332e1.59:1 · degrau sobre night-pagenight-ink#f5f1ec17.38:1 · AAAnight-ink-muted#aaa39d7.85:1 · AAAnight-pending#f4af2d10.25:1 · AAAnight-acked#4fbef39.30:1 · AAAnight-delivered#65c98c9.57:1 · AAAnight-overdue#ff504b6.05:1 · AAnight-focus#f4cc6412.72:1 · AAADia — azulejo, para o painel do dono
day-page#f4f7f91.00:1 · degrau sobre day-pageday-surface#ffffff1.08:1 · degrau sobre day-pageday-raised#f9fbfd1.04:1 · degrau sobre day-pageday-line#d8dde01.27:1 · degrau sobre day-pageday-ink#1c161216.64:1 · AAAday-ink-muted#635c586.10:1 · AAday-pending#a25d004.76:1 · AAday-acked#0070ae4.97:1 · AAday-delivered#0b76435.29:1 · AAday-overdue#d0121c5.16:1 · AAday-focus#be72003.49:1 · AA-largeSemânticos — o que o código usa
--color-page--color-surface--color-raised--color-line--color-ink--color-ink-muted--color-pending--color-acked--color-delivered--color-overdue--color-focusTipografia
Uma família variável auto-hospedada (Archivo), dois eixos. O eixo de largura é o que faz uma fonte bastar dentro do orçamento de payload do PED-02 — o número da mesa é condensado como letreiro de bar, o corpo é largura normal.
Celular e painel
.type-display2rem · peso 800 · largura 85 · entrelinha 1.05 · tracking -0.02emMais uma rodada para a mesa 5
.type-title1.5rem · peso 700 · largura 92 · entrelinha 1.15 · tracking -0.01emMais uma rodada para a mesa 5
.type-subtitle1.125rem · peso 600 · entrelinha 1.3Mais uma rodada para a mesa 5
.type-body1rem · peso 400 · entrelinha 1.5Mais uma rodada para a mesa 5
.type-body-strong1rem · peso 600 · entrelinha 1.5Mais uma rodada para a mesa 5
.type-caption0.8125rem · peso 400 · entrelinha 1.4Mais uma rodada para a mesa 5
.type-label0.75rem · peso 700 · entrelinha 1 · tracking 0.14emMesa
.type-money1rem · peso 600 · entrelinha 1.2 · tabularR$ 18,00
.type-action1.25rem · peso 700 · largura 92 · entrelinha 1 · tracking -0.005emDe novo?
Balcão — lido a 3 a 5 metros
.type-counter-mesa5.5rem · peso 800 · largura 78 · entrelinha 0.85 · tracking -0.04em5
.type-counter-nome2.25rem · peso 700 · largura 88 · entrelinha 1.05 · tracking -0.015emAntonio
.type-counter-item1.625rem · peso 500 · entrelinha 1.3Original 600
.type-counter-qty1.625rem · peso 800 · entrelinha 1.3 · tabular2×
.type-counter-label1rem · peso 700 · entrelinha 1 · tracking 0.16emMesa
.type-counter-clock1.25rem · peso 700 · entrelinha 1 · tabular01:35
Layout, formas e profundidade
A rampa de espaçamento é o passo de 4px do Tailwind; token nomeado só existe para o que a rampa não sabe. Raio generoso sem virar cápsula — placa esmaltada, não app de banco. E profundidade por degrau de superfície na noite, por sombra no dia.
Tokens de espaçamento
base4pxrule8pxrule-counter16pxtouch56pxtouch-lg72pxcounter-gutter24pxNomes de camiseta (xs, md, xl) ficam de fora de propósito: no namespace --spacing-* eles sombreiam --container-*, e max-w-xl passaria a valer 32px em silêncio.
Rampa derivada de base (4px)
p-14pxp-28pxp-312pxp-416pxp-624pxp-832pxp-1248pxp-1664pxRaios
xs4pxsm6pxmd10pxlg14pxxl20pxfull9999pxElevação
shadow-e0chãoshadow-e1cartãoshadow-e2diálogo, sheet, toastNoite: inset 0 1px 0 0 rgb(251 245 229 / 0.08) — aresta de luz, não sombra. Dia: 0 1px 2px 0 rgb(28 22 18 / 0.06).
Kit shadcn
Estilo base-nova, sobre Base UI. Nenhum componente foi editado: o que os repinta é a ponte de variáveis do globals.css, alimentada pelos tokens do DESIGN.md.
Button
Badge
Card, Separator e Skeleton
Input e Label
Só o primeiro nome, no aparelho do cliente — PRD §7.
Tabs e ScrollArea
Dialog, Drawer e Toast
Primitivas Comanda
Três componentes finos sobre o kit shadcn. A régua na margem esquerda é o elemento assinatura: a cor dela é o estado. Passados 90s sem ACK, o cartão inverte inteiro e a régua pulsa — cor, tamanho e movimento, para o alerta bastar com o som desligado.
OrderCard · balcão (BAL-01, BAL-02, BAL-04, BAL-05)
OrderCard · densidade de celular
BigActionButton · o caminho de recompra (PED-01)
72px no caminho de recompra, 56px no mínimo. O toque envia — a confirmação vem depois, nunca antes.