Painelescurotécnicoprecisodenso

CCockpit

Cockpit.

Painel de instrumentos escuro sobre papel milimetrado: bordas de 1px com cantos marcados, números em mono, teal para o que está bem e âmbar só para alerta. Denso e preciso, com hierarquia forte.

Tipo: Painel admin
Tema: Escuro
Títulos: IBM Plex Sans
Texto: IBM Plex Sans

ParaTimes técnicos e de operação (engenharia, SRE, dados, suporte) que olham números o dia todo

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

Abrir em tela cheia

/preview/cockpitTela cheia

Blocos da tela01/07Topo e navegação

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

Conceito

Painel de operação escuro, denso e preciso. Parece painel de instrumentos (grade milimetrada, cantos marcados, leituras em mono), não template de admin.

ParaTimes técnicos e de operação (engenharia, SRE, dados, suporte) que olham números o dia todo

Paleta

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

Tipografia

IBM Plex Sans nos títulos, IBM Plex Sans no texto.

TítulosIBM Plex Sans

Aag!

Cockpit em uma linha

ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

TextoIBM Plex 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

produto técnico com muitos números por tela
monitoramento em tempo real e incidentes
marca com teal, verde-água, ciano ou tema escuro
usuário que passa horas no painel

Evitar para

clínica, salão ou negócio local com público leigo
painel com poucos números (vira vazio)
marca clara, pastel ou lúdica
público que precisa de letra grande e pouca informação

Nichos

SaaSanalyticsobservabilidadeDevOpsinfraestruturafintechgateway de pagamentosAPIlogísticasegurançaIoToperação de call center

Tom

técnicoprecisodensosóbrioconfiável

O que faz ser Cockpit

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

01
.cockpit-painel: borda 1px + cantos marcados (ticks de 9px nos 4 cantos) que acendem em teal no hover e ficam âmbar com data-alerta.
02
Micro-rótulos em mono caixa-alta espaçado (.cockpit-rotulo) acima de todo título e cabeçalho de tabela.
03
Ao vivo: ponto que pulsa (.cockpit-vivo, cor = currentColor) no título, no feed e no incidente.
04
Faixa de incidente com listras diagonais âmbar, severidade, etapas (detectado → resolvido) e um único botão âmbar.
05
Gráfico principal com grade tracejada, série anterior tracejada, janela do incidente listrada no eixo, marcador de pico e leitura por hora no hover (só CSS).
06
Rosca com régua de ticks em volta, como mostrador.

Regras do jogo

Direto do DESIGN.md.

Ver DESIGN.md

Identidade

Fundo #0b0d10 com grade milimetrada (.cockpit-grade: 8px fina, 40px forte). Painéis em #11151a/#171c23.
Texto #e6edf3; secundário #8b98a8. Bordas #232a33, sempre 1px.
Teal #2dd4bf = saudável, ativo, dado principal. Âmbar #f59e0b = atenção/incidente, e só isso. Vermelho --ck-ruim só para falha; azul --ck-info para teste/deploy.
Fontes: IBM Plex Sans para tudo; IBM Plex Mono para número, id, hora, rótulo (com tnum).
Cantos quase retos (--d-radius: 4px). Nada de sombra grande nem gradiente colorido.

Regras

Hierarquia: título da tela > incidente > KPIs > gráficos > tabela/feed. Âmbar nunca aparece fora de alerta.
Número sempre em mono, alinhado à direita em tabela. Unidade menor e em muted ao lado do valor.
Variação: chip teal quando é bom, âmbar quando é ruim (o sentido vem do dado, não do sinal).
Densidade: gap-3, painéis com px-4 py-3, texto base 13–14px. Não aumentar respiro "para ficar bonito".
Animação: data-sobe no título/incidente/KPIs, data-revela do que fica abaixo da dobra, varredura do gráfico e pulso ao vivo. Tudo para com prefers-reduced-motion.
Ícones lucide size-4, strokeWidth 1.75.
Celular: lateral some e vira barra horizontal rolável sob o topo; tabela em overflow-x-auto dentro de pai min-w-0.

Adaptar à marca do cliente

Troque só --d-primary (e as cores teal fixas do SVG em Landing.tsx: #2dd4bf, #1c9c8d, #136a61) pela cor da marca, se for fria e clara o suficiente no escuro.
Mantenha âmbar como alerta. Se a marca for laranja/amarela, use-a como primária e passe o alerta para vermelho.
Marca clara ou público leigo: este design não é o certo.

Como usar

Dois arquivos.
Um prompt.

O Cockpit 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.