Visão
Ser referência em inovação e excelência, transformando ideias em soluções que impactam positivamente a vida das pessoas e o futuro dos negócios.
● Guia Oficial da Marca
Brand Book Digital
Guia completo de identidade visual e diretrizes da marca Catenait. Padrões, aplicações e boas práticas para manter a consistência visual.
Role para explorar ↓
01 — Essência
Sobre a Marca
Os pilares que definem quem somos e como nos apresentamos ao mundo.
Missão
Desenvolver produtos e serviços excepcionais que conectam tecnologia e humanidade, criando experiências memoráveis e valor sustentável para nossos clientes e parceiros.
Valores
- Inovação: Buscamos constantemente novas formas de resolver problemas
- Excelência: Comprometimento com a qualidade em tudo que fazemos
- Transparência: Comunicação clara e honesta em todas as relações
- Sustentabilidade: Responsabilidade com o meio ambiente e sociedade
02 — Identidade
Logotipos
O rosto da marca. Cada variação foi pensada para um contexto específico, mantendo a essência e o reconhecimento em qualquer aplicação.
Logotipo em aplicaçãoDefault
SecundárioMono
SímboloÍcone
InvertidoDark
Aplicação em produtoProduto
MinimalFavicon
Versões Oficiais
Principal
Logotipo Default
Versão principal da marca, usada na maioria das aplicações institucionais e digitais.
Uso recomendado: Site institucional, apresentações, documentos oficiais, e-mails, materiais impressos em fundos claros.
Invertido
Logotipo Secundário
Versão invertida para aplicação em fundos escuros ou com alto contraste visual.
Uso recomendado: Fundos escuros, vídeos, peças publicitárias, ambientes com baixa luminosidade e aplicações premium.
Símbolo
Símbolo
Ícone isolado da marca, sem o logotipo. Usado em aplicações reduzidas e de reconhecimento rápido.
Uso recomendado: Favicon, avatar de redes sociais, app icon, watermark, aplicações em tamanhos reduzidos.
Logotipos de Produtos
Versões específicas do logotipo aplicadas aos produtos e serviços da Catenait. Cada produto mantém a coerência com a marca mãe, com adaptações que reforçam sua identidade própria.
01
Produto Alpha
Versão do logotipo para o produto principal da Catenait, com assinatura visual própria.
Produto Principal
02
Produto Beta
Solução secundária com identidade visual alinhada à marca mãe e diferenciação clara.
Solução Digital
03
Produto Gamma
Serviço especializado com aplicação do símbolo Catenait como elemento de endosso.
ConsultoriaBaixar Pacote Completo
Todas as variações em SVG, PNG e PDF — prontos para uso.
03 — Aplicação
Modos de Utilizar o Logotipo
Regras essenciais para manter a integridade visual da marca.
Espaçamento Mínimo
Mantenha sempre uma área de proteção equivalente à altura da letra "C" do logotipo.
Tamanho Mínimo
O logotipo não deve ser reproduzido em tamanhos menores que 32px para manter a legibilidade.
32px · 48px · 64px
Aplicação em Fundos
Use sempre a versão apropriada do logotipo para garantir contraste adequado.
04 — Cores
Paleta de Cores
Sistema completo de cores com códigos HEX e CMYK. Clique em qualquer cor para copiar o HEX, ou use os mini botões para copiar HEX ou CMYK separadamente.
Laranja Catenait — cor principal da marca
O200
#FFC98F
0, 21, 44, 0
O300
#FFAD57
0, 32, 66, 0
O400
#FF8F2A
0, 44, 84, 0
O500 · Base
#FC7301
0, 54, 100, 1
O600
#D66200
0, 54, 100, 16
O700
#A84D00
0, 54, 100, 34
O800
#7A3800
0, 54, 100, 52
Neutro Catenait — escala do branco até a cor base
Escala de neutros partindo do branco puro até o tom base da marca. Ideal para backgrounds, textos e elementos de interface.
G50 · Branco
#FFFFFF
0, 0, 0, 0
G100
#E8E8E8
0, 0, 0, 9
G200
#C2C2C2
0, 0, 0, 24
G500 · Base
#1A1A1A
0, 0, 0, 90
G300
#969696
0, 0, 0, 41
G400
#6B6B6B
0, 0, 0, 58
G450
#4A4A4A
0, 0, 0, 71
Cores Secundárias — semânticas de interface
Cores com função comunicativa clara. Devem ser usadas apenas em seus contextos específicos para manter consistência semântica.
!
Erro
#DC2626
10, 90, 85, 0
Falhas, ações destrutivas, validações inválidas e alertas críticos.
✓
Sucesso
#16A34A
75, 0, 70, 0
Confirmações, conclusões, estados positivos e ações bem-sucedidas.
⚠
Alerta
#EAB308
0, 25, 95, 0
Avisos, atenção, pendências e situações que requerem revisão.
i
Informação
#2563EB
85, 60, 0, 0
Mensagens informativas, dicas, links e elementos auxiliares.
Cores Terciárias & Especiais — harmonias que conversam com o laranja
Paleta complementar para ilustrações, gradientes, destaques criativos e aplicações especiais.
Azul Profundo
#1E3A8A
95, 75, 0, 30
Contraste complementar ao laranja
Azul Petróleo
#0D9488
85, 0, 30, 35
Equilíbrio fresco e moderno
Roxo Profundo
#6D28D9
65, 85, 0, 0
Criatividade e sofisticação
Rosa Vibrante
#E11D48
0, 90, 55, 0
Energia análoga ao laranja
Verde Oliva
#65A30D
50, 0, 95, 20
Natureza e sustentabilidade
Índigo
#4338CA
80, 75, 0, 5
Profundidade tecnológica
Coral Suave
#FB7185
0, 60, 30, 0
Transição análoga acolhedora
Mostarda
#CA8A04
0, 40, 95, 10
Análogo terroso e quente
Turquesa
#06B6D4
80, 0, 20, 5
Frescor digital e inovação
Vinho
#881337
15, 100, 50, 40
Sofisticação e autoridade
✅ Diretrizes de Uso
- Use o Laranja O500 (#fc7301) como cor principal em CTAs e destaques
- Use o Neutro G500 (#1a1a1a) para textos principais e fundos escuros
- Reserve as cores secundárias para seus contextos semânticos específicos
- Use as terciárias em ilustrações, gradientes e aplicações especiais
- Mantenha sempre contraste adequado para acessibilidade (WCAG AA)
- Em impressão, use os valores CMYK para fidelidade de cor
❌ O que Não Fazer
- Não altere os valores das cores ou crie variações não aprovadas
- Não use cores com contraste insuficiente para textos
- Não misture cores primárias com tons fora da paleta oficial
- Não aplique filtros ou efeitos que alterem as cores originais
- Não use cores semânticas fora de seu contexto
- Não converta CMYK para RGB manualmente — use os valores oficiais
05 — Tipografia
Tipografia
As fontes oficiais que dão voz visual à marca. Cada uma com seu papel dentro do sistema.
Utilizada em títulos, destaques e elementos de impacto visual. Traz personalidade geométrica e contemporânea à marca.
Maiúsculas
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Minúsculas & Números
abcdefghijklmnopqrstuvwxyz 0123456789
Light300
Regular400
Medium500
SemiBold600
Bold700
Baixar Fonte
Aplicada em textos corridos, interfaces e elementos de leitura. Oferece clareza, neutralidade e excelente legibilidade em qualquer tamanho.
Maiúsculas
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Minúsculas & Números
abcdefghijklmnopqrstuvwxyz 0123456789
Light300
Regular400
Medium500
SemiBold600
Bold700
Baixar Fonte
06 — Ícones
Sistema de Ícones
Nossa biblioteca oficial de ícones, baseada no Remix Icons no estilo Linear. Leveza, clareza e consistência em cada traço.
Por que Remix Icons?
Na Catenait, escolhemos o Remix Icons como biblioteca oficial por seu equilíbrio entre leveza visual e expressividade. O estilo Linear — com traços finos de 1.5px e cantos arredondados — conversa perfeitamente com a nossa identidade: moderna, humana e tecnológica.
Os ícones são open source, escaláveis e consistentes em qualquer tamanho. Mais de 7.000 ícones disponíveis em 6 estilos diferentes, mas na Catenait adotamos exclusivamente o estilo Linear para manter a coerência visual em todos os produtos.
Use ícones para comunicar ações, navegação, status e conceitos. Eles complementam o texto, nunca o substituem quando o contexto é complexo.
Biblioteca Oficial
Remix Icons
Acesse a biblioteca completa com mais de 7.000 ícones no estilo Linear. Filtre por categoria, copie o SVG ou baixe em diferentes formatos.
Tamanhos Oficiais
16 × 16
Texto inline, labels pequenas
20 × 20
Botões, inputs, navegação
24 × 24
Padrão da marca (default)
32 × 32
Cards, destaques, seções
48 × 48
Hero, ilustrações, empty states
Como usar
- Use exclusivamente o estilo Line do Remix Icon
- Ajuste o tamanho via CSS utilizando as dimensões padronizadas
- Use currentColor para herdar a cor do contexto
- Respeite os tamanhos oficiais: 16, 20, 24, 32 ou 48px
- Centralize ícones verticalmente com o texto
- Use ícones para reforçar ações, não para substituir rótulos
- Mantenha padding mínimo de 4px ao redor do ícone
O que evitar
- Não misture estilos (Line + Fill) na mesma interface sem padronização
- Não altere a proporção ou geometria original do ícone
- Não rotacione ou distorça os ícones
- Não aplique sombras, gradientes ou efeitos visuais desnecessários
- Não use ícones em tamanhos fora do padrão (ex: 18px)
- Não use ícones sem contexto — sempre com label quando necessário
- Não combine ícones de bibliotecas diferentes no mesmo produto
07 — Voz
Tom de Voz
Como a Catenait fala, se comunica e se conecta com as pessoas. Nossa voz é o reflexo de quem somos.
Nosso Manifesto
Na Catenait, acreditamos que a tecnologia só faz sentido quando aproxima pessoas de possibilidades.
Não falamos em códigos — falamos em conexões.
Não entregamos sistemas — entregamos transformações.
Não vendemos consultoria — construímos jornadas.
Somos a ponte entre o que é possível e o que é significativo. Entre o dado frio e a decisão humana. Entre o desafio complexo e a solução que cabe no mundo real.
Nossa voz é clara, porque acreditamos na transparência.
Nossa escuta é atenta, porque respeitamos quem está do outro lado.
Nossa presença é firme, porque sabemos onde queremos chegar.
Por trás de cada pixel, cada linha de código, cada estratégia, existe uma pessoa.
E é para ela que trabalhamos.
Catenait. Onde tecnologia encontra humanidade.
Pilares da Nossa Voz
01
Humana & Próxima
Falamos como pessoas, não como máquinas. Nosso tom é acessível, empático e acolhedor — mesmo quando o assunto é complexo.
02
Clara & Direta
Traduzimos o técnico em tangível. Sem rodeios, sem jargões desnecessários. Cada palavra tem propósito e cada frase gera entendimento.
03
Confiante & Segura
Transmitimos segurança sem arrogância. Sabemos o que fazemos e isso se sente na forma como nos comunicamos — firme, mas nunca impositiva.
04
Inspiradora & Visionária
Mostramos o futuro sem perder o presente. Nossa comunicação inspira ação e aponta possibilidades, sempre conectada à realidade do cliente.
05
Transparente & Honesta
Somos claros sobre o que podemos entregar. Não prometemos o impossível — construímos o possível com excelência e verdade.
06
Criativa & Autêntica
Fugimos do óbvio corporativo. Buscamos metáforas, narrativas e formas únicas de contar histórias que conectem tecnologia e emoção.
Como Falamos vs. Como Não Falamos
Assim nós falamos
- "Vamos transformar esse desafio em oportunidade juntos."
- "Tecnologia que faz sentido para o seu negócio — e para as pessoas que estão nele."
- "Conectamos estratégia, dados e pessoas para gerar resultados reais."
- "Aqui, cada projeto começa com uma escuta atenta."
- "Simplificamos o complexo para você decidir com confiança."
- "Somos parceiros de jornada, não fornecedores de solução."
- "Inovação com propósito — porque tecnologia sem gente não vai a lugar nenhum."
Evitamos falar assim
- "Somos líderes disruptivos em sinergia de mercado B2B."
- "Solução robusta de ponta com arquitetura enterprise escalável."
- "Oferecemos o melhor serviço do segmento com excelência incomparável."
- "Nossa expertise é inigualável no ecossistema digital."
- "Implementamos metodologias ágeis de transformação digital."
- "Somos a escolha número um para empresas que buscam inovação."
- "Tecnologia de última geração para alavancar seu ROI."
08 — Restrições
Usos Incorretos da Marca
Evite estes erros para preservar a integridade e o reconhecimento da marca.
Distorção de Proporções
Nunca estique ou comprima o logotipo. Mantenha sempre as proporções originais.
Alteração de Cores
Não altere as cores do logotipo. Use apenas as cores aprovadas da paleta oficial.
Baixo Contraste
Evite aplicar o logotipo em fundos que não ofereçam contraste suficiente.
Adição de Elementos
Não adicione contornos, sombras ou outros elementos gráficos ao logotipo.
Rotação Incorreta
O logotipo deve sempre ser aplicado na posição horizontal correta.
Tamanho Muito Pequeno
Não use o logotipo em tamanhos menores que 32px para manter a legibilidade.