// Branding Book · Volume 02
Identidade
& UI
O sistema de identidade visual e design system completos da Via Innove — logo, paleta, tipografia, estilo visual, tokens e componentes de interface para todos os touchpoints.
Logo System
Color Palette
Typography
Design Tokens
Componentes UI
Pricing Cards
01 · Logo
Sistema de Logo
O logo da Via Innove combina um símbolo icônico com o logotipo. O símbolo é a lâmpada estilizada com o "i" interno — representando inovação, inteligência e o eixo (Axis) que conecta estratégia e execução.
Versão Dark
Versão Fundo Claro
Símbolo Isolado
Anatomia do Símbolo
| Elemento | Representação |
|---|---|
| A lâmpada | Ideia estratégica — pensamento antes da execução |
| O "i" interno | Innove, Inteligência, Informação — o eixo que gera insight |
| A base geométrica | Estrutura, método, solidez — o alicerce do crescimento |
| O círculo externo | O eixo (Axis) — o sistema que conecta todos os pontos |
02 · Regras de Uso
Uso Correto do Logo
✓ Correto
Logo na versão dark sobre fundo escuro — uso principal em todos os materiais digitais
✓ Correto
Versão verde sobre fundo branco — para impressão e materiais claros
✗ Incorreto
VIA INNOVE
Nunca distorcer ou esticar o logo — proporções devem ser sempre mantidas
✗ Incorreto
Nunca usar sobre fundos coloridos ou com baixo contraste — sempre verificar legibilidade
| Regra | Especificação |
|---|---|
| Espaço mínimo (clear space) | Mínimo de 1x a altura do símbolo em todos os lados |
| Tamanho mínimo digital | 24px de altura para o símbolo isolado; 80px para versão completa |
| Tamanho mínimo impresso | 8mm de altura para o símbolo; 25mm para versão completa |
| Cores permitidas | Verde #6BAF4B (fundo escuro) | Verde escuro #007A33 (fundo claro) | Branco total (sobre verde) |
| Fundos proibidos | Fundos coloridos, padrões complexos, fotografias sem contraste suficiente |
03 · Cores
Paleta de Cores Principal
O verde da Via Innove representa crescimento, precisão e inovação. É o eixo cromático de toda a identidade — usado como acento estratégico, não como fundo.
Brand Green
#6BAF4B
Cor primária da marca
Green 400
#7DC55A
Hover, ativo, links
Green 600
#5A9A3C
Pressed, dark mode CTA
Green 300
#9AD47A
Destaques, métricas
Green Glow
rgba(107,175,75,0.12)
Backgrounds, halos
Fundos
BG Primary
#0A0A0A
Fundo principal
BG Secondary
#101010
Seções alternadas
BG Card
#161616
Cards, painéis
BG Elevated
#1C1C1C
Cards elevados
BG Hover
#222222
Hover states
Texto e Bordas
Text Primary
#F0F5FA
Headlines, títulos
Text Secondary
#C8D6E5
Corpo de texto
Text Muted
#8A9BB0
Descrições, labels
Border Subtle
#1E1E1E
Bordas sutis
Border Default
#282828
Bordas padrão
04 · Tipografia
Sistema Tipográfico
Dois papéis tipográficos: Momcake Bold para impacto display e identidade de marca, Poppins para toda interface e corpo de texto. JetBrains Mono para dados e elementos técnicos.
Display · Marca
Momcake Bold
Fonte display proprietária. Uso restrito a headlines de alto impacto e logotipo. Instalação local obrigatória. Fallback: Poppins 700.
Receita
Previsível
Previsível
Interface · Corpo
Poppins
Tipografia geométrica humanista. Pesos 300–700. Para toda interface digital, textos longos e materiais de comunicação.
A Via Innove integra estratégia comercial, automação com IA e mídia paga em um único sistema de receita.
Dados · Técnico
JetBrains Mono
Monospace técnica premium. Pesos 400–500. Para métricas, labels, código e elementos de sistema.
ROI: 27x
CONV: 19.2%
RESGATE: 84%
CONV: 19.2%
RESGATE: 84%
05 · Escala
Escala Tipográfica
Receita
Previsível
Método Innove Axis
3 Pilares de Crescimento
Atração Inteligente
Estrutura comercial completa do funil de receita
Diagnóstico, implementação e escala com previsibilidade de dados
Taxa de conversão e custo por aquisição monitorados em tempo real
// ROI 27x · CPL R$9.80 · CONV 19.2%
Método Innove Axis
06 · Linguagem Visual
Estilo Visual
A linguagem visual da Via Innove é tech-corporativa premium: dark backgrounds profundos, acentos verdes precisos, e uma estética que transmite sofisticação, inteligência e método.
👔
CEO · Reunião estratégica
Fotografia Corporativa
Lifestyle B2B premium: salas de reunião, tomada de decisão, dashboards reais em tela. Sem banco de imagem genérico.
Diagramas e Fluxos
Arquiteturas comerciais, funis de receita, fluxos de automação — linguagem técnica com estética premium.
📊
⚡
🎯
Iconografia
Line icons geométricos, peso thin a medium, grid consistente de 24px. Verde como cor de preenchimento sutil.
07 · Fotografia
Diretrizes de Fotografia
| Tipo | Quando usar | Estilo |
|---|---|---|
| Corporativa Premium | Site, LinkedIn, proposta, apresentações | Reuniões estratégicas, executivos tomando decisão, ambiente tech-corporativo |
| Dashboard Real | Prova de resultado, cases, social | Screenshots de CRM, relatórios reais — nunca mockup ou banco de imagem |
| Behind the Scenes | Instagram, humanização da marca | Equipe em ação, bastidores de projetos — autêntico, não posado |
| Evitar | Stock photos genérico, pessoas sorridentes sem contexto, imagens coloridas ou com vibrância excessiva | |
Regra de Ouro
Toda imagem deve comunicar inteligência, autoridade ou resultado. Se uma imagem não diz ao CEO "essas pessoas entendem o que eu preciso", não deve ser usada.
08 · Grid e Layout
Sistema de Grid
Grid 12 Colunas
1
2
3
4
5
6
7
8
9
10
11
12
Sidebar · 4col
Content · 8col
3col
3col
3col
3col
| Especificação | Valor |
|---|---|
| Colunas | 12 colunas |
| Gutter (espaço entre colunas) | 16px (mobile) / 24px (tablet) / 32px (desktop) |
| Margem lateral | 16px (mobile) / 40px (tablet) / 80px (desktop) |
| Max-width conteúdo | 1200px |
| Princípio de layout | Assimétrico com tensão visual, uso generoso de espaço negativo |
09 · Aplicações
Assinatura de E-mail
Weslley Gazetta
CEO & Estrategista Comercial
VIA INNOVE
Arquitetura Comercial
Assinatura Padrão
Dark theme, verde como acento, espaçamento generoso. Endereço de Alphaville como ativo de autoridade.
10 · Proposta Comercial
Capa de Proposta
// Proposta Comercial · Diagnóstico Innove Axis
Arquitetura de Receita
para [Nome da Empresa]
para [Nome da Empresa]
Implementação do Método Innove Axis — Sistema SWAS
Padrão de Capa — R2
Gradiente dark, linha verde superior como detalhe premium. Nomenclatura alinhada ao Método Innove Axis.
11 · Fundação
Design Tokens
Os tokens são as variáveis atômicas do sistema — as menores unidades de decisão de design que garantem consistência em todos os produtos.
// color.brand
--green-500#6BAF4B
--green-400#7DC55A
--green-600#5A9A3C
--green-300#9AD47A
--green-glowrgba(107,175,75,.12)
// color.background
--bg-900#0A0A0A
--bg-800#101010
--bg-700#161616
--bg-600#1C1C1C
--bg-500#222222
// color.text
--text-100#F0F5FA
--text-200#C8D6E5
--text-300#8A9BB0
--text-400#5A6A7E
// spacing
--space-14px
--space-28px
--space-312px
--space-416px
--space-624px
--space-832px
--space-1040px
--space-1248px
12 · Controles
Sistema de Botões
// Variantes de botão
.btn-primary → Ação principal (CTA)
.btn-secondary → Ação secundária
.btn-ghost → Ação terciária
.btn-danger → Ação destrutiva
.btn-primary → Ação principal (CTA)
.btn-secondary → Ação secundária
.btn-ghost → Ação terciária
.btn-danger → Ação destrutiva
// Tamanhos: .btn-sm · .btn-md · .btn-lg · .btn-xl
13 · Badges
Badges e Status
Ativo
Churn
Em negociação
Novo Lead
Inativo
// Status do funil comercial
.badge-green → Ativo, Won, Convertido
.badge-red → Churn, Perdido, Erro
.badge-yellow → Em negociação, Aguardando
.badge-blue → Novo lead, Informação
.badge-green → Ativo, Won, Convertido
.badge-red → Churn, Perdido, Erro
.badge-yellow → Em negociação, Aguardando
.badge-blue → Novo lead, Informação
14 · Formulários
Campos de Input
CNPJ deve estar ativo
⚠ E-mail inválido. Use seu e-mail corporativo.
// Estados: default · hover · focus · success · error · disabled
.form-input → Input padrão
.form-input.success → Validado (border green)
.form-input.error → Erro (border red)
.form-select → Dropdown
.form-textarea → Área de texto
.form-input → Input padrão
.form-input.success → Validado (border green)
.form-input.error → Erro (border red)
.form-select → Dropdown
.form-textarea → Área de texto
15 · Alertas
Alertas e Notificações
Diagnóstico Concluído
Identificamos 3 oportunidades de otimização no seu funil de receita.Taxa de Conversão Abaixo da Meta
Conversão atual de 8,3% — meta do Método Innove Axis é 15%+.Churn Crítico Detectado
3 clientes com baixo engajamento nos últimos 30 dias. Ação necessária.Novo Lead Qualificado
Empresa com faturamento estimado de R$2M/mês entrou no funil via LinkedIn Ads.// .alert-success · .alert-warning · .alert-error · .alert-info
16 · Dados
KPI Cards
Componentes centrais da Via Innove — projetados para exibir métricas do Método Innove Axis em dashboards, propostas e relatórios.
ROI
27x
↑ +3xvs. mês anterior
Taxa de Conversão
19,2%
↑ +2.1%vs. meta
Leads Resgatados
84%
↑ Automação ativa
Churn Rate
2,3%
↓ -0.4%Reduzindo
CPL Médio
R$9,80
→ Estável
Faturamento
R$102K
↑ +23%este mês
Ticket Médio
R$1.230
↑ +R$180
NPS
72
↑ Promotores: 78%
Faturamento Total — Clientes Innove Axis
R$102.120
Gerado a partir de R$3.726 investidos em anúncios — ROI de 27x em 30 dias
ROI 27x
17 · Progress
Barras de Progresso
// .progress-fill { width: {valor}% }
18 · Tabelas
Tabelas de Dados
| Vendedor | Leads | Vendas | Tx. Conv. | Ticket Médio | Faturamento | Status |
|---|---|---|---|---|---|---|
V1 Vendedor 1 | 250 | 50 | 20,0% | R$1.068 | R$53.430 | Ativo |
V2 Vendedor 2 | 247 | 38 | 15,3% | R$1.240 | R$47.125 | Ativo |
V3 Vendedor 3 | 253 | 56 | 22,1% | R$1.155 | R$64.722 | Ativo |
V4 Vendedor 4 | 249 | 62 | 24,8% | R$1.019 | R$63.194 | Treinamento |
19 · Layout
Variantes de Cards
Card Base
Padrão estático para exibição de informações estruturadas sem interação.
Card Hover
Responsivo ao hover — elevação e glow verde ao passar o mouse.
RECOMENDADO
Card Featured
Destaque com border verde e background com gradiente sutil. Para o plano principal.
21 · Tabs
Sistema de Tabs
Atração
Conversão
Retenção
Relatório
Conteúdo do Pilar de Atração Inteligente — Google Ads, Meta Ads, LinkedIn Ads, Landing Pages e SEO.
// .tab + .tab.active — usado nas seções do Innove Axis
22 · Avatares
Avatares e Identidades
WG
WG
WG
V1
V2
V3
// .avatar-sm (32) · .avatar (40) · .avatar-lg (56)
.avatar-green → Time Via Innove, usuário ativo
.avatar-gray → Vendedor cliente, usuário genérico
.avatar-green → Time Via Innove, usuário ativo
.avatar-gray → Vendedor cliente, usuário genérico
23 · Produto
Pricing Cards
Os planos da Via Innove alinhados ao Método Innove Axis — com nomenclatura renovada para refletir o novo posicionamento de consultoria premium B2B.
// ENTRADA
Innove Start
Para equipes tech-savvy que precisam de tráfego e uma estrutura básica de funil.
Mensalidade
R$3.000/mês
Setup único: R$3.500
Tráfego Pago (Google, Meta, LinkedIn)
Setup GTM, GA4, Trackeamento
1 Funil básico com automações padrão
1 Landing Page de alta conversão
Dashboard de métricas
Curso gravado de implementação
RECOMENDADO
// ESCALA
Innove Scale
Para empresas que precisam de implementação completa e suporte ao time comercial.
Mensalidade
R$4.000/mês
Setup único: R$4.500
Tudo do Innove Start
Implantação completa do software
Funis ilimitados e personalizados
Automações ilimitadas
E-mail MKT + Disparo de mensagens
Landing pages ilimitadas
Workshop Online/Presencial
Grupo de suporte dedicado
// CONSULTORIA
Innove Partner
Para empresas que precisam de parceria estratégica completa — método + execução + time.
Mensalidade
R$8.000/mês
Setup único: R$4.500
Tudo do Innove Scale
Treinamentos: Marketing, Vendas, Pós-Vendas
Auditorias semanais do processo comercial
Reuniões mensais de vendas
Acompanhamento da equipe comercial
Encontros semanais presenciais/remotos
Scripts de venda e playbooks
24 · CTA Sections
dos leads perdidos