Brandbook oficial
A identidade da Cognity, em um só lugar.
Posicionamento, tom de voz, paleta, tipografia e logotipo — a fonte de verdade da marca, pronta para humanos e para outras IAs consumirem.
Posicionamento e propósito
A Cognity leva a tecnologia das grandes para o tamanho de cada negócio — combinando IA, automação e desenvolvimento sob medida para que empresas de todos os tamanhos cresçam com tecnologia de ponta, sem amarras.
Tagline
IA nativa em tudo que move o seu negócio
Assinatura de posicionamento
A tecnologia das grandes, no tamanho do seu negócio
Promessa de resultado
Mais inteligência e resultado para o seu negócio
Promessa de marca
IA nativa em cada solução, aplicada com método e medida pelo resultado do seu negócio.
Mantra interno
"Tecnologia é meio. O resultado é o fim."
Público
Pequena e média empresa — quem não tem time de TI próprio mas precisa competir com quem tem. Turismo, hospitalidade e serviços; remoto em todo o Brasil.
IA + pessoas
A IA cuida do repetitivo; o time cuida do que exige julgamento. Uma complementa a outra — sem substituir pessoas.
Missão
Impulsionar empresas através de tecnologia, combinando inteligência artificial e humana para criar soluções que geram resultados reais.
Visão
Ser referência em soluções tecnológicas de alto impacto, reconhecidos pela qualidade técnica, inovação constante e pelo crescimento que proporcionamos aos clientes.
Valores
Diferenciais competitivos
| Pilar | Como a Cognity se diferencia |
|---|
Provas, não adjetivos
A marca prefere mostrar resultado a se elogiar. Não implementamos IA por modismo — toda solução termina no número do cliente.
O que somos — e o que não somos
✓ O que somos
✕ O que NÃO somos
Tom de voz
A Cognity fala como um engenheiro sênior que também sabe vender valor: profundo tecnicamente, mas direto e acessível. Não palestra; explica. Não promete milagre; mostra resultado.
Padrões de copy — a assinatura verbal
Toda boa headline Cognity usa um destes. Se a frase poderia estar no site de qualquer agência de TI, está fraca — reescreva com um padrão abaixo.
Eixos de personalidade
| Eixo | Posição da marca |
|---|
Princípios de escrita
CTAs canônicos
Use este vocabulário
Evite / banidos
Logotipo
A marca é uma árvore de circuitos — raízes e galhos com nós conectados em gradient turquesa→verde, evocando neurônios, sinapses e crescimento orgânico-tecnológico. Símbolo de inteligência enraizada que cresce. O wordmark "cognity" é tipografado em Outfit Bold, vetorizado em outlines (sem dependência de fonte).
Área de proteção
Equivalente à largura de 1 ramo central em todos os lados. Nenhum elemento invade essa zona.
Tamanho mínimo
80px (digital) para o logo full; 24px para o mark isolado. Abaixo disso, use só o mark.
Sobre fundos
Fundo claro → full color. Fundo escuro → mono branca. Fundo brand → mono branca ou preta (alto contraste).
✕ Nunca faça
- Distorcer, esticar ou rotacionar
- Aplicar sombra ou contorno
- Recortar partes do mark
- Trocar cores fora da paleta
- Sobrepor a foto sem máscara
Cores
Paleta Turquesa Meia-Noite: o verde turquesa (#06c896) é marca e acento — crescimento, inteligência, tecnologia limpa; o petróleo (#0b3b3a) é a base madura que dá autoridade e premium. Sem azul-frio, sem hype. Clique em qualquer cor para copiar o HEX.
Brand — turquesa (principal)
brand-500 (#06c896) é a primária em fills/CTA. Para texto e links use brand-800 (#096f55, AA); brand-700 só em texto grande. O turquesa vivo não passa contraste como texto. brand-600 é o hover.
Petróleo — base escura (secundária)
Fundo de hero/deck/header, blocos escuros e seções de destaque. petroleo-900 (#0b3b3a) é o tom-âncora.
Accent — verde-menta
Neutros
Semânticas (feedback de sistema)
Sucesso, atenção, erro e informação — calibradas para não competir com a marca.
Gradientes
Assinatura (turquesa → petróleo): hero, capas, banners. Nunca em texto.
Realce claro (turquesa → menta): texto em gradiente sobre escuro, botões, destaques.
Tipografia
Dois papéis: fonte de marca (Outfit, nos títulos — a mesma do logotipo, carrega a identidade) e fonte de UI (Inter, no corpo/texto — neutra e legível). Mais JetBrains Mono em código. Hierarquia explícita abaixo. Comparador de fontes →
Outfit — fonte de marca
Títulos H1/H2 e logotipo. Geométrica, arredondada, ownable. Pesos 600/700/800, tracking negativo.
Inter — fonte de UI
Corpo, UI e subtítulos (H3↓). Neutra, legível, WCAG. Pesos 400–700.
Outfit — pesos (marca)
Inter — pesos (UI)
Iconografia
Phosphor Icons — linha com cantos arredondados que rimam com o radius 16px e o calor humano da marca. 6 pesos (thin→fill) + duotone na paleta para destaques.
Conjunto principal (peso regular)
Duotone em destaque
Duotone usa turquesa sobre tom translúcido — só em hero icons e destaques.
Família
Phosphor Icons (ph: no Iconify) — linha, peso regular.
Tamanhos
16, 20, 24 e 32px. Alinhados à grade tipográfica.
Cor
currentColor por padrão; brand-800 quando isolado em texto.
Um peso por contexto
Regular na UI; bold/duotone só em destaque. Não misturar com Lucide/Material/Font Awesome.
Fotografia & ilustração
Mostramos o trabalho acontecendo e o resultado aparecendo — não a tecnologia se exibindo. Humano no foco, a IA no contexto (sempre funcional: um painel, uma conversa de WhatsApp, um número subindo), o resultado na legenda.
Real antes de abstrato
A imagem prova o antes→depois, não decora. Quando a IA aparece, é funcional — uma tela, um fluxo, um número — nunca espetáculo.
Sóbria e com respiro
Paleta neutra, luz natural, espaço em branco generoso. Sem brilho, sem 3D, sem cyber — "open-source visualmente".
Calor humano, não hype
Pessoas em problemas reais de PME — o balcão cheio, o WhatsApp lotado — não o "time sorrindo para o laptop".
✓ Fotografia
Cenas reais da PME brasileira — dono de pequeno negócio, equipe de turismo/hospitalidade, atendente no balcão; mãos em ação, olhar para a tarefa.
- Luz natural quente-neutra (4800–5600K); foto dessaturada −10/−20% para não competir com o turquesa.
- Regra dos terços com o terço oposto livre para texto; respiro ≥8% nas bordas.
- Toda foto recebe scrim petróleo #0b3b3a; turquesa só de acento. O regional é contexto (a luz, a janela), nunca cartão-postal.
✕ Evite
"Diversity team smiling at laptop", handshake corporativo, headset de call center, pose para a câmera; azul-frio cibernético, flash duro, HDR estourado; escritório genérico que serviria para qualquer empresa de TI; cartão-postal de drone.
✓ Ilustração — sistema "nó-e-conexão"
Flat com uma sombra suave, raio 16px, só tokens da paleta. A linguagem deriva do logo (árvore de circuitos): nós ligados por linhas finas que crescem de baixo para cima. Preferir representações funcionais — UI mockup, fluxo/pipeline, diagrama, KPI subindo. Ícone-herói em Phosphor duotone.
✕ Clichês de IA
Cérebro-circuito, hexágonos, redes neurais simbólicas, robôs antropomórficos, mão robótica tocando interface; glow/neon/3D; cor fora da paleta.
Foto curada vira foto-da-marca pelo tratamento: dessaturar, aplicar o scrim petróleo e a logo mono-branca. À esquerda, o resultado; ao lado, como ler a peça.
O que faz a foto virar Cognity
- Scrim petróleo #0b3b3a de baixo para cima — nunca slate-azul cyber.
- Texto em branco; resultado concreto ("8h → 8min"), não a ferramenta.
- Logo mono-branca em região escura, dentro da área segura.
- Contraste ≥4.5:1 medido contra a faixa real sob o texto.
Banco de referência aprovado — luz natural, PME real, espaço para texto, sem clichê:
Fotos: Unsplash — curadoria Cognity contra o checklist de imagem. Créditos e licença em /assets/photos/credits.json.
Antes de publicar (régua do Brand Guardian)
- Humano no foco, tecnologia no contexto?
- Cobrindo o logo, ainda parece Cognity? Se serve pro concorrente, reprova.
- Scrim petróleo aplicado (não slate, não cyber)?
- Comunica resultado, não a ferramenta?
- Sem clichê da lista banida? Licença comercial + crédito registrado?
Régua técnica completa
Composição, iluminação, tratamento de cor, overlays, fundo claro, sourcing, acessibilidade e o checklist de 14 itens vivem na camada de máquina, consumida pelos agentes que produzem as peças:
/brand.json → imagery.
Layout e composição
Uma peça Cognity prova uma coisa — o layout serve à prova, não à decoração. Composição contida e centrada (cabe na área de segurança, nunca se corta no feed), fundo claro com turquesa só de acento, o número/transformação como herói. O branco não é luxo: é o que sobra quando se corta o que não prova.
Área de segurança essencial
A grade do perfil do Instagram corta as bordas, e a UI do app cobre topo e base no story. Todo conteúdo essencial — texto, números, logo, CTA — vive dentro da caixa segura de cada formato. Nada encosta na borda.
| Formato | Canvas | Caixa segura (x · y) | Reservas de UI |
|---|---|---|---|
| Feed | 1080×1080 | x 135–945 · y 135–945 | margem de 135px (12,5%) por lado |
| Retrato | 1080×1350 | x 135–945 · y 120–1230 | o essencial sobrevive ao crop quadrado do grid (y 135–1215) |
| Story / Reels | 1080×1920 | x 80–1000 · y 250–1580 | topo 250px (perfil), base 340px (CTA/legenda), coluna de ícones à direita ~120px |
Fundo e cor na composição
A assinatura cromática da Cognity é uma escolha contra a categoria: enquanto o mercado de IA satura em fundo escuro e neon, a Cognity respira em claro.
✓ Faça
- Fundo claro por padrão — branco
#ffffffou surface#f6faf9. - Turquesa
#06c896só como acento (marca, um dado, um traço) — até ~20% da área. - Texto verde apenas em brand-800
#096f55(único que passa AA, 6.1:1 sobre branco). - Texto sobre foto: scrim
rgba(11,59,58,.55)até atingir contraste ≥ 4.5:1.
✕ Evite
- Fundo turquesa chapado na tela inteira (exceção: peça hero/lançamento marcada).
- Turquesa-500
#06c896como texto sobre branco — reprova em contraste. - Texto sobre foto sem overlay.
- Verde antigo
#04e3a0— o token oficial é#06c896.
Uma ideia por peça
Tradução visual de “provas, não adjetivos”: cada peça carrega uma ideia e uma prova — de preferência um número (“De 8h para 8min”). Não se empilham cinco features; mostra-se uma transformação.
- O texto ocupa no máximo ~70% da caixa segura; o resto é respiro.
- Hierarquia por tamanho e peso, nunca por efeito.
- Feed: 1 bloco-herói + 1 apoio. Story: título ≤3 linhas + corpo ≤6 linhas, dentro de y 250–1580.
Fundamentos técnicos
Grade
Web/deck: 12 colunas — gutter 24px desktop / 16px mobile. Social: 12 colunas não se aplica a canvas fixo; use margem de segurança (135/80px) + baseline de 8px.
Escala de espaçamento (8pt)
Todo espaçamento é múltiplo de 8px (4px só em ajuste óptico). Gap entre blocos 48; padding de card 32; seção web 96–128.
Contêiner & medida
Web/blog: max-width ~1180px, corpo 60–68 caracteres por linha. Social: a medida é a caixa segura (810px) ÷ tamanho da fonte.
Cantos & elevação
radius 8px (pequenos) · 16px (cards/botões) · 24px (heróis 1080). Sombra só em elevação real; em peça estática, só como scrim — nunca decorativa.
Múltiplos de 8 (4px só em ajuste óptico). 48 = gap entre blocos · 32 = padding de card · 96–128 = padding de seção (web).
Composição por canal
| Canal | Alinhamento | Tipografia | Lockup do logo |
|---|---|---|---|
| Feed 1080×1080 | centralizado (x=540) | herói 64–72px · corpo 36–42px · handle ≥28px | rodapé central, 180–220px |
| Retrato 1080×1350 | central; carrossel interno pode ser à esquerda (margem 135) | título 56–64px · corpo 36px | rodapé central, y≈1180 |
| Story / Reels 1080×1920 | centralizado | herói 72–80px · corpo 42px | rodapé central acima de y≈1500 |
| Web / deck | à esquerda, no grid de 12 colunas | escala fluida (clamp); corpo 17px / 1.65 | header / canto, conforme o layout |
Texto mínimo legível no feed: 28px (handle/índice). Corpo nunca < 32px. Letter-spacing único -0.02em, alinhado ao wordmark.
Régua de composição
✓ Faça
- Conteúdo essencial dentro da caixa segura do formato.
- Composição centralizada em peça social.
- Marca presente em toda peça — símbolo protagonista + wordmark assinatura.
- Espaçamento em múltiplos de 8px; radius 16px em cards.
- Uma ideia e uma prova por peça.
✕ Evite
- Texto, logo ou CTA encostando/saindo da borda.
- Reduzir a fonte para encaixar mais texto que o formato comporta.
- Alinhamento à esquerda em peça social isolada.
- Sombra decorativa, 3D ou brilho em peça estática.
- Peça sem a marca.
Acessibilidade
Acessibilidade é a prova visual da promessa de democratizar a tecnologia — a peça funciona para todo mundo.
Contraste
Mínimo WCAG AA (AAA em texto principal). Verde só como texto em brand-800 #096f55; turquesa-500 nunca como texto sobre claro. Sobre foto, scrim até ≥ 4.5:1.
Foco & toque
Foco visível outline brand-600, 2px. Alvo de toque ≥ 24px (AA) / 44px (AAA) — vale para áreas de sticker de link/enquete no story.
Estrutura
Hierarquia semântica de headings (H1 único, H2→H3 sem pular), alt em imagens significativas, <label> em formulários.
Movimento
Respeitar prefers-reduced-motion em Reels/animações; sem flash > 3Hz.
Templates de aplicação — Instagram
Biblioteca de aplicação para Instagram, lente "Interface Viva" (v2), em duas famílias. Família UI: a interface da IA é o palco — barra de prompt, chat, cartão de KPI, log de automação, toggle, status do agente, janela "cognity os" como herói da composição. Família Foto (orgânicos): fotografia real de PME ao fundo com véu/scrim petróleo e tipografia grande — curiosidades de IA, glossário, dados, ensaios e reflexões, sem botão, sem CTA e sem handle (post orgânico não é anúncio). Família Região (impulsionáveis): anúncios locais com saudação à cidade/região, proposta pro empresário e CTA — esses, sim, com botão e handle. Posts, carrosséis, stories e capas de Reels agrupados por formato, renderizados dos SVG mestres (1080px nativo) pelo pipeline scripts/render-svg.js; cada prévia traz o uso recomendado. Catálogo e placeholders em catalog.json.
Para IAs & desenvolvedores
Este brandbook é a fonte de verdade legível por máquina. Outras IAs e sistemas de design podem consumir a identidade diretamente, sem ambiguidade.
Consuma a identidade programaticamente
Tokens de cor, tom de voz, regras de logo e tipografia disponíveis em formato estruturado. Importe — não redefina do zero.
Identidade completa em JSON: cores, voz, tipografia, logo, governança.
Resumo conciso da marca, otimizado para contexto de LLMs.
Todos os arquivos de logo (SVG vetorial + PNG).
Cor primária: #06c896 · Petróleo: #0b3b3a · Hover: #04a87d · Fonte de marca/títulos: Outfit · Fonte de UI/texto: Inter · Mono: JetBrains Mono · Ícones: Phosphor · Tagline: IA nativa em tudo que move o seu negócio
Governança
Autoaprovado
Site, produtos próprios, propostas e comunicação interna — dentro deste brandbook.
Precisa de revisão
Cliente usando a marca ("powered by"), imprensa, parceria e mídia paga com criativo customizado.
Ciclo de revisão
Trimestral (90 dias). Próxima revisão: 23/08/2026.
Fonte conceitual: projects/cognity/identity/{brand,voice,visual}.md (Cortex). Tokens técnicos em nexus/apps/cognity/lib/theme. Não duplicar definições — qualquer novo produto Cognity importa estes valores.