Cockpit.

• factory or workshop with machines and shifts
• equipment IoT/telemetry product
• brand that already uses orange or earthy/neutral tones
• dense light theme, not dark
• operation that measures OEE, stoppages and scrap

• local business or clinic with a lay audience
• brand that needs a dark theme
• dashboard with few numbers
• client who wants a green/yellow/red traffic-light look or a colorful style

Tone

Identidade

• Fundo #eae4d8, nunca branco puro. Painéis #f5f1e8; superfície secundária (trilho de barras, interruptor) #ddd5c4; lateral #e2dbcc.
• Texto #2a2620; secundário #6b6254 (5,3:1 sobre o painel). Bordas 1px #cbc0aa; divisória interna de tabela #ded5c3.
• Laranja `#d9581f` é o único acento. Não existe verde nem vermelho: normal é tinta/neutro, "exige alguém agora" é laranja. Texto laranja pequeno usa #a8431a (--ck-texto-alerta).
• Fontes: Archivo para tudo, com o eixo de largura (font-stretch: 80%) nos rótulos de coluna e na marca; Martian Mono só para dado: número, hora, id de máquina, OP, código de peça (.cockpit-mostrador, tabular-nums + zero cortado).
• Cantos 3–4px. Sem sombra decorativa, sem gradiente, sem glass. Única sombra: interna, no item afundado do interruptor e na base do botão laranja.

Regras

• Nunca: sparkline em KPI, anel/rosca de %, badge redondo colorido, ícone em quadradinho, pílula tingida no menu (item ativo = fio de 2px à esquerda + negrito), rótulo acima de título, borda colorida grossa em card de alerta.
• Laranja só em: parada/alarme alto aberto, desvio ruim de projeção, contagem de alarmes, o fio do "agora" e o botão principal (Apontar parada, um por tela). No Pareto, parada é tinta.
• Número sempre em mono e alinhado à direita em tabela; unidade menor e em muted.
• Coerência obrigatória: nenhum agregado é digitado. calculo.ts deriva tudo de content.ts (segmentos, peças do CLP, refugo apontado): - tempo planejado = decorrido − pausas − tempo sem sinal; - disponibilidade = produzindo / planejado; performance = ciclo padrão × peças / produzindo; qualidade = boas / contadas; OEE = D × P × Q. Planta e linha usam as mesmas fórmulas sobre as somas, nunca a média dos OEE. - Pareto, refugo total, peças por hora (maior resto, soma bate com o CLP), meta por hora (meta da OP ÷ tempo planejado do turno) e projeção de fim de turno também saem de lá.
• Estados representados: carregando (linha "Sincronizando apontamentos com o ERP…" com .cockpit-esqueleto), erro (CLP sem comunicação: faixa hachurada, barra "sem dado", projeção "sem sinal", botão Tentar reconectar → "Consultando GW-07…" → mensagem de falha), vazio ("Nenhuma parada, setup ou ociosidade neste turno."), desabilitado (turno futuro).
• Interação: clicar numa máquina (linha do tempo, OP, alarme) abre o detalhe; OPs ordenam por OP, avanço e projeção (aria-sort + seta); alarme tem Reconhecer; ⌘K foca a busca; Esc fecha a gaveta. Foco de teclado: contorno de tinta 2px com folga em todo controle.
• Animação: data-sobe no título, na faixa de indicadores e na linha do tempo; data-revela nos painéis abaixo. Medidores crescem da esquerda, barras sobem ao trocar de máquina. Tudo para com prefers-reduced-motion.
• Celular: a lateral vira botão de menu + gaveta (role="dialog"); a linha do tempo empilha nome em cima e faixa embaixo; toda tabela rola dentro de um pai min-w-0 overflow-x-auto.

Adaptar à marca do cliente

• Troque só --d-accent pela cor de ação da marca, se ela funcionar como único acento.
• Não introduza verde/amarelo/vermelho de semáforo: se o cliente exige andon colorido, este não é o design certo. Marca que exige tema escuro também não.