Manual de identidade visual · v2.4 · setembro 2026

EcomSmart
SmartConversas

Um sistema de marca para duas irmãs: a inteligência que mede e a conversa que vende.

Sumário e princípios

00

O que este manual decide

Ele existe para que qualquer pessoa, do desenvolvedor ao designer de social, produza EcomSmart e SmartConversas sem precisar perguntar. Tudo aqui foi baseado em três sistemas reais, não inventado: Atlassian para o produto, Coinbase para landing e social, Meta Business para o que toca WhatsApp.

Sumário

01	As duas marcas e a relação entre elas
02	Logotipo: símbolo, versões, proteção, erros
03	Cor: paleta, proporção, contraste, degradês
04	Tipografia: Figtree, escala e regras
05	Elementos gráficos: banner, grade, dado em destaque, ícones
06	Layout: grade, margens, rodapé, FAQ
07	Aplicação: landing page (web e mobile)
08	Aplicação: sistema Hub e SmartConversas (web e mobile)
09	Aplicação: redes sociais
10	Aplicação: blog, SEO e GEO
11	Comunicação: tom de voz das duas marcas
12	Referências e checklist geral (ver 20)
13	Vestuário: camiseta e polo
14	Brindes: caneca, copo térmico, adesivos
15	Relatórios
16	Contratos e propostas
17	Instagram avançado, Ads e LinkedIn
18	E-mail, apresentação, cartão e telas
19	Tom de voz por canal
20	Tokens para desenvolvimento e kit Canva

Cinco princípios

1. Um azul, um navy, muito branco.

A marca é reconhecida pela economia. Cor extra só com função (estado, módulo), nunca decoração.

2. O dado é a assinatura.

Todo número relevante aparece em Figtree Bold azul, com algarismos tabulares. É o gesto que só a EcomSmart faz, do post ao KPI.

3. Respeite a margem.

Conteúdo vive num container central com respiro. Nada encosta na borda, em nenhuma tela.

4. Uma fonte só.

Figtree em tudo: título, texto, interface, dado e código. A hierarquia vem de peso, tamanho e cor, nunca de trocar de família.

5. Escuro para impressionar, claro para trabalhar.

Degradê navy → azul em banners, capas e destaques. Interface de trabalho sempre clara.

01 · As duas marcas

01

Mesma família, temperaturas diferentes

EcomSmart e SmartConversas compartilham símbolo, tipografia e paleta. O que as distingue é a proporção entre navy e branco, e a voz. Assim a pessoa reconhece as duas como irmãs sem confundir o que cada uma faz.

EcomSmart

Marca-mãe. Inteligência de dados, automação e IA para e-commerce.

Temperatura	Navy dominante, degradê profundo, dado em destaque
Voz	Analítica, frases curtas, sempre com um número
Promessa	Mais recompra, medida pedido a pedido
Produtos	Hub (5 módulos), Gestão, MCP, API pública
Exemplo	"R$ 47.433 influenciados em 30 dias. No automático."

SmartConversas

Canal e atendimento. CRM de WhatsApp com API Oficial Meta, vários atendentes num número, IA no atendimento.

Temperatura	Branco dominante, azul em ação, interface de chat visível
Voz	Próxima, segunda pessoa, verbos de ação
Promessa	Atender melhor e vender mais no WhatsApp
Produtos	CRM, chatbot, campanhas, integrações
Exemplo	"Seu time inteiro num só número. Responda em segundos, não em horas."

Arquitetura de marca

Endosso

SmartConversas assina "by EcomSmart" em rodapé de site, e-mail e materiais de venda. Nunca no logo principal.

Módulos do Hub

Recuperação de Carrinho, Disparo RFV, Retenção, E-commerceFlow, Campanhas Inteligentes são nomes de produto, não marcas. Sem logo próprio, só ícone e cor de apoio.

Coexistência

Quando as duas aparecem juntas, EcomSmart vem primeiro ou acima. Mesmo tamanho de símbolo, separadas por um fio de 1 px.

02 · Logotipo

02

O símbolo "E" e o logotipo

O símbolo é um E construído em três barras com dois cortes diagonais: ao mesmo tempo letra, seta e fluxo de mensagens. É o único elemento que nunca muda entre as duas marcas.

EcomSmart

Logotipo horizontal · versão principal

SmartConversas

Mesma construção · wordmark em Figtree 600

Os arquivos vetoriais oficiais (SVG, PDF, PNG) são a fonte de verdade do logotipo. As reproduções deste manual são ilustrativas.

Construção e área de proteção

x x

x = altura da barra superior do E. Proteção mínima de 1x em todos os lados.
Tamanho mínimo: símbolo 16 px de altura em tela, 5 mm impresso; logotipo horizontal 90 px / 25 mm.
Proporção símbolo : altura da caixa-alta do wordmark = 1,25 : 1.

Versões

EcomSmart

Principalazul + navy sobre branco

EcomSmart

Negativaazul + branco sobre navy

EcomSmart

Monocromática clarabranco sobre azul ou degradê

EcomSmart

Monocromática escuranavy total · impressão 1 cor

Usos incorretos

Não distorcer, inclinar ou rotacionar.

Não aplicar sombra, contorno ou brilho.

Não usar outra cor além de azul, navy e branco.

Não colocar sobre foto sem faixa ou degradê de contraste.

Não trocar a fonte do wordmark nem recompor o E.

03 · Cor

03

Paleta

Duas cores de marca, uma escala de neutros com viés azul e quatro cores semânticas. A paleta segue o desenho do Atlassian Design System (escala por função) com a economia da Coinbase (uma cor de ação).

Marca

Azul EcomSmart#0A5BF0 · RGB 10 91 240 · CMYK 96 62 0 0 · Pantone 2728 C aprox.

Ação, links, dado em destaque, símbolo. Contraste sobre branco 5,6:1 (AA texto).

Navy EcomSmart#0B1033 · RGB 11 16 51 · CMYK 100 95 40 50 · Pantone 2768 C aprox.

Texto principal, fundos escuros, sidebar do sistema. Contraste sobre branco 18:1.

Escala do azul

Neutros (frios, com viés azul)

Semânticas

Sucesso#16A34A

Atenção#D97706

Erro#DC2626

WhatsApp#25D366 · só "canal conectado" e ícone do canal

Proporção de uso

60% branco20% neutro12% navy8% azul

EcomSmart em marketing inverte: navy 50%, branco 30%, azul 20%. SmartConversas mantém a proporção clara em tudo.

Cores de módulo (apoio, nunca área grande)

Carrinho

Disparo RFV

Retenção

Flow

Campanhas

03 · Cor · degradês e contraste

03

Degradês oficiais

O degradê é elemento de marca, não efeito. São três, com nome, e só eles. Sempre no sentido 135° (do canto superior esquerdo ao inferior direito), ou radial com o brilho na base.

Profundo

#070B1E → #0B1033 (38%) → #0A3FB0 (76%) → #0A5BF0 · 135° + 2 brilhos radiais

Banners, capas de post, hero escuro, tela de abertura. É construído em três camadas: a base linear, um brilho azul-400 a 55% no canto inferior direito e um brilho azul-300 a 22% no canto superior esquerdo. As camadas são parte da definição, não efeito opcional.

Azul

#0A5BF0 → #5A8CFA · 135°

Botões de destaque em marketing, cards de CTA, ícones de módulo. Nunca em texto.

Névoa

#FFFFFF → #EEF4FF · 180°

Fundo de seções claras, carrossel institucional (como o post do manifesto), telas de onboarding. Quase invisível: se aparece, está forte demais.

Regras

Degradê só em superfície. Texto e ícone são sempre chapados.
Sobre Profundo, texto branco e dados em azul-300 #8DB0FF.
Nunca misturar Profundo e Azul na mesma peça.
Nada de roxo, ciano ou verde no degradê. A família é azul.
Em impressão, converter para CMYK e testar: o navy tende a "fechar".

Tema escuro do sistema

O Hub e o SmartConversas têm tema escuro, em azul-noite neutro (nunca puxando para o roxo). Fundo #0A0F1F, superfície #101729, borda #1E2A44, texto #EEF2FA, secundário #B7C1D9, azul de ação clareia para #5A8CFA para manter 4,5:1. Degradê não entra na interface de trabalho, só em marketing. Toda tela do sistema nasce nas duas versões, clara e escura.

Contraste (WCAG 2.2)

Combinação	Razão	Uso
Navy sobre branco	18,0:1	AAA · texto
Azul 600 sobre branco	5,6:1	AA · texto e links
Azul 700 sobre branco	7,6:1	AAA · texto pequeno
Branco sobre azul 600	5,6:1	AA · botões
Branco sobre navy	18,0:1	AAA
Neutro 500 sobre branco	4,6:1	AA · texto secundário
Neutro 400 sobre branco	2,9:1	Só ícones e placeholders
Azul 300 sobre navy	8,1:1	AAA · dados em fundo escuro

04 · Tipografia

04

Figtree para tudo

Uma família, todos os papéis. Figtree é geométrica, larga e de traço uniforme, a alternativa aberta mais próxima da Atlassian Sans: presença forte em título, leitura confortável em texto e algarismos tabulares para dados. A hierarquia nasce de peso (400 a 700), tamanho e cor. É gratuita (SIL OFL) e está no Google Fonts, no Canva, no Figma e no WordPress.

Aa

Figtree

Pesos usados: 400, 500, 600 e 700 (só em display). Variável de 300 a 900, com itálico. Cantos suaves e letras largas: ganha presença em título sem perder leitura em 14 px.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
0123456789 R$ % → ?!

42

Figtree Bold · dados

O dado usa a mesma Figtree em peso 700, azul, com font-variant-numeric: tabular-nums para as colunas alinharem. Tracking -3% acima de 32 px.

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
0123456789 R$ 47.433,38 20,4%

Escala tipográfica (base 16 px · razão 1,25)

Papel	Fonte / peso	Web	Mobile	Tracking · entrelinha	Amostra
Display (hero landing)	Figtree 700	56–64	36	-3% · 1,05	Recupere carrinhos
H1	Figtree 600	40	28	-2% · 1,1	Assinatura e uso
H2	Figtree 600	28	22	-2% · 1,15	Meus módulos
H3 / título de card	Figtree 600	18	17	-1% · 1,3	Régua de envio
Corpo	Figtree 400	16	16	0 · 1,5	Cada módulo é independente.
Interface	Figtree 400/500	14	15	0 · 1,45	Configurar · Histórico
Rótulo / seção	Figtree 500 caixa alta	11–12	11	+8% · 1,2	Módulos de retenção
KPI grande	Figtree 700 · tabular	32–40	28	-3% · 1	R$ 6.963
Dado inline, código, cupom	Figtree 600 · tabular	14	14	0 · 1,5	cupom VOLTA10

Faça
Uma palavra ou número de ênfase por título, em Figtree Bold azul. Títulos com no máximo duas linhas. Texto corrido com 60 a 70 caracteres por linha.

Não faça
Itálico como ênfase. Caixa alta em frases inteiras. Peso 700 fora do display do hero e de capas de post. Terceira família, inclusive serifas, em qualquer peça oficial.

Fallback: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif. No Canva, buscar "Figtree" na lista padrão.

05 · Elementos gráficos

05

Os gestos que repetem

Cinco elementos, sempre os mesmos, em qualquer superfície. É a repetição que constrói reconhecimento.

1 · Banner profundo

Degradê Profundo, cantos de 24 px, símbolo branco ou dado grande centralizado, brilho radial na base. Usado como faixa de produto em landing, capa de vídeo e header de e-mail.

2 · Dado em destaque

20,4%

de conversão nas campanhas segmentadas por RFV

Número em Figtree 700 azul, legenda em Figtree 400 navy. Sempre com fonte do dado (período, base) no rodapé da peça.

3 · Grade discreta

Grade de 1 px em neutro-200 que desvanece para o canto, atrás de heros e seções (referência Atlassian). Nunca sobre o degradê.

4 · Símbolo recortado

O E ampliado e cortado pela borda, a 15 a 20% de opacidade, como textura de fundo escuro. Um por peça, sempre no canto inferior direito.

5 · Ícones e prévia de WhatsApp

Oi Ana! Seu carrinho ainda está te esperando. Use VOLTA10 e ganhe 10% hoje.

Ícones em linha de 1,5 px (Lucide ou Heroicons outline), cantos arredondados, nunca preenchidos nem coloridos. A prévia de mensagem segue a convenção visual do WhatsApp (referência Meta) para o cliente reconhecer na hora.

Fotografia e ilustração

Pessoas reais operando loja ou celular, luz natural, sem banco de imagem óbvio. Um leve overlay navy a 20% quando houver texto por cima.
Capturas de tela do produto são a principal "ilustração": sempre em moldura de navegador ou celular, com sombra suave e cantos de 16 px.
Sem ilustração 3D, sem mascote, sem ícones coloridos de "pacote".
Emoji: permitido em mensagens de WhatsApp e social, um por peça; nunca em interface nem em títulos.

06 · Layout

06

Grade, margens, rodapé e FAQ

Nada encosta na borda. Todo conteúdo vive num container central e respira. Este é o ponto mais visível de amadorismo quando falha, e o mais barato de acertar.

Container e espaçamento

Breakpoint	Container	Margem lateral	Colunas
≥ 1440	1200 px	auto	12 · gutter 24
1024–1439	fluido	48 px	12 · gutter 24
768–1023	fluido	32 px	8 · gutter 20
< 768 (mobile)	fluido	20 px	4 · gutter 16

Escala de espaçamento em múltiplos de 4: 4 8 12 16 24 32 48 64 96. Entre seções de landing: 96 px web, 56 px mobile. Raio: 8 px (inputs), 12 px (cards), 16 px (cards grandes), 24 px (banners), 999 px (botões e pílulas).

Botões

Testar grátisVer como funcionaComeçarFale conosco →

Formato pílula (referência Atlassian e Coinbase). Um botão primário azul por tela; o secundário é contorno. Em fundo escuro, o primário vira branco com texto navy.

Rodapé padrão

EmpresaSobreCarreirasBlogContato

ProdutosRecuperação de CarrinhoDisparo RFVRetençãoE-commerceFlowCampanhas InteligentesSmartConversas

RecursosCentral de ajudaAPI e MCPStatusIntegraçõesCases

LegalTermosPrivacidadeLGPDCookies

Bloco claro (neutro-50) com cantos de 24 px dentro do container, quatro colunas, títulos em caixa alta, links em peso 400. Linha final fora do bloco com copyright, CNPJ e idioma. No SmartConversas, a coluna Empresa termina com "by EcomSmart".

FAQ

Preciso de cartão para testar? +

O que conta como mensagem? +

Posso usar meu número atual? +

Como cancelo? +

Toda landing e toda página de produto tem FAQ com 5 a 8 perguntas reais de venda, em acordeão, marcado com schema FAQPage (ver seção 10). Perguntas em segunda pessoa, respostas de até 60 palavras.

07 · Aplicação · landing page

07

Landing page

Estrutura fixa para as landings dos módulos e das duas marcas: hero centralizado de duas linhas, um botão, banner profundo, cards de benefício, prova com número, FAQ e rodapé. A ordem não muda; o conteúdo, sim.

EcomSmartProdutos ▾SoluçõesPreçosBlogEntrarTestar grátis

Recupere carrinhos abandonados no automático

Capture o abandono na sua loja, dispare uma régua de até 3 mensagens no WhatsApp oficial e veja a receita recuperada pedido a pedido.

Começar teste grátis de 7 dias Ver como funciona →

Feito para quem vende todo dia

Captura híbrida por webhook e sincronização, régua com cupom só na terceira mensagem e receita confirmada por vínculo com o pedido, não por estimativa.

Captura híbrida

Webhook + sync da loja: nenhum carrinho fica de fora.

Régua inteligente

1ª em 1h, 2ª em 24h, 3ª em 72h com cupom.

Receita comprovada

Recuperação confirmada pelo pedido.

Assistente IA

Configure conversando, no painel ou no seu Claude.

9%

dos carrinhos recuperados

54x

ROI médio

7 dias

grátis para testar

Perguntas frequentes

Preciso de cartão para testar? +

O que conta como mensagem? +

Posso usar meu número atual? +

EcomSmartSobreBlogContato

ProdutosCarrinhoDisparo RFVRetenção

RecursosAjudaAPI e MCPStatus

LegalTermosPrivacidade

9:41●●● ▮

EcomSmart≡

Recupere carrinhos no automático

Régua de 3 mensagens no WhatsApp oficial. Receita confirmada pedido a pedido.

Testar grátis 7 dias

Captura híbrida

Webhook + sync da loja.

Régua inteligente

1h → 24h → 72h com cupom.

9%

dos carrinhos recuperados

Mobile: mesma ordem, uma coluna, botão de largura total, margem de 20 px, hero em 36 px.

08 · Aplicação · sistema

08

Hub e SmartConversas

A interface de trabalho é clara, densa e previsível, no padrão Atlassian: sidebar navy, fundo neutro-50, cards brancos com borda de 1 px, um azul de ação. O degradê não entra aqui. O dado em azul é o único destaque.

▣ Hub

Início

Assistente IA

MEUS MÓDULOS

● Carrinho

● Retenção

○ Disparo RFV 🔒

○ Flow 🔒

○ Campanhas 🔒

CONTA

Assinatura

Conectar Claude

Bom dia, Geraldo

Aurora Fashion · 2 módulos ativos

● WhatsApp conectado

Receita influenciadaR$ 27,6 mil

Mensagens3.240

Pedidos atribuídos143

ROI88x

Recuperação de CarrinhoR$ 6.963

Ativo

RetençãoR$ 21,3 mil

Ativo

Disparo RFV 🔒

610 clientes a recuperar

Testar grátis

✦

O assistente analisou sua base: 609 clientes novos sem boas-vindas. Ativar automação?

Ativar

9:41●●● ▮

Aurora Fashion3.240/10k

Receita infl.R$ 27,6k

ROI88x

Recuperação de CarrinhoR$ 6.963

Disparo RFV 🔒Testar grátis

InícioMódulosAssistenteConta

Mobile: barra inferior de 4 abas, KPIs em 2 colunas, assistente em folha inferior.

SmartConversas · atendimento

Ana Reis

Carlos M.

Loja Sul

Oi, tem o tênis 39?

Tem sim, Ana! Quer que eu separe?

Quero, pode mandar o link

✦ Sugerir respostaEnviar catálogo

Regras da interface

Sidebar navy #0B1033, item ativo com 12% de branco. Fundo de conteúdo neutro-50, cards brancos, borda neutro-200, sem sombra.
Estado em forma, não só em cor: pílula, ponto, ícone de cadeado. Verde WhatsApp só em "conectado".
KPI: rótulo 12 px neutro-500, valor Figtree 700 de 24 a 32 px com algarismos tabulares; azul quando é dinheiro ou taxa de resultado.
Módulo bloqueado é sempre visível, com prévia e um argumento real da base, nunca escondido do menu.
Assistente IA: painel fixo à direita (360 px) no web, folha inferior no mobile, ícone ✦, ações executadas em cards com borda esquerda verde.

09 · Aplicação · redes sociais

09

Instagram e LinkedIn

Padrão Coinbase: afirmação curta, muito respiro, logo pequeno no topo esquerdo, uma cor de fundo por post. O feed alterna branco, névoa, navy e profundo para criar ritmo. O dado em azul aparece em pelo menos um post a cada três.

ecomsmart

Seu lucro está na recompra. Não no próximo anúncio.

ecomsmart

24%

dos clientes que recebem boas-vindas compram de novo em 30 dias

ecomsmart · manifesto

Por que fazemos o que fazemos

Arraste →

ecomsmart

Automação que vira venda.

smartconversas

Seu time inteiro num só número de WhatsApp.

Oi, tem em estoque?

Tem sim! Separo pra você?

ecomsmart

Receita influenciada · 30 dias

R$ 47.433

XSPARK

Captura de produto como conteúdo.

NOVO MÓDULO

Capa de Reels: foto + faixa branca com título

Grade do post 1080×1080

Margem 96 px em todos os lados
Logo + @ no topo esquerdo, 28 px de altura
Título ancorado na base, 72 a 96 px, máx. 3 linhas
Dado grande: Figtree Bold 200 a 260 px

Stories e Reels 1080×1920

Zona segura: 250 px topo e base
Legenda de vídeo em Figtree 500, fundo navy 80%
Capa: foto com faixa branca inferior e título
CTA sempre em pílula azul

Ritmo do feed

Sequência sugerida: branco → profundo → névoa → navy
1 dado, 1 afirmação, 1 produto, 1 pessoa a cada 4 posts
Foto de rosto sempre com overlay navy 20% e título branco
Avatar: símbolo azul em círculo branco (EcomSmart) e símbolo branco em círculo azul (SmartConversas)

10 · Aplicação · blog, SEO e GEO

10

Blog orientado a busca e a IA

O site é feito para ser encontrado por pessoas (SEO) e citado por assistentes de IA (GEO, Generative Engine Optimization). As duas coisas pedem o mesmo: resposta direta no topo, estrutura clara, dados com fonte e marcação semântica.

Blog › Retenção

O que é RFV e como usar para vender mais no WhatsApp

Por Geraldo Durães · 8 min · atualizado em 11 set 2026

Resposta curta: RFV é a segmentação da base por Recência, Frequência e Valor. Ela separa clientes em 9 perfis e permite mandar a mensagem certa para cada um. Lojas que segmentam convertem 13% a 20%, contra 2% a 4% em disparo genérico.

Como a régua é calculada

Cada corte nasce da distribuição da própria loja, sem parâmetro manual…

Perguntas frequentes

Quantos clientes preciso para calcular RFV? +

RFV é o mesmo que RFM? +

Checklist SEO

Um H1 por página com a palavra-chave principal; H2 em forma de pergunta quando possível.
Título ≤ 60 caracteres, meta description 140 a 155, URL curta em português sem stopwords.
Schema.org: Organization, Article com autor e data, FAQPage, Product + Offer nas landings, BreadcrumbList.
Imagem OG 1200×630 gerada do template "post profundo" com título; alt descritivo em todas as imagens.
Core Web Vitals: LCP < 2,5 s, sem layout shift; landings pré-renderizadas (SSR ou estático), fontes com display=swap.
Links internos: cada artigo aponta para 1 landing de módulo e 2 artigos relacionados; cada landing para 3 artigos.
Sitemap, canonical, hreflang pt-BR, robots liberando IA (GPTBot, ClaudeBot, PerplexityBot).

Checklist GEO (ser citado por IA)

Resposta primeiro: bloco de 40 a 60 palavras que responde à pergunta do título antes de qualquer contexto.
Definições explícitas: "X é…" na primeira frase de cada seção de conceito.
Números com fonte e data: "20,4% (base de 7 lojas, jul–ago 2026)". Dado sem fonte não é citado.
Listas e tabelas para comparações; IA extrai melhor que prosa.
Autoria real: nome, cargo, foto e página de autor com credenciais (mestrado, cases).
Frescor: data de atualização visível e revisão semestral dos 20 artigos mais acessados.
llms.txt na raiz do site com resumo dos produtos, preços e links canônicos; página "Sobre" com fatos verificáveis (CNPJ, sede, fundação).
Entidades consistentes: sempre "EcomSmart Hub", "SmartConversas", "Recuperação de Carrinho", nunca variações.

11 · Comunicação

11

Tom de voz

As duas marcas falam com o dono de loja que está ocupado. Frases curtas, verbo no início, número quando houver. A diferença é a distância: EcomSmart explica com dado, SmartConversas conversa de perto.

EcomSmart · analítica e direta

Pessoa	Primeira do plural ("medimos", "recuperamos") e segunda do singular para o leitor.
Ritmo	Título de até 8 palavras. Um número por título ou parágrafo de abertura.
Palavras	recompra, receita influenciada, segmento, régua, automático, medido, comprovado
Evita	"revolucionário", "alavancar", "solução completa", "360º", superlativos sem dado
Exemplo	"31 carrinhos recuperados no primeiro mês. Sem mexer em nada."

SmartConversas · próxima e prática

Pessoa	Segunda do singular, imperativo gentil ("responda", "organize", "veja").
Ritmo	Frases de conversa, podem ter pergunta. Um emoji por peça em social e WhatsApp.
Palavras	atender, responder, time, número, cliente, agora, junto, organizado
Evita	jargão de CRM ("pipeline", "SLA") sem explicar; tom robótico; "chatbot"
Exemplo	"Seu cliente mandou mensagem às 22h. Quem responde? Com o SmartConversas, o time todo, num só número."

Diga · não diga

Diga	Não diga
Recupere 9% dos carrinhos abandonados.	Aumente suas vendas com nossa solução inovadora.
Teste grátis por 7 dias. Cancele quando quiser.	Aproveite essa oportunidade imperdível!
A régua manda a 1ª mensagem em 1 hora.	Nosso fluxo omnichannel dispara touchpoints.
Configure conversando com o assistente.	Interface intuitiva powered by AI.
WhatsApp API Oficial da Meta.	WhatsApp ilimitado (promessa que a Meta não permite).

Botões e CTAs

Verbo + resultado: "Testar grátis", "Ver como funciona", "Ativar módulo", "Falar com o time". Nunca "Clique aqui", "Saiba mais" sozinho, "Enviar".

Números e moeda

R$ com espaço (R$ 299), milhar com ponto, decimal com vírgula, percentual sem espaço (20,4%). Sempre em Figtree Bold azul quando em destaque. Período e base junto do dado.

Nomes

EcomSmart (E e S maiúsculos), SmartConversas (junto), EcomSmart Hub, RFV na interface (nunca RFM para o cliente), WhatsApp API Oficial, Meta. Módulos com inicial maiúscula.

13 · Aplicação · vestuário

13

Camiseta e polo

Roupa é marca em movimento: aparece em evento, vídeo e visita a cliente. A regra é a mesma do site: muito espaço, um elemento por área, símbolo pequeno na frente e afirmação grande atrás.

Orientações

Item	Regra
Cores de tecido	Navy (Pantone 2768 C ou o mais escuro do fornecedor), branco e azul (Pantone 2728 C). Nada de cinza mescla, preto ou outras cores.
Frente	Só o símbolo, no peito esquerdo, 6 cm de altura na camiseta e 5 cm na polo. Sem wordmark na frente.
Costas (camiseta)	Uma afirmação de até 5 palavras em Figtree Bold, 3 linhas no máximo, alinhada ao centro, largura 26 cm. Palavra de ênfase em azul-400 sobre navy, ou o dado grande em branco sobre azul. Símbolo pequeno (3 cm) na nuca.
Polo	Bordado, símbolo no peito esquerdo (5 cm). Wordmark ou domínio na manga esquerda, 7 cm, uma linha. Botões na cor do tecido.
Técnica	Camiseta em silk ou DTF; polo em bordado. Bordado em uma cor só, símbolo mínimo 2 cm, sem degradê nem texto abaixo de 6 mm.
Marcas	EcomSmart usa navy e azul; SmartConversas usa branco com símbolo azul e nome na base das costas ou manga. Nunca as duas na mesma peça.

Não: logo centralizado grande na frente, frases longas, ilustração, slogan em itálico, mais de duas cores por peça, etiqueta de fornecedor visível.

14 · Aplicação · brindes

14

Caneca e copo térmico

Objetos que ficam na mesa do cliente por anos. Devem ser bonitos sem a marca gritar: símbolo discreto, uma afirmação ou um dado, acabamento fosco.

Caneca (325 ml, cerâmica)

Branca	Símbolo azul 3 cm à esquerda da alça, afirmação curta em Figtree 600 ao lado (navy + azul na palavra de ênfase). Alça e interior brancos.
Navy / degradê	Degradê Profundo em impressão total (sublimação), dado grande em branco centralizado, legenda de 6 palavras, símbolo 1,5 cm abaixo. Alça e interior navy.
Proibido	Wordmark completo em volta da caneca, brilho, cores de módulo, mais de um dado.

Copo térmico (500 ml, inox)

Navy fosco	Gravação a laser do símbolo, 2,5 cm, centralizado a 40% da altura. Sem texto. Tampa na cor do corpo.
Branco fosco	SmartConversas: nome na vertical em Figtree 600 e símbolo azul na base. Gravação ou UV em uma cor.
Proibido	Degradê (laser não reproduz), inox natural sem pintura, adesivo.

Orientações gerais de brinde

Acabamento fosco sempre. Brilhante barateia o navy e reflete o degradê de forma errada.
Um elemento por face. Símbolo ou frase ou dado. Nunca os três.
Frases do banco oficial (seção 17): "Bom dia, recompra.", "Seu lucro está na recompra.", "Automação que vira venda.", "Atenda melhor. Venda mais." (SmartConversas).
Cores: navy, branco, azul. Pantone 2768 C e 2728 C para referência de fornecedor; pedir prova física antes do lote.
Embalagem: caixa kraft ou branca com o símbolo em uma cor e um cartão A6 em Figtree com uma frase e o QR do site.
Kit de boas-vindas ao cliente: caneca branca + cartão + adesivo do símbolo. Copo térmico é presente de fechamento de contrato anual.

Adesivos e pins

Símbolo azul em fundo branco (recorte quadrado, cantos 4 mm) ou símbolo branco em fundo navy. 3 cm e 5 cm. Pin de metal esmaltado: símbolo azul em base branca, 2 cm.

15 · Aplicação · relatórios

15

Relatórios

Relatório de resultados mensal, análise de base e resumo executivo seguem um único modelo: capa em degradê Profundo com o dado do mês, páginas internas claras com grade de KPIs e gráficos monocromáticos em azul.

EcomSmart

RELATÓRIO MENSAL · AGOSTO 2026

Aurora Fashion

R$ 47.433

receita influenciada em 30 dias · +26,7%

Relatório mensal · Agosto 202602

Resumo executivo

A base cresceu 4% e a receita influenciada subiu 26,7%. Boas-vindas foi o módulo de maior retorno.

Receita influenciadaR$ 47.433

Pedidos influenciados224

Mensagens entregues3.292

ROI38x

Receita por módulo

Boas-vindas

Aniversário

Carrinho

Reativação

ecomsmart.com.brConfidencial · Aurora Fashion

Relatório mensal · Agosto 202605

Segmentação RFV

Campeões

16%

Fidelizados

12%

Promissores

9%

Novos

20%

Possíveis leads

11%

Precisa de atenção

8%

Em risco

9%

Quase hibernando

7%

Hibernando

8%

Matriz em escala de azul: quanto mais escuro, maior o valor do segmento. Sem cores semânticas na matriz.

Recomendações

Ativar reativação para 77 clientes Em risco.
Antecipar 2ª mensagem do carrinho para 12h.
Arquivar 22 templates sem uso.

ecomsmart.com.brConfidencial · Aurora Fashion

Orientações

Formato

A4 retrato, margens 20 mm, cabeçalho com nome do relatório e número da página, rodapé com domínio e "Confidencial · Cliente". Exportar em PDF/A.

Capa

Degradê Profundo, logo branco no topo, rótulo do período em caixa alta, nome do cliente em Figtree 700, o dado principal do mês em azul-300 na base. Símbolo recortado no canto.

Tipografia

Título de página 24 pt, corpo 10,5 pt, legenda 8 pt. KPIs em Figtree 700 tabular, azul quando dinheiro ou resultado.

Gráficos

Monocromáticos em escala de azul; verde, âmbar e vermelho só para variação positiva/negativa. Sem 3D, sem sombra, sem pizza com mais de 4 fatias. Sempre com fonte e período.

Estrutura

Capa → Resumo executivo (1 página) → Resultados por módulo → Base e RFV → Recomendações → Próximos passos → Anexo metodológico.

Automatizar

O template é gerado pelo Hub (HTML → PDF), mesmo CSS deste manual. Nenhum relatório é montado à mão no PowerPoint.

16 · Aplicação · contratos e propostas

16

Contratos e propostas

Documento jurídico e comercial é onde a marca prova seriedade. Capa clara, muita margem, tipografia impecável, tabela de preço em destaque e assinatura digital. Sem degradê no corpo, só um filete azul.

EcomSmart

PROPOSTA COMERCIAL

EcomSmart Hub
para Aurora Fashion

Recuperação de Carrinho, Retenção e Disparo RFV

Proposta nº 2026-091 · válida até 30/09/2026
Natal/RN · 11 de setembro de 2026

Proposta 2026-09103

3. Investimento

Módulo	Meses 1–3	A partir do 4º
Recuperação de Carrinho	R$ 99	R$ 299
Retenção	R$ 99	R$ 299
Disparo RFV	R$ 99	R$ 299
Total mensal	R$ 297	R$ 897

7 dias grátis em cada módulo. Até 10.000 mensagens/mês por módulo. Custo Meta repassado a preço de tabela.

4. Condições

4.1 Cobrança mensal via cartão (Stripe) com nota fiscal para o CNPJ do contratante.
4.2 Cancelamento a qualquer momento, sem multa, com efeito no fim do ciclo.

EcomSmart Tecnologia · CNPJ 00.000.000/0001-00ecomsmart.com.br

Contrato de prestação de serviços08

Cláusula 9 · Proteção de dados

9.1 As partes observarão a Lei nº 13.709/2018 (LGPD). A CONTRATADA atua como operadora dos dados pessoais dos clientes da CONTRATANTE, tratando-os exclusivamente para as finalidades deste contrato.

9.2 Mensagens são enviadas apenas a titulares com opt-in registrado, respeitando a política de descadastro em toda comunicação.

EcomSmart Tecnologia Ltda.
Geraldo Durães · Diretor

Aurora Fashion Comércio Ltda.
Representante legal

Assinado digitalmente · ICP-Brasil / ClicksignPágina 8 de 9

Orientações

Capa

Fundo Névoa, logo no topo, filete azul de 2 pt × 22 mm, rótulo do tipo de documento em caixa alta, título em Figtree 700 (28 pt), objeto em uma linha, número e validade na base. Proposta e contrato usam a mesma capa; muda o rótulo.

Corpo

Figtree 10,5 pt, entrelinha 1,5, justificado só em cláusulas. Títulos de cláusula 14 pt 600. Numeração decimal (9.1, 9.2). Margens 25 mm. Sem negrito em parágrafos inteiros.

Tabela de preço

Sempre com as três colunas do modelo comercial (trial, meses 1–3, cheio). Total em Figtree 700 azul. Bloco azul-50 com as condições resumidas logo abaixo.

Assinaturas

Duas colunas com linha navy, nome da empresa em 600 e cargo em neutro-500. Rodapé indica plataforma de assinatura digital. Sem espaço para rubrica manual.

Papelaria

Cabeçalho de página com nome do documento e número; rodapé com razão social, CNPJ e domínio. Dados fiscais sempre em Figtree 600 tabular.

SmartConversas

Mesmo modelo, logo SmartConversas na capa, "by EcomSmart" no rodapé, exemplos de tabela com planos do CRM. Nunca misturar os dois logos na capa.

17 · Aplicação · Instagram e Ads

17

Novos modelos para Instagram e anúncios

Oito modelos adicionais aos da seção 09, cobrindo carrossel, case, comparação, dica numerada, destaque, anúncio e LinkedIn. Todos partem da mesma grade de 96 px e das mesmas quatro superfícies.

ecomsmart

1/5

5 sinais de que sua base está hibernando

Arraste →

ecomsmart

02

Clientes que compraram uma vez e nunca receberam uma mensagem.

Slide interno de carrossel · número grande, texto curto

ecomsmart · case

"Fechei 31 carrinhos no primeiro mês só com a régua padrão."

Felipe, FootOne
loja de calçados · Shopify

ANTES

2–4%

disparo genérico

COM RFV

13–20%

conversão

ecomsmart · dica

1Mande a 1ª mensagem em até 1h

2Cupom só na 3ª mensagem

3Pare aos domingos

CASES

Capa de destaque: ícone em linha branco sobre Profundo, rótulo em caixa alta

ecomsmart · anúncio

Recupere carrinhos no WhatsApp oficial.

7 dias grátis. Sem cartão.

Testar grátis

Marketing conversacional para e-commerce

WhatsApp · IA · dados

Carrossel (5 a 8 slides)

Capa em Névoa com título e "Arraste →"; contador "1/5" no canto
Slides internos brancos: número grande em azul (Figtree 700, 200 px) + até 18 palavras
Penúltimo slide: dado ou case em navy
Último slide: CTA em Profundo com pílula "Salvar" ou "Testar grátis"

Anúncios Meta Ads

1080×1080 e 1080×1920, texto ≤ 20% da área
Promessa + condição + botão: "Recupere carrinhos. 7 dias grátis. Testar grátis"
Sempre "WhatsApp API Oficial", nunca "ilimitado"
Variante escura (Profundo) para retargeting, clara para prospecção

LinkedIn

Capa de página 1584×396 em Profundo com posicionamento e símbolo
Posts em 1200×1200 seguem a grade do Instagram, com mais texto (até 40 palavras)
Avatar igual ao Instagram
Documentos (PDF carrossel) usam o template de relatório

18 · Aplicação · outras páginas

18

E-mail, apresentação, cartão e telas

Peças que circulam todo dia e que ninguém trata como design, mas o cliente vê. Cada uma tem um modelo fixo.

Assinatura de e-mail

Geraldo Durães · Diretor
EcomSmart · Marketing conversacional para e-commerce
ecomsmart.com.br · +55 84 9 9999-0000

HTML simples, sem imagem além do símbolo (PNG 52 px). Nome em 600, cargo em 400, uma linha de posicionamento, domínio em azul e WhatsApp. Sem frase motivacional, sem banner, sem ícones de rede.

E-mail marketing

EcomSmart

R$ 47.433 influenciados

Boas-vindas foi o módulo de maior retorno. Veja o relatório completo.

Ver relatório

EcomSmart Tecnologia · Natal/RN · Descadastrar

Largura 600 px, coluna única, banner Profundo no topo, um CTA, rodapé com descadastro. Fonte via link com fallback Arial.

Apresentação comercial (16:9)

Mais recompra,
medida.

EcomSmart Hub · 2026

Como funciona

01Capturar

02Segmentar

03Disparar

EcomSmart04

Capa e fechamento em Profundo; slides internos brancos com título 32 pt, no máximo 3 blocos por slide, um dado em azul por slide. Numeração no rodapé direito. Nada de bullet com mais de 8 palavras.

Cartão digital e fundo de vídeo

Geraldo Durães
Diretor · EcomSmart

EcomSmart

Cartão digital (vCard + QR) em navy com símbolo azul; versão impressa 85×55 mm em papel fosco 300 g. Fundo de videoconferência em Profundo com logo pequeno no canto superior esquerdo e símbolo recortado à direita, fora da zona do rosto.

Tela de login

Duas colunas no web: esquerda em Profundo com afirmação e um dado; direita branca com formulário. Mobile: só o formulário com logo no topo. Botão único azul, Google como secundário.

Página de erro e manutenção

Fundo Névoa, símbolo grande em azul-100, título curto ("Essa página não existe."), um link de volta. Sem ilustração, sem humor forçado.

Certificado e crachá

Certificado de treinamento em A4 paisagem, capa Névoa, filete azul, nome em Figtree 700 40 pt. Crachá 54×86 mm em navy com nome em branco e símbolo azul.

19 · Comunicação · tom por canal

19

Tom de voz por canal

A seção 11 define a voz das duas marcas. Aqui, como ela se ajusta a cada canal, com exemplos prontos para copiar. A regra que não muda: frase curta, verbo no início, número quando houver, sem exclamação em série.

Canal	EcomSmart	SmartConversas
Site e landing	"Recupere 9% dos carrinhos abandonados no WhatsApp oficial. Teste grátis por 7 dias."	"Seu time inteiro num só número de WhatsApp. Atenda em segundos, venda mais."
Instagram	Afirmação + dado. "Seu lucro está na recompra. 24% dos clientes que recebem boas-vindas compram de novo."	Pergunta + resposta. "Cliente mandou mensagem às 22h. Quem responde? O time todo, num só número."
WhatsApp (comercial)	"Oi, Felipe. Vi que a FootOne tem 610 clientes sem compra há 90 dias. Quer que eu mostre quanto dá para recuperar? Leva 10 minutos."	"Oi, Ana! Aqui é o Carlos, do SmartConversas 👋 Vi que você pediu uma demo. Prefere hoje à tarde ou amanhã cedo?"
E-mail	Assunto ≤ 45 caracteres com número: "R$ 47.433 influenciados em agosto". Corpo de até 120 palavras e um botão.	Assunto como conversa: "Sua conta já está pronta, Ana". Corpo curto, próximo passo claro.
Suporte	Reconhece, explica a causa, diz o que foi feito e quando resolve. "O disparo das 9h falhou por recusa da Meta (código 131049). Reagendamos para as 11h. Nenhum cliente recebeu duplicado."	Mesma estrutura, mais próxima: "Achei o problema: o número estava desconectado desde 8h. Já voltou e as 14 mensagens pendentes foram enviadas."
Produto (interface)	Rótulo diz o que acontece: "Agendar disparo", "Ativar módulo". Erro diz o que fazer: "Selecione um canal para ver a prévia." Vazio explica e convida: "Nenhum carrinho ainda. A captura começa no próximo abandono."	Interface de chat em segunda pessoa: "Você assumiu esta conversa", "Ana está digitando". Sem jargão de CRM sem explicar.
Mensagens automáticas ao cliente final	Sempre em nome da loja, nunca da EcomSmart. Nome do cliente na primeira frase, uma oferta, um link, opção de sair. "Oi Ana! Seu carrinho ainda está te esperando. Use VOLTA10 e ganhe 10% hoje. Finalizar compra → · Para não receber, responda SAIR."

Banco de frases oficiais

Seu lucro está na recompra.
Automação que vira venda.
Mais recompra, medida.
Bom dia, recompra.
Configure conversando.
SmartConversas: Atenda melhor. Venda mais.
SmartConversas: Seu time, um número.

Emoji e pontuação

Emoji: até 1 por mensagem no WhatsApp e no Instagram (SmartConversas). Zero em site, e-mail institucional, interface e documentos.
Exclamação: no máximo uma por peça. Nunca em série.
Reticências e caixa alta para ênfase: não.
Travessão: evitar; usar ponto.

Palavras proibidas

"ilimitado" (Meta cobra por conversa)
"disparo em massa", "spam", "lista fria"
"revolucionário", "inovador", "solução completa"
"chatbot" (dizer "atendimento com IA")
"RFM" para cliente (usar "RFV")
"cliente" para se referir ao lojista em texto do cliente final

20 · Tokens e kit

20

Para o desenvolvedor e para o Canva

Os mesmos valores em três lugares: CSS/Tailwind no Angular e no WordPress, Kit de Marca no Canva, biblioteca no Figma. Se um valor mudar, muda aqui primeiro.

CSS custom properties

:root { --color-brand-600: #0A5BF0; /* azul de ação */ --color-brand-700: #0849C4; /* hover, texto pequeno */ --color-brand-300: #8DB0FF; /* dado em fundo escuro */ --color-brand-50: #EEF4FF; --color-navy-950: #0B1033; /* texto, sidebar */ --color-navy-900: #121A4A; --color-surface-0: #FFFFFF; --color-surface-50: #F6F8FC; /* fundo de app */ --color-surface-100: #EEF1F7; --color-border: #E1E6F0; --color-text-2: #4A5670; --color-text-muted: #6B7790; --color-ok: #16A34A; --color-warn: #D97706; --color-err: #DC2626; --color-whatsapp: #25D366; --gradient-deep: radial-gradient(ellipse 70% 90% at 85% 115%,rgba(90,140,250,.55),transparent 60%), radial-gradient(ellipse 60% 70% at 0% -10%,rgba(141,176,255,.22),transparent 55%), linear-gradient(135deg,#070B1E 0%,#0B1033 38%,#0A3FB0 76%,#0A5BF0 100%); --gradient-blue: linear-gradient(135deg,#0A5BF0,#5A8CFA); --gradient-mist: linear-gradient(180deg,#FFFFFF,#EEF4FF); --font-sans: "Figtree", system-ui, sans-serif; --font-numeric: "tnum" 1; /* dados e KPIs */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; --container: 1200px; --gutter: 24px; }

No Angular atual, substituir em src/tailwind.input.css: brand-600 #4f54e4 → #0A5BF0, brand-950 #1d1e4c → #0B1033, surface-50 #f8f9fc → #F6F8FC, fonte Inter → Figtree, e aplicar tabular-nums em KPIs e tabelas.

Google Fonts

Kit de Marca no Canva

Cores: #0A5BF0, #0B1033, #F6F8FC, #EEF4FF, #8DB0FF, #25D366.
Fontes: Título Figtree Bold/Semibold · Subtítulo Figtree Medium · Corpo Figtree Regular · Dado Figtree Bold em azul.
Logos: símbolo azul, símbolo branco, horizontal principal, horizontal negativo (PNG e SVG).
Templates: post afirmação (branco), post dado (profundo), carrossel (névoa), Reels capa, story CTA, capa LinkedIn.
Degradê Profundo salvo como fundo: linear 135° com paradas 0% #070B1E, 38% #0B1033, 76% #0A3FB0, 100% #0A5BF0; por cima, dois círculos desfocados: azul #5A8CFA a 55% no canto inferior direito e #8DB0FF a 22% no superior esquerdo.

Checklist antes de publicar qualquer peça

Só Figtree? Só azul, navy, neutros e semânticas?
Há margem em todos os lados (mín. 20 px mobile, 96 px no post)?
Um botão primário por tela? Um degradê por peça?
O número em destaque está em Figtree Bold azul e tem fonte?
Contraste AA garantido? Logo com área de proteção?
Texto passa no "diga · não diga"?

EcomSmartSmartConversas

O que este manual decide

Sumário

Cinco princípios

Mesma família, temperaturas diferentes

EcomSmart

SmartConversas

Arquitetura de marca

O símbolo "E" e o logotipo

Construção e área de proteção

Versões

Usos incorretos

Paleta

Marca

Escala do azul

Neutros (frios, com viés azul)

Semânticas

Proporção de uso

Cores de módulo (apoio, nunca área grande)

Degradês oficiais

Profundo

Azul

Névoa

Regras

Tema escuro do sistema

Contraste (WCAG 2.2)

Figtree para tudo

Escala tipográfica (base 16 px · razão 1,25)

Os gestos que repetem

Grade, margens, rodapé e FAQ

Container e espaçamento

Botões

Rodapé padrão

FAQ

Landing page

Hub e SmartConversas

Instagram e LinkedIn

Blog orientado a busca e a IA

Checklist SEO

Checklist GEO (ser citado por IA)

Tom de voz

Diga · não diga

Camiseta e polo

Orientações

Caneca e copo térmico

Caneca (325 ml, cerâmica)

Copo térmico (500 ml, inox)

Orientações gerais de brinde

Relatórios

Orientações

Contratos e propostas

Orientações

Novos modelos para Instagram e anúncios

E-mail, apresentação, cartão e telas

Tom de voz por canal

Para o desenvolvedor e para o Canva

CSS custom properties

Google Fonts

Kit de Marca no Canva

Checklist antes de publicar qualquer peça

EcomSmart
SmartConversas