Design System Horus Hub
Inteligência jurídica que enxerga por você. Dark-first, gradientes assinatura, números concretos. Um sistema, cinco módulos.
Marca & emblemas
Horus Hub é a marca guarda-chuva. Cada módulo tem cor própria, mas assina sempre o lockup Horus Hub · <Módulo> — nunca um logo concorrente. O Horus Office (escritório virtual) assumiu o slot azul do antigo App Hub interno.
Horus Hubmarca-mãe · roxo
O Estagiárionorth-star · roxo
Horus Officeescritório virtual · azul
JurisLabciano
Advocacia com IApink
OrchestratorlaranjaCores
Roxo #7c26d9 é a cor principal. Funcionais para status; uma cor por módulo. Base dark sempre — não existe light mode.
Gradientes & efeitos
Purple→blue em CTAs e heros; purple→pink só em texto de destaque. Glass + glow são a assinatura visual.
Glass card
Vidro + blur sobre fundos com glow.
Glow
Box-shadow roxo para foco e destaque.
Recurso [IA]
advocac[IA] · estratég[IA] — só quando a palavra já contém "ia".
Tipografia
Space Grotesk para títulos, Inter para corpo e UI, Source Serif 4 para editorial, JetBrains Mono para dados técnicos.
Space Grotesk 700Inter 400–600Source Serif 4 · itálicoJetBrains MonoEspaço & raio
Passo base de 0.25rem. Raio padrão 0.75rem — arredondado sem ser macio. Os cards abaixo são as fichas canônicas do design system, renderizadas direto do kit.
Fundamentos da marca
Arquitetura, regras de aplicação do logo, posicionamento e tom. É o que decide se uma peça pode assinar Horus Hub.
Base — Card & Emblem
As duas primitivas que sustentam o resto: a superfície de conteúdo e o vórtice. Todo componente do sistema apoia num Card; toda peça market-facing assina com um Emblem.
Ações & formulários
Componentes reais, renderizados ao vivo do bundle do design system.
Feedback
Toasts em glass, tooltips escuros, modal sobre scrim desfocado.
Formulários avançados
Checkbox e radio com gradiente, seletor de data pensado para prazos processuais e dropzone de documentos.
Overlays & painéis
Gaveta lateral, popover de conteúdo livre e faixas de anúncio.
App shell & estados
O esqueleto dos 5 apps do Hub — sidebar com item ativo na cor do módulo — mais estados vazios e skeletons de carregamento.
IA
A conversa com a IA do Hub — bolhas de chat, texto em streaming e sugestões de prompt.
Mascotes — O Estagiário, Thoth & Atena
Os rostos dos agentes — poses = estados, com cor semântica no dot. O Estagiário (atendimento): 11 estados. Thoth (Orchestrator): 7 estados operacionais. Atena (Advocacia com IA): 7 estados da agente da comunidade.
Dados
Métricas em Space Grotesk, gráficos na paleta canônica, timeline de atividade e o funil de leads — números concretos em primeiro lugar.
Marketing
Blocos de landing page: planos, prova social com resultado concreto, FAQ e "como funciona".
Mídia
Player de VSL com moldura da marca, carrossel de cases e áudio estilo podcast.
Documentos & PDF
Capa de proposta, papel timbrado e bloco de assinaturas — institucional assina Horus Negócios Digitais LTDA.
Merch, impressos & aplicações
Primeiro a regra de construção, desenhada em CSS e recolorindo por produto: brindes em material escuro com acento gradiente, cartão 85,5×54mm, assinatura de e-mail, certificado e fundo de reunião. Depois, a peça como ela sai produzida.
Newsletter
Cabeçalho, matéria, rodapé e bloco de captura — o e-mail inteiro sai do design system. Cada módulo tem a sua no tema próprio.
Slides
Apresentação comercial no padrão da marca: capa com glow, prova em números e o mantra editorial sobre o gradiente assinatura. 1280×720, exportáveis direto.
Templates
Telas inteiras já montadas com o sistema — ponto de partida para site, produto e loja. Abra em tela cheia para navegar de verdade.
Por produto
O mesmo sistema, cinco temas. Cada página abaixo é o brand book do módulo com .prod-<chave> aplicado — é ela que o /admin/design-system de cada produto embute.
Voz & tom
pt-BR direto, na linguagem do mercado jurídico. Especialista que respeita o leitor — nunca guru.
"Marketing não é sobre curtidas — é sobre faturamento."
"Tecnologia é o veículo, estratégia é o motor."
"Se não pode ser medido, não pode ser gerido."
Social & criativos
Post de feed, story e capa de perfil com a assinatura visual — sempre @horushub.ia.