// Branding Book · Volume 03

UI Design
System

Tokens, componentes e padrões de interface para todos os produtos digitais da Via Innove — site, propostas, dashboards e aplicações.

Design Tokens Buttons Forms KPI Cards Tables Pricing
01 · 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
02 · 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
// Tamanhos: .btn-sm · .btn-md · .btn-lg · .btn-xl
03 · 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
04 · 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
05 · 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
06 · 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
07 · Progress

Barras de Progresso

Taxa de Conversão 19,2%
Leads Resgatados 84%
Meta Mensal de Faturamento 68%
Onboarding do Cliente 3 / 5 etapas
// .progress-fill { width: {valor}% }
08 · 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
09 · 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.
11 · 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
12 · 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
13 · 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
14 · CTA Sections

Seções de Call to Action

// Próximo passo

Seu funil está perdendo
receita agora mesmo.

Agende um diagnóstico comercial gratuito e veja exatamente onde a receita está vazando no seu processo.

84% de resgate de leads · 27x ROI · 19,2% de conversão