Identidade Visual
O sistema visual da Cognito — a plataforma BRM da família Legatus. Verde sobre navy, geometria de torres e a lógica de conexão entre pontos.
“Tudo que sua empresa precisa num só lugar.”Cor
Verde #00e220 sobre navy #000a28.
Tipografia
Poppins (primária) · Montserrat (secundária).
Símbolo
O “L” de torres — pilar + bloco com porta.
Sistema de logo
Assinatura oficial: Cognito by Legatus. Escolha sempre a versão que oferece o melhor contraste com o fundo.
Negativa — sobre navy
Positiva — sobre claro
Avatar / ícone de app (oficial)
Ícone / símbolo — asset único
O “L” de torres isolado, para favicon, ícone, marca d'água e usos onde só o símbolo cabe. Extraído sem modificação do logo oficial.
Verde #00e220 por padrão; para uso monocromático troque o fill do SVG (ex.: branco sobre navy, navy sobre verde).
Área de proteção
Margem mínima = base do ícone “L”, em todos os lados.
Redução mínima
Horizontal 95px / 35mm · Responsiva 70px / 25mm.
Modos
Negativa (sobre escuro) e Positiva (sobre claro). Ícone sempre verde.
Movimento
Animações em SVG puro (SMIL/CSS), sem JS. Sempre respeitando prefers-reduced-motion.
Loader — produto
Quatro torres desenham e preenchem em loop de 2,5s, cyan + verde.
* arquivo usa cyan #00c5fc; oficial é #21b5ea.
Wordmark animado — abertura
Letras entram uma a uma, o ícone revela e ganha um glow verde sutil. Usado em login e menu.
Paleta
Clique em qualquer cor para copiar o HEX. CMYK é para impressos; RGB/HEX para telas.
Principal oficial
Secundária oficial
Acentos por sub-marca
Neutros de UI
Semânticas
Contraste (WCAG)
| Combinação | Ratio | Nível | Uso |
|---|---|---|---|
| Branco / Navy | 18.1:1 | ✅ AAA | texto branco no fundo institucional |
| Verde / Navy | 9.9:1 | ✅ AAA | destaque verde sobre navy |
| Navy / Verde | 9.9:1 | ✅ AAA | texto navy em botão verde |
| Verde / Branco | 1.5:1 | ⛔ | nunca verde como texto sobre branco |
Regra: verde é acento e superfície, não corpo de texto.
Tipografia
Duas famílias, ambas geométricas e ótimas para UX/UI.
Títulos, chamadas, UI, números. Pesos 400–800.
Texto corrido, legendas, subtítulos. Pesos 400–700.
Escala
Fontes na plataforma — fora da marca *
A plataforma hoje não usa Poppins. Registrado como estado atual; o alvo é migrar.
| Família | Onde é usada | Status |
|---|---|---|
| Inter | corpo, tabelas | * fora da marca |
| Archivo | page-title-logo (800) | * fora da marca |
| DM Sans | login, onboarding | * fora da marca |
| Open Sans | labels, checkbox | * fora da marca |
| Montserrat | declarada no index.html | ✔ secundária da marca |
Ícones
Estilo outline, com um canto externo arredondado em 15px, inspirado no ícone da marca.
Assinatura de canto
Um dos cantos externos sempre arredondado (raio 15px) — a mesma geometria do “L”.
Cor por vertical
Ícones neutros ganham detalhe na cor da marca em uso: verde (Cognito), cyan (Growth Finance), roxo (BPO), amarelo (PerpetuUM).
Categorias: negócios · inovação · financeiro · investimentos · pessoas.
Conexões
O grafismo assinatura: linhas fluidas que se curvam e se ligam, remetendo à conexão entre pontos — o DNA da marca.
Uso
Inteiro (fundo de imagem) ou desmembrado (cantos, faixas). Cada marca aplica sua cor; Cognito = verde, degradê para cyan permitido.
Regra
Grafismos acompanham a peça, mas nunca são atrelados ao logo.
Backgrounds de marca
Cenas navy com o grafismo “Conexões” + torres do ícone. Usadas no login e na rota /dashboard/mcp. Há 8 variações de hero + um footer.
Padrão do login — hero-background.png
/dashboard/mcp — hero-background8.png
Galeria completa
Sobre imagem, aplique o degradê navy em blend/multiply para leitura do texto (ver Diretrizes).
Avatar do Cog AI
O avatar do assistente Cog AI — usado no chat de IA da plataforma (/assets/images/cog.svg).
Sobre navy
Sobre claro
O que é
Mascote/persona do assistente de IA. Distinto do logo institucional — use só como avatar do Cog AI, não como marca Cognito.
Cog AI — animado SMIL
Variações animadas em SVG puro (SMIL nativo, sem JS/CSS), com flutuação, piscada, tilt de cabeça e pulso no peito. Sempre respeitando prefers-reduced-motion.
Na interface
Como os tokens se materializam na plataforma (Angular 21 + PrimeNG 21).
| Papel na UI | Token | Valor |
|---|---|---|
| Ação primária / seleção / sucesso | --cog-green | #00e220 |
| Fundo de marca / header | --cog-navy | #000a28 |
| Texto sobre escuro | offwhite | #e6efff |
| Foco de input * | --cog-focus | #4c81f5 |
| Raio de card/botão | --cog-radius-brand | 15px |
Convergência (dívida de marca)
- Introduzir Poppins + padronizar Montserrat; aposentar Archivo/DM Sans/Open Sans.
- Cyan do loader
#00c5fc→#21b5ea. - Superfícies de marca em navy
#000a28(não#21272a). - Preencher
site.webmanifest(name + theme_color#000a28). - Documentar/aliasar o typo
--color-brand-pimary.
Nenhum item é bloqueante — melhorias incrementais de fidelidade.
Do & Don't
❌ Não fazer (manual p.41)
1. Alterar a tipografia do logo.
2. Rotacionar ou distorcer.
3. Adicionar outras cores.
4. Aplicar efeitos (exceto o glow do wordmark animado).
5. Abreviar o nome.
6. Modificar o ícone.
7. Atrelar grafismos ao logo.
8. Alterar a grafia do nome.
✅ Fazer
Usar os arquivos oficiais em assets/.
Escolher positivo/negativo por contraste.
Respeitar área de proteção e redução mínima.
Verde como acento; navy como base.
Texto: branco/off-white no escuro, navy no claro.
Sistema multimarca
Legatus é a marca-mãe; cada produto herda o sistema e muda o acento.
DESIGN.md
Carregando o guia…