FrenteNavy institucional
Versão brancaMarca preferencial em branco aplicada no peito. Símbolo ampliado em azul royal cria assinatura visual marcante na barra inferior.
Brandbook oficialIdentidade Visual
Identidade Visual
Clickideia
Manual oficial com as definições conceituais, estratégicas e as normas que estabelecem os critérios para a aplicação correta da marca em todos os pontos de contato.
01 · Fundamentos da marca
Apresentação, construção e elementos
Tudo o que define a marca Clickideia em uma única navegação: como ela se apresenta, como é construída sobre o grid e quais elementos a compõem.
Marca preferencial · Horizontal
Principal forma de apresentação do logo. Recomenda-se utilizar sempre que possível a versão horizontal.
Marca vertical
Utilizar apenas nos casos onde a área de aplicação seja favorecida pela composição vertical.
A marca incorpora a imagem da instituição, que prima pela democracia do conhecimento, da tecnologia e da cultura, gerindo programas e projetos com organizações públicas e privadas que beneficiam e assistem à comunidade.
A marca institucional consiste na palavra Clickideia em tipografia exclusiva na cor cinza escuro com azul no pingo da letra “i”, acompanhada de um símbolo no formato de balão de fala, com mouse hover e três círculos sobrepostos.
As relações de tamanho e posição entre a palavra Clickideia, o símbolo e a assinatura são fixas e não devem jamais ser alteradas. Para se certificar da apresentação correta, use sempre os arquivos originais fornecidos neste manual.
02 · Marca
Versões da marca
Quatro versões foram criadas prevendo as possíveis aplicações da marca Clickideia. Apenas uma versão deve ser usada em cada peça de comunicação.
AEspecial Colorida
Para a maior parte das aplicações coloridas (tela ou impressão) com fundo branco ou claro.
BEspecial Monocromática
Para aplicações monocromáticas com fundo branco ou claro (preto escala ou Pantone).
CSimplificada Positiva
Para acabamentos impressos especiais como verniz, hot stamping, corte em vinil e relevo seco.
DSimplificada Invertida
Para aplicações monocromáticas ou coloridas com fundo escuro.
04 · Padrão Cromático
Paleta de cores
As cores institucionais foram definidas para garantir consistência e fidelidade em qualquer aplicação. Verifique sempre a fidelidade às cores ao imprimir, comparando com as especificações abaixo.
Paleta Principal
Pantone 113-5 C
Azul ClaroCMYK
C74 M31 Y0 K0
RGB
R57 G145 B207
Pantone 110-16 C
Azul EscuroCMYK
C100 M35 Y0 K36
RGB
R0 G90 B143
Paleta Secundária
Pantone 20-15 C
LaranjaCMYK
C0 M45 Y90 K13
RGB
R220 G143 B32
Pantone 179-9 C
CinzaCMYK
C0 M0 Y0 K60
RGB
R135 G135 B134
Pantone 179-15 C
Cinza EscuroCMYK
C0 M0 Y0 K93
RGB
R51 G51 B50
Cada cor possui variações de opacidade pré-definidas (100%, 80%, 60%, 40% e 20%) para uso em fundos, divisores e estados de interface.
05 · Padrão Tipográfico
Tipografias
A família tipográfica institucional contribui para criar um ambiente de modernidade e alta legibilidade em materiais impressos e digitais.
Impresso · Principal
Aa
Calibri
Light · Light Italic · Regular · Bold · Bold Italic · Italic
Base para textos, títulos e subtítulos em mídia impressa.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890 !"#$%&/()=?*
Baixar fonteabcdefghijklmnopqrstuvwxyz
1234567890 !"#$%&/()=?*
Impresso · Alternativa
Aa
Helvetica Neue LT
Ultra Light · Thin · Light · Roman · Italic · Medium · Bold
Segunda opção de variação para o tipo impresso, segue a mesma lógica da Calibri.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890 !"#$%&/()=?*
Baixar fonteabcdefghijklmnopqrstuvwxyz
1234567890 !"#$%&/()=?*
Digital · Principal
Aa
Open Sans
Regular · Bold
Tipografia base para meios digitais — telas, web e apresentações.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890 !"#$%&/()=?*
Baixar fonteabcdefghijklmnopqrstuvwxyz
1234567890 !"#$%&/()=?*
Escala tipográfica · Digital (Open Sans)
H1 · Título
Democracia do conhecimento
H2 · Subtítulo
Educação que conecta pessoas
H3 · Seção
Manual de identidade visual
Corpo
A marca incorpora a imagem da instituição, que prima pela democracia do conhecimento, da tecnologia e da cultura.
Legenda
USADO EM RODAPÉS E METADADOS
06 · Redes sociais e conteúdo
Aplicação em posts, vídeos e capas
Modelo oficial de post para redes sociais e a paleta usada em peças digitais — separada por papel: marca, ambiente de aplicação e cores auxiliares para gradientes e detalhes.
Exemplo oficial2:3 · 720 × 1080 px
Template-referência para feed e stories. Mantém fundo navy profundo, degradê institucional no topo e pílulas em azul brilhante para títulos.
01 · Marca
Cores de marca
Identidade Clickideia. Use sempre que a marca aparecer em primeiro plano — logos, assinaturas, selos e elementos institucionais.
Azul Clickideia#005A8F
R0 G90 B143
Cor institucional preferencial — assinatura da marca em qualquer peça.
Azul Claro#3394DB
R57 G145 B207
Apoio à marca em destaques, ícones e elementos secundários.
02 · Aplicação
Fundos para redes sociais, vídeos e conteúdo
Base cromática para peças digitais. Usar como fundo principal de posts, capas de vídeo, thumbnails e lives — garante contraste alto e leitura confortável em telas.
Navy Profundo#00113C
R0 G17 B60
Fundo principal de posts, capas de vídeo e thumbnails.
Navy Intermediário#032068
R3 G32 B104
Bases secundárias, headers e blocos de respiro.
Azul Profundo#003B99
R0 G59 B153
Transições entre fundo e elementos de destaque.
03 · Auxiliares
Cores auxiliares e detalhes
Camada de apoio para gradientes do topo, pílulas, tags, ícones e micro-acentos. Nunca substituem a marca — sempre acompanham.
Azul Royal#012B97
R1 G43 B151
Barras gradiente do topo (degradê 1/3).
Azul Vivo#0035BB
R0 G53 B187
Barras gradiente do topo (degradê 2/3).
Azul Brilhante#004ECC
R0 G78 B204
Pílulas, tags e elementos com peso visual.
Ciano Destaque#1B92D1
R27 G146 B209
Detalhes, ícones e micro-acentos sobre fundo escuro.
07 · Aplicações
Vestuário e uniformes
Modelos oficiais de aplicação da marca em camisetas para equipe, ativações e eventos. Use estas referências como ponto de partida para qualquer nova produção de vestuário institucional.
Frente
FrenteBranca
Versão coloridaMarca preferencial colorida sobre fundo branco. Símbolo ampliado em azul institucional ancora a peça e mantém a identidade visível à distância.
FrenteAzul institucional
Versão brancaMarca em branco sobre azul institucional sólido — variação de alto contraste para uniformes de equipe e ativações em feiras.
CostasBranca
Mensagem institucionalFrase manifesto da marca em hierarquia tipográfica clara — destaque em azul Clickideia e continuidade em navy escuro. Selo laranja como assinatura.
Brindes e papelaria
Sacolas, cadernos e canecas
Aplicação da marca em brindes institucionais e ativações de marketing — mantendo padrão gráfico, paleta e mensagem manifesto da Clickideia.
Tote bagSacola institucional
Tote bag em azul institucional com padrão gráfico e frase manifesto em peso bold. Ideal para feiras, eventos e brindes para parceiros.
Caderno + canetaPapelaria de equipe
Caderno azul institucional com padrão gráfico de símbolos e caneta coordenada — kit de boas-vindas para colaboradores e formadores.
CanecaCaneca institucional
Caneca em azul institucional com marca preferencial em branco. Brinde clássico para escritório, parceiros e ativações comerciais.
07 · Reprodução
Downloads & formatos
Variações oficiais disponíveis em preto e branco, nas composições horizontal, vertical e símbolo. Reproduza sempre a partir dos arquivos originais para preservar a integridade da marca.
Preferencial
Versões comemorativas · 25 Anos
Aplicações especiais com o selo de 25 anos e elementos gráficos do balão isolado. Use apenas em peças comemorativas durante o período de celebração.
Elementos gráficos
Balões isolados e barra de cores institucionais para composições, fundos e divisores em peças de comunicação.
Balão · Azul Sólido
Elemento gráfico do balão de fala isolado em azul institucional. Útil para composições e fundos decorativos.
Ícones auxiliares
Conjunto de ícones de apoio em PNG (fundo transparente) e SVG (vetor escalável) para uso em materiais de comunicação.
Formatos de arquivo
A marca está disponível em formatos vetoriais e bitmap, cobrindo tanto produção gráfica profissional quanto aplicações digitais.
AIAdobe Illustrator · vetor editável
CDRCorelDRAW · vetor editável
EPSEncapsulated PostScript · vetor
PDFImpressão profissional
SVGWeb · vetor escalável
PNGFundo transparente · digital
JPGCompatibilidade universal
PSDAdobe Photoshop · camadas