Linguagem visual de "central de comando" para o Agentic OS, extraída do JARVIS de Lucas Victor (site, screenshot e 8 reels). Fundo azul profundo, painéis de vidro, rótulos mono rastreados, um orbe de voz vivo no centro e sons sintetizados curtos.
Cinco regras que decidem os casos que este documento não cobre.
Todo movimento comunica estado: o orbe respira em espera, acelera pensando, pulsa falando. Nada se mexe sem motivo.
Brilho só no que importa (estado, foco, dado novo). Texto de leitura em Manrope sem brilho, com contraste alto.
Widgets, telas e monitores usam o mesmo painel HUD; mover, redimensionar e mandar para outro monitor é igual em todo lugar.
O centro da tela é do assistente. Respostas aparecem como cartões projetados a partir do orbe, não em janelas.
Rótulos HUD são enfeite de leitura rápida; a ação sempre tem texto claro em português ("Testar", "Editar", "Salvar alterações").
Online, ouvindo, gastando, bloqueado: o usuário nunca precisa adivinhar o que os agentes estão fazendo.
Valores OKLCH tirados do CSS publicado do JARVIS. Um azul profundo de base, ciano como cor de dado e foco, azul elétrico como cor de energia e voz.
Só em pontos, avatares, trilhas de timeline e nomes no chat. Nunca como fundo de painel.
Space Grotesk para marca, estados e títulos; Manrope para tudo que se lê; JetBrains Mono para rótulos, números e metadados.
Em espera
| Token | Tamanho | Uso |
|---|---|---|
--text-micro | .58rem | Tags de origem, descrições de opções |
--text-label | .68rem | Rótulos HUD, status, botões mono |
--text-xs / sm | .75 / .875rem | Corpo de painel, chat, campos |
--text-lg / xl | 1.125 / 1.25rem | Títulos de cartão e seção |
--text-3xl | 1.875rem | Marca, números grandes |
--text-state | clamp(1.5rem, 2.4vw, 2.25rem) | Título de estado do orbe |
Grade de 64 px quase invisível, halo elétrico atrás do orbe, vinheta para --deep nas bordas e uma moldura arredondada com o "chão" brilhando embaixo.
Laços entrelaçados com ruído e nós de luz correndo sobre eles. Cor, amplitude e rotação mudam por estado com transição suave (~1 s). Use o microfone para ver o orbe reagindo à sua voz.
Em espera
| Estado | Cor | Movimento | Som | Quando |
|---|---|---|---|---|
| Em espera | teal / --cyan | respiração lenta, amplitude baixa | — | Nada acontecendo; agentes podem estar trabalhando em segundo plano |
| Ouvindo | --cyan | amplitude segue o microfone | listenOn | Palavra de ativação ou botão de voz |
| Processando | --violet | rotação rápida, laços apertados | ping a cada 1 s | Entendendo o pedido, montando o plano de comandos |
| Falando | --electric | pulsa com o envelope da voz (TTS) | voz | Lendo briefing, respondendo |
| Precisa de você | --warning | pulso lento quente | attention | Um agente levantou a mão; confirmação sensível (D20) |
| Offline | cinza azulado | quase parado | error | Motor desconectado |
Vidro escuro com gradiente a 160°, borda ciano a 18%, blur 14 px. Cabeçalho = ícone + rótulo HUD branco + meta ciano à direita.
Borda mais forte que o painel, brilho elétrico externo, blur 18 px. Estrutura fixa: ícone + eyebrow mono, título em Space Grotesk, corpo, bloco "Em resumo" com filete ciano e rodapé com fontes e horário.
Peças que não existem no JARVIS e foram desenhadas na mesma linguagem para os módulos Code, Escritório e Uso (decisões D19, D20, D21, D24 e D29).
Cada efeito tem um nome e um gatilho. Durações curtas na interação (150–240 ms), revelações em 700 ms com --ease-hud. Tudo respeita prefers-reduced-motion.
| Efeito | Visto em | Implementação | Gatilho |
|---|---|---|---|
| Orbe de laços | Screenshot, todos os reels | HUD.Orb (canvas) | Estado do assistente |
| Constelação de nós | Telas adicionais | HUD.Constellation | Tela secundária em espera |
| Cartão emergindo do orbe | "Bom dia", pesquisa | .anim-emerge / card-emerge | Resposta com dado visual |
| Cartão indo para o deque | "Bom dia" (briefing) | card-dock | Próximo item do briefing |
| Desbloqueio com anéis | Telas adicionais | HUD.lockRings + .unlock-core | Abrir monitor / reconhecer rosto |
| Moldura de seleção | Mover widgets | .is-selected, .corners | Arrastar/redimensionar widget |
| Varredura (scan) | Site | .hud-scan | Painel carregando |
| Decodificação de texto | Proposto | HUD.decode() | Título de estado mudando |
| Digitação da fala | Canal ativo | HUD.typeText() + .caret | Resposta em texto |
| Entrada lateral | Inicialização | .anim-in-left/right | Boot do HUD |
Centro de comando
Tela desbloqueada.
Sincronizado
Recriada dos espectrogramas dos reels: pings senoidais curtos com 2º harmônico (~900 Hz + 1,8 kHz), arpejos ascendentes no reconhecimento e no desbloqueio, e um chirp final. Tudo sintetizado com Web Audio, sem arquivos. Volume padrão baixo; nunca toca sem uma ação ou evento real.
--foreground.--warning = precisa de você).