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.
⚠ O manual em PDF é o documento de design original (arquivo pesado) — prefira este brand book e o DESIGN.md no dia a dia; abra o PDF só se for extremamente necessário.
Sistema de logo
Assinatura oficial: Cognito by Legatus. Escolha sempre a versão que oferece o melhor contraste com o fundo.
Í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.
Loader do kit já usa o cyan oficial #21b5ea. * A plataforma (Vault-Frontend) ainda usa #00c5fc — migração pendente.
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, para uso geral: fundos de tela, grafismos, capas, social, cabeçalhos, apresentações. Login e /dashboard/mcp abaixo são só exemplos de aplicação. 8 variações de hero + um footer.
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 |
|---|---|---|
| Botão primário (ação principal) | --cog-btn-primary-bg | #0b1736 · texto branco, ícone verde |
| Acento: ícone do primário, seleção, sucesso, link | --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 |
Botões da plataforma
Padrão do app-button do Vault-Frontend, aprovado em 02/10/2026. Verde não é fundo de botão primário: o primário é navy com texto branco e ícone verde; o verde fica como acento. Um primário por área; o segundo vira white. (Os botões verdes desta página são de comunicação, não de produto.)
#00e220 (padrão antigo, aposentado em 02/10/2026). Legados: darkblue, highlight, green-white, grey.Fonte: Vault-Frontend/src/app/shared/components/button/README.md e src/styles/objects/buttons.scss; variáveis --cog-btn-primary-* em src/styles/styles.scss. Detalhe no DESIGN.md §12.3. Protótipos do acervo: tema cognito, classe cog-btn-primary.
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. Aqui: Legatus e Legatus Growth Finance — ver DESIGN.md §13 para regras completas (área de proteção, redução mínima, do & don't).
Legatus (marca-mãe)
Legatus Growth Finance
Wallpapers de reunião
Um por marca, em duas variações (liso sobre navy / foto de skyline).
DESIGN.md
Carregando o guia…