# CONVERTTA — Identidade Visual

> Manual de Identidade Visual da CONVERTTA, versão 2.0. Regras de marca, cor, tipografia e aplicação para uso humano e por agentes de IA. Atualizado em 2026-09-20.

Este arquivo resume o manual completo publicado em https://convertta.com.br/marca. Ele é normativo: os valores abaixo não devem ser alterados, arredondados ou substituídos.

## Posicionamento

A CONVERTTA transforma ideias e ofertas em experiências visuais e digitais com direção, clareza e energia de crescimento.

Conceito central: **A Transformação em Movimento** — transformação, conversão, movimento.

Tagline oficial: **Design que Transforma.** — grafia fixa, com D e T maiúsculos e ponto final. Não alterar palavras nem capitalização.

## Nosso mascote

O canguru é o personagem da Convertta. Representa movimento, impulso e evolução contínua — a transformação em movimento. Um salto não é apenas movimento. É mudança de nível. Não substitui o logotipo nem o símbolo C.

## Cores

- **Laranja CONVERTTA** `#FF6B35` · RGB 255, 107, 53 · CMYK 0, 70, 85, 0 · Pantone 165 C (aproximado) — Energia, ação e foco. Cor primária da marca.
- **Laranja Escuro** `#CC3D00` · RGB 204, 61, 0 · CMYK 10, 85, 100, 5 · Pantone 1665 C (aproximado) — Profundidade, hover e a única laranja aprovada para texto sobre branco.
- **Preto CONVERTTA** `#0D0D0D` · RGB 13, 13, 13 · CMYK 0, 0, 0, 95 · Pantone Black C (aproximado) — Fundos institucionais, texto e contraste máximo.
- **Branco Puro** `#FFFFFF` · RGB 255, 255, 255 · CMYK 0, 0, 0, 0 · Ausência de tinta — nunca escrever "Pantone: White". — Respiro, superfície base e versão negativa da marca.
- **Cinza Médio** `#888888` · RGB 136, 136, 136 · CMYK 0, 0, 0, 47 · Pantone Cool Gray 7 C (aproximado) — Texto secundário, legendas e metadados.

Gradiente oficial: `linear-gradient(135deg, #FF6B35 0%, #CC3D00 100%)`

Proporção de uso: 60% neutro · 30% apoio · 10% laranja.

Todo código Pantone é equivalente aproximado — validar em guia Pantone físico antes de impressão. Nunca afirmar equivalência exata.

### Contraste (WCAG)

- Laranja sobre branco: **2,84:1** — texto normal: Não atende AA; uso indicado: Logo e grafismos
- Branco sobre laranja: **2,84:1** — texto normal: Não atende AA; uso indicado: Logo e grafismos
- Laranja escuro sobre branco: **4,96:1** — texto normal: AA; uso indicado: Texto e destaques
- Laranja sobre preto: **6,85:1** — texto normal: AA; uso indicado: Texto e marca
- Branco sobre preto: **19,44:1** — texto normal: AAA; uso indicado: Texto e marca

Para texto, use #CC3D00 sobre branco. Logotipos e nomes de marca são exceção prevista pela WCAG.

## Tipografia

- **Montserrat** (700, 800, 900) — títulos e chamadas.
- **Inter** (300, 400, 500) — corpo, interface e leitura contínua.
- **Arial** — substituta obrigatória quando as duas não estiverem disponíveis, especialmente em Office e e-mail.

Escala digital / impressa:

- H1: 48 px / 36 pt · Montserrat 800 · entrelinha 1,05 · tracking -1 px
- H2: 32 px / 24 pt · Montserrat 700 · entrelinha 1,1 · tracking -0,4 px
- H3: 24 px / 18 pt · Montserrat 700 · entrelinha 1,15 · tracking -0,2 px
- H4: 19 px / 14 pt · Montserrat 700 · entrelinha 1,2 · tracking 0 px
- Corpo: 16 px / 10,5 pt · Inter 400 · entrelinha 1,5 · tracking 0 px
- Legenda: 12 px / 8,5 pt · Inter 500 · entrelinha 1,35 · tracking 0,2 px
- Micro: 10 px / 7 pt · Inter 500 · entrelinha 1,25 · tracking 0,4 px

Regras: Alinhe à esquerda. Limite a linha. Caixa alta é sinal.

## Logotipo

Existem duas versões cromáticas: **laranja** (fundos claros e neutros) e **branca** (fundos escuros, laranja ou fotografia controlada). Quatro composições:

- **Horizontal** — redução mínima 320 px · proteção 1X · Site, apresentação, papelaria e sinalização.
- **Vertical** — redução mínima 240 px · proteção 1X · Formatos estreitos e composição central.
- **Com tagline** — redução mínima 480 px · proteção 1X · Comunicação institucional.
- **Símbolo isolado** — redução mínima 64 px · proteção 0,75X · Avatar, ícone e bordado.

Área de proteção: Defina 1X como metade da altura do lettering. Horizontal, vertical e assinatura com tagline: 1X em cada lado. Símbolo isolado: 0,75X em cada lado, escalando junto com o símbolo.

Exceção controlada: Favicon pode usar somente o símbolo em 16, 32 ou 48 px, exportado do arquivo oficial e revisado pixel a pixel. Lettering, versão vertical e tagline são proibidos abaixo dos mínimos.

### Proibições absolutas

- **Distorcer** — Não alterar a proporção horizontal ou vertical.
- **Rotacionar** — O movimento já está no desenho. Não girar o arquivo.
- **Recolorir fora da paleta** — Não trocar o laranja oficial por outra cor.
- **Aplicar sombra ou efeito** — Não adicionar sombra, brilho, bevel ou contorno.
- **Separar símbolo do lettering** — Não criar distância, eixo ou relação diferente da original.
- **Usar só o texto** — Não remover o símbolo do logo horizontal.
- **Fundo sem contraste** — Não usar a versão laranja sobre fundo laranja ou cor de valor próximo.
- **Foto poluída** — Não aplicar sobre textura ou imagem sem área de respiro e leitura.
- **Espaçamento interno alterado** — Não sobrepor nem afastar símbolo e lettering para preencher um suporte.
- **Substituir a tipografia** — Não redesenhar o lettering com Montserrat, Arial ou outra fonte.
- **Abaixo da redução mínima** — Não reduzir para caber. Use o mínimo definido na página 17.
- **Caixa ou contorno não previsto** — Não enquadrar a marca em contorno, selo ou moldura sem sistema aprovado.

Nenhum agente de IA deve gerar, redesenhar, vetorizar, recriar ou recolorir o logotipo CONVERTTA. Use apenas os arquivos oficiais, com escala proporcional.

## Tom de voz

- **Claro** — Explique sem esconder a ação. Ex.: "Vamos organizar sua oferta para que o cliente entenda o próximo passo em cinco segundos."
- **Direto** — Prefira verbos e escolhas. Ex.: "Escolha a versão que prioriza leitura no celular."
- **Energético** — Dê movimento à mensagem. Ex.: "Sua marca já tem valor. Agora ela precisa aparecer em movimento."
- **Próximo** — Fale com a pessoa, não com o jargão. Ex.: "Se você vende pelo WhatsApp, a primeira tela precisa responder uma dúvida."

O duplo T é um recurso intencional da marca para aproximar CONVERTTA do verbo converter. Não é uma nova grafia da língua portuguesa. No site e em campanha, use convertte, converttem, convertter e converttendo. Exemplos: "Pronto para convertter?", "Estrutura que convertte.", "coisas FODAS que converttem." Mantenha converter e converte só em textos legais, técnicos (ex.: converter arquivo para WebP), identificadores de código e quando o texto explica o verbo em português. Não crie nomes de serviço com T duplo.

Regra de oferta: Evite promessa automática. Prefira "orienta", "organiza" e "apoia". Não garanta venda, escala, ranking, citação ou operação sem intervenção humana.

## Apêndice de Identidade Digital

### Movimento

Precisão, não espetáculo. A marca é "Transformação em Movimento": o movimento existe para conduzir o olhar até a próxima ação, nunca para chamar atenção sobre si.

- Durações: instantaneo 100 ms · rapido 200 ms · padrao 400 ms · entrada 620 ms · hero 2000 ms.
- Curvas: saida cubic-bezier(0.16, 1, 0.3, 1) · entrada cubic-bezier(0.7, 0, 0.84, 0) · continuo cubic-bezier(0.65, 0, 0.35, 1) · linear linear.
- Entrada: fade com deslocamento de 12 px, escalonado em 60 ms entre irmãos.
- Anime apenas `transform` e `opacity`. `prefers-reduced-motion: reduce` desliga tudo e exibe o estado final.
- Proibido: Animar `width`, `height`, `top`, `left`, `margin` ou `padding` — só `transform` e `opacity`. Bounce, elástico ou overshoot: a marca não cabriola. Paralaxe de fundo. O deslocamento da marca d’água tem teto de 20 px. Girar, escalar ou deformar o logotipo de identificação em qualquer circunstância.

### Produto digital (SaaS e dashboards)

- Espaçamento em módulo de 8 px: 4, 8, 12, 16, 24, 32, 48, 64 px.
- Raios: raio-icone 6px · raio-campo 12px · raio-card 20px · raio-pill pill.
- Botões: primário, secundário, fantasma, destrutivo. Altura padrão 44 px.
- Dark mode: base #0D0D0D, superfície elevada #1A1A1A, linha rgba(255,255,255,0.14).
- Séries de dados em superfície clara: #CC3D00, #5B4B8A, #8A5A00, #0F5F73, #6B6B6B, #2F6B4F.
- Séries de dados em superfície escura: #FF6B35, #9E8CD6, #E0A93B, #4FB3CE, #A8A8A8, #63C08D.
- Semânticas (claro / escuro): sucesso #137A55 / #72E0B2 · alerta #A66200 / #E8B457 · erro #A52B2B / #FF9E9E · informação #0F5F73 / #7FD3EA.

### Social e vídeo

- Feed: 1080 × 1350 px (4:5). Área segura: topo 96 px, base 160 px, lados 64 px.
- Stories e Reels: 1080 × 1920 px (9:16). Área segura: topo 250 px, base 420 px, lados 64 px.
- Capa de vídeo: 1280 × 720 px (16:9). Área segura: topo 40 px, base 90 px, lados 60 px.
- Thumbnail: 1280 × 720 px (16:9). Área segura: topo 40 px, base 120 px, lados 60 px.

Legenda obrigatória em todo vídeo com fala, duas linhas no máximo, sobre fundo sólido.

### Conteúdo gerado por IA

A IA nunca gera, redesenha, vetoriza, recria, recolore ou "melhora" o logotipo CONVERTTA. Nem como referência, nem como inspiração, nem em rascunho.

- Revisar sempre: mãos e dedos, rostos, texto na imagem, objetos e cenário, marcas de terceiros, coerência de marca.
- Voz clonada só com autorização escrita; trilha com licença comercial verificada.
- Nenhuma peça publica sem aprovação humana registrada.
- Peça fotorrealista que possa ser confundida com registro real é identificada como gerada por IA.

### Co-branding

- Alinhar as marcas pela altura do lettering (0,35H), não pela caixa total.
- Separador: filete vertical de 1 px em #888888, com 1X de respiro de cada lado.
- Fundos do lockup horizontal: branco, Preto CONVERTTA e cinza muito claro. Proibidos: laranja, gradiente e fotografia.
- Em avatar quadrado (ícone de grupo, perfil) o gabarito é outro: metade com o gradiente oficial e o símbolo branco, metade com a cor de fundo principal da marca do parceiro.
- Nunca recolorir a marca do parceiro nem aplicar o gradiente sobre qualquer marca.

### Arquitetura de marca

A CONVERTTA opera como marca única. Os serviços são descritores funcionais da mesma marca — não submarcas. Nenhum serviço ganha logotipo, símbolo, tipografia ou paleta própria. Nomenclatura: `CONVERTTA · <nome do serviço>`.

### Governança

Fonte de verdade é https://convertta.com.br/marca. Versionamento maior.menor, aprovação pela direção de arte, revisão a cada 12 meses.

## Recursos

- [Manual completo em Markdown](https://convertta.com.br/marca/manual.md): o manual inteiro, com tabelas de cor e medida.
- [Design tokens (W3C)](https://convertta.com.br/marca/tokens.json): cor, tipografia, espaçamento e raio.
- [Portal da marca](https://convertta.com.br/marca): versão navegável, com simulador de contraste e download dos arquivos.
- Contato: contato@convertta.com