Manual de aplicação
do logotipo

02 · Cores oficiais & tipografia

Cores Colibri (parceria oficial)

Tipografia oficial

03 · Selo Revenda Oficial Colibri

Duas versões do selo

Selo Light (fundo claro)

selo-revenda-colibri-light.png

Texto navy + Colibri color. Use em propostas, documentos, capas brancas.

Selo Dark (fundo escuro)

selo-revenda-colibri-dark.png

Texto branco + Colibri branco. Use em footers escuros, banners, capas dark.

Onde aplicar o selo

• Assinatura de e-mail — abaixo dos dados de contato (gera autoridade automática a cada e-mail enviado)
• Capa de proposta comercial — no footer ou ao lado da identificação do cliente
• Capa de ordem de serviço, contrato, fatura — no rodapé do documento
• Footer do site — já aplicado (junto à descrição da empresa)
• Banner LinkedIn — opcional, lado direito
• Apresentações comerciais — primeiro slide ou rodapé padrão
• Cartão de visita — verso ou lateral

Construção do selo

O selo é um lockup horizontal com três elementos separados por divisores verticais:

FTM Sistemas Revenda Oficial

1. Identificação ("FTM Sistemas — REVENDA OFICIAL") · 2. Divisor vertical 1px · 3. Logo Colibri horizontal. Mantenha proporções e espaçamentos do arquivo PNG oficial.

Não faça isso

Não traduza, abrevie ou reordene. Não use só o "Colibri" sem o "Revenda Oficial". Não combine com outros selos no mesmo bloco.

04 · Ícone & favicon

Ícone color

logo-ftm-icon.svg

Ícone branco c/ laranja

logo-ftm-icon-white.svg

Ícone preto

logo-ftm-icon-black.svg

Aplicação: Favicon (tab do navegador)

Browser tab

FTM Sistemas

🔒 ftmsistemas.com.br

iOS home screen

App

FTM

App

App

Arquivos de favicon

favicon.svg

Vetorial · navy + ícone branco

favicon-32.png

32×32 · fallback

apple-touch-icon.png

180×180 · iOS home

<!-- HTML head -->
<link rel="icon" type="image/svg+xml" href="/imgs/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/imgs/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/imgs/apple-touch-icon.png">

05 · Avatar redes sociais & WhatsApp

Avatar Dark (recomendado)

logo-ftm-avatar-dark@1080.png

1080×1080 · navy bg · WhatsApp, Instagram, Facebook, LinkedIn, X.

Avatar Light (alternativo)

logo-ftm-avatar-light@1080.png

1080×1080 · branco · só quando a plataforma exigir fundo claro.

Aplicações reais

Tamanhos exibidos por plataforma

Suba sempre o arquivo 1080×1080 — as plataformas redimensionam automaticamente.

06 · Compartilhamento de link

og-home.jpg · 1200×630

Logo branco + tagline + barra laranja na base. Fundo navy garante contraste em qualquer feed.

Mockup: link compartilhado no WhatsApp

Tags HTML necessárias

<meta property="og:title" content="FTM Sistemas | Tecnologia para Food Service">
<meta property="og:description" content="Soluções em PDV, Totem, Tablet, Delivery e KDS...">
<meta property="og:image" content="https://ftmsistemas.com.br/imgs/og-home.jpg">
<meta property="og:url" content="https://ftmsistemas.com.br/">

07 · Capa LinkedIn

Mockup: página da empresa

Arquivo

banner-linkedin@1584.png · 1584×396

Use também como banner da página de empresa no Facebook (cropa automaticamente).

08 · Assinatura de e-mail

Versão estática (PNG)

email-signature@600.png · 600×200

Imagem fixa pra clientes de e-mail que não suportam HTML rico.

Mockup: e-mail enviado pra cliente

Gmail / Outlook — corpo da mensagem

De: Alexandre Mota <alexandre@ftmsistemas.com.br>

Para: cliente@exemplo.com.br

Assunto: Proposta de implantação · Sistema Colibri

Olá, segue em anexo a proposta detalhada para implantação do sistema de PDV nas suas unidades. Qualquer dúvida estou à disposição.

Abraço,
Alexandre

Template HTML personalizável

<table cellpadding="0" cellspacing="0" style="font-family:Arial,sans-serif">
  <tr><td><img src="https://ftmsistemas.com.br/imgs/email-signature@600.png" width="520"></td></tr>
</table>
<!-- Versão completa em /imgs/email-signature.html -->

09 · Aplicação em proposta comercial

Mockup: capa de proposta A4

Anatomia da capa

1. Barra superior — gradiente FTM Orange → Navy (6px), reforça identidade
2. Logo FTM color, canto superior esquerdo (130px largura)
3. Numeração do documento alinhada à direita (pequena, em caps)
4. Kicker laranja indicando categoria do doc ("Implantação · Sistema Colibri")
5. Título principal Inter ExtraBold 30pt, max 2 linhas
6. Lead descritivo curto, max 90% da coluna
7. Grid de metadados — Cliente · CNPJ · Data · Validade
8. Footer com selo Colibri + identificação FTM (gera autoridade)

Onde mais aplicar (mesmo padrão)

Ordem de Serviço

Selo no rodapé, abaixo da assinatura técnica.

Contrato

Última página, próximo aos campos de assinatura.

Fatura / Recibo

Footer fixo do documento.

Dica: o módulo de documentos KITEBIZ (renderer universal) já tem o selo Colibri pré-aplicado no footer dos templates institucionais — basta gerar o doc.

10 · Cartão de visita

Frente — identificação pessoal

cartao-visita-frente.png · 1063×591 (90×50mm @ 300dpi)

Logo FTM canto superior esquerdo · acento laranja superior direito · nome em destaque · cargo em caps · contato com marcadores laranja.

Verso — institucional

cartao-visita-verso.png · 1063×591

Fundo navy + barra superior gradient laranja → navy · logo branco centralizado · selo Revenda Oficial Colibri abaixo. Reforça parceria institucional.

Especificações de impressão

11 · Posts Instagram

Feed quadrado · 1080×1080

post-instagram-cta.png

Modelo CTA: kicker laranja + título grande + lead descritivo + selo Colibri no rodapé.

Story · 1080×1920

post-instagram-story.png

Logo no topo + badge laranja "Novidade" + título 110px + selo + CTA "arraste pra cima".

Anatomia do post de feed

• Top mark: "FTM SISTEMAS" em caps + barra laranja de 3px (identidade imediata, mesmo sem ler o conteúdo)
• Kicker laranja: categoria/contexto do post (ex: "Sistema Colibri · Implantação completa")
• Título grande: Inter ExtraBold 84px, máximo 2-3 linhas, frase direta
• Lead: argumento/benefício em 1-2 frases (32px regular)
• Footer: logo FTM à esquerda + selo Colibri à direita

Conteúdos sugeridos por categoria

Stories: use o template story.png como base. Substitua "Novidade" e título conforme conteúdo. Mantenha o selo Colibri sempre visível pra reforçar autoridade.

12 · Posts LinkedIn

Modelo educacional · "Guia rápido"

post-linkedin-educational.png · 1200×628

Coluna esquerda: kicker laranja + título grande + assinatura FTM/Colibri. Coluna direita: card cinza com lista numerada (até 5 itens). Barra laranja vertical à esquerda (8px) reforça identidade.

Anatomia

• Barra laranja vertical: identidade imediata mesmo no thumbnail
• Kicker: categoria do post ("Guia Rápido · Food Service", "Análise de Mercado")
• Título 48px ExtraBold: pergunta ou afirmação direta
• Card lista: 5 itens numerados em pílulas navy (escaneabilidade)
• Footer com logo FTM + selo Colibri: assinatura institucional

Tipos de post que funcionam no LinkedIn

Dica: LinkedIn premia conteúdo que educa (vs. vende). Posts em formato lista geram 2-3× mais engajamento que posts genéricos. Use o template como ponto de partida e troque os 5 itens conforme o assunto.

13 · Fundo Google Meet / Zoom

Versão Dark (recomendada)

meet-background-dark.png · 1920×1080

Gradiente navy + watermark FTM lateral · logo no canto superior esquerdo · selo Colibri em badge translúcida no canto inferior direito. Não compete com a face em câmera (boa iluminação).

Versão Light (alternativa)

meet-background-light.png · 1920×1080

Versão branca para ambientes muito iluminados ou contraste com pessoa de pele clara. Mesmo layout, paleta clara.

Como aplicar no Google Meet

1. Numa videochamada, clique em ⋮ (três pontos) → Aplicar efeitos visuais
2. Em "Planos de fundo", clique em + Adicionar
3. Selecione o arquivo meet-background-dark.png (ou light)
4. O fundo é aplicado automaticamente em todas as próximas reuniões

Como aplicar no Zoom

1. Configurações → Pano de fundo e efeitos
2. Em "Planos de fundo virtuais", clique em + → Adicionar imagem
3. Selecione meet-background-dark.png

Por que zonas seguras? Em videochamadas, sua face/torso ocupa o centro da câmera. Logo no centro fica atrás de você (invisível) ou flutuando estranho na cabeça. Cantos = visibilidade garantida em qualquer enquadramento.

14 · Intro animado para vídeos

Preview da animação

Coreografia

1. 0.2s — F entra deslizando da esquerda
2. 0.4s — T cai do topo com bounce
3. 0.6s — M entra deslizando da direita
4. 0.95s — Triângulo laranja "cresce" da base do M
5. 1.45s — Triângulo aterriza com mini-bounce
6. 1.7s — Tagline aparece letra por letra
7. 2.6s — Hold (logo estático até 3s)

Onde aplicar

• Início de vídeos institucionais (LinkedIn, YouTube)
• Reels/TikTok como outro (no fim), não intro
• Primeiro slide de apresentação comercial
• Vinheta de fim de vídeos do Instagram

15 · Exemplo de vídeo com intro aplicado

Preview do vídeo completo

Pipeline aplicado nos 10 vídeos institucionais

Vídeo Colibri raw → watermark FTM no canto → intro animada de 3s prependada → encoding H.264 → publicação. Status: 10 vídeos processados (Ecossistema, Quem É Colibri, Tendências, Margem, Colibri Fácil, Totem, 4 Diferenciais, 7 Sistemas, Operação, Abriu um Restaurante).

16 · Regras de uso

✓ FAÇA

Use o logo color em fundo claro.

✗ NÃO FAÇA

Não use logo navy em fundo laranja — sem contraste.

✓ FAÇA

Use a versão branca em fundo navy ou escuro.

✗ NÃO FAÇA

Nunca use o logo color sobre o próprio navy — ilegível.

✓ FAÇA

Mantenha a proporção original do logo (≈ 2.72 : 1).

✗ NÃO FAÇA

Não comprima, estique ou distorça o logo.

✓ FAÇA

Use o selo Colibri completo (texto + logo).

✗ NÃO FAÇA

Nunca use só o "Colibri" sem o "Revenda Oficial".

Espaçamento mínimo (área de proteção)

Mantenha ao redor do logo um espaço livre equivalente à altura do "F" do FTM.

Tracejado laranja indica a área mínima de respiro.

Tamanho mínimo

Digital · 120 px (largura mínima)

Impresso · 30 mm (largura mínima)