Identidade aplicada

Como o manual v2.4 se traduz em decisões concretas neste projeto — na aplicação, nas landings, nos criativos de anúncio e nos relatórios. A fonte de verdade continua sendo a skill /identidade-ecomsmart e o manual em brand/manual-identidade-v2.4.pdf.

Regras que valem em toda peça deste projeto

Os três degradês oficiais

Nenhum outro é permitido. Sem roxo, sem ciano, sem verde.

Profundo — banner, capa, hero escuro, fundo de vídeo, retargeting. As três camadas são obrigatórias, na ordem:

copiarbackground:
  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%);

Azul — CTA de marketing e ícone:

copiarbackground: linear-gradient(135deg, #0A5BF0, #5A8CFA);

Névoa — fundo claro, onboarding, capa de proposta, carrossel institucional:

copiarbackground: linear-gradient(180deg, #FFFFFF, #EEF4FF);

O dado é a assinatura da marca

Esta é a regra que mais aparece neste projeto, porque o produto inteiro é sobre números.

Todo número relevante:

• Figtree 700
• Azul #0A5BF0 em fundo claro, #8DB0FF em fundo escuro
• font-variant-numeric: tabular-nums
• Tracking -3% acima de 32 px
• Sempre acompanhado de período e base

copiar<div class="kpi">
  <b>R$ 84.300</b>
  <span>parados na base de clientes</span>
  <em>últimos 12 meses · 1.847 clientes</em>
</div>

Um número sem período e base não vai ao ar. Nem no relatório, nem no anúncio, nem no painel.

Escala tipográfica

Web / mobile · peso · tracking · entrelinha.

Peso 700 só em display, capa de post e KPI. Sem itálico como ênfase, sem caixa alta em frase, 60 a 70 caracteres por linha no texto corrido.

Layout

• Container 1200 px
• Margens laterais 48 px acima de 1024, 32 px em tablet, 20 px em mobile
• Espaçamento em múltiplos de 4: 4, 8, 12, 16, 24, 32, 48, 64, 96
• Entre seções: 96 px na web, 56 px no mobile
• Raios: 8 input · 12 card · 16 card grande · 24 banner e rodapé · 999 botão e pílula
• Nada encosta na borda

Tema escuro — azul-noite, nunca roxo

Implementado neste site em site/assets/app.css, com o atributo data-theme no elemento raiz e a preferência salva em localStorage. Toda tela nova deste projeto nasce nas duas versões, com seletor visível.

Como aplicar em cada superfície do projeto

Aplicação (Raio-X, Radar, painel)

Sidebar navy #0B1033 com item ativo a 12% de branco. Fundo de conteúdo #F6F8FC. Cards brancos com borda de 1 px e sem sombra. Estado em forma além da cor — pílula, ponto, cadeado — nunca só cor, por acessibilidade.

Aba Configurar em cards numerados: Nome → Canal → Mensagem → Regra → Agendamento → Revisão. O Radar de Preço usa exatamente esse padrão: Produto → Concorrentes → Regra → Canal → Revisão.

Módulo bloqueado fica visível no menu e no painel, com prévia desfocada e um argumento real da base do lojista.

Landing

Nav com links dos produtos, Entrar em secundário e Testar grátis em primário. Hero centralizado de duas linhas com uma palavra em azul, um botão, linha de condições abaixo. Banner Profundo com símbolo e nome do produto em caixa alta. Par de título à esquerda com parágrafo à direita. Cards de benefício em #F6F8FC sem sombra. Bloco navy com três dados em #8DB0FF. FAQ em acordeão com cinco a oito perguntas e schema FAQPage. Rodapé em bloco #F6F8FC raio 24 com quatro colunas, e a linha final fora do bloco com © CNPJ e idioma.

Anúncio na Meta

Texto no criativo em até 20% da área. Estrutura "promessa + condição + botão". Claro para prospecção, Profundo para retargeting. Sempre "WhatsApp API Oficial", nunca ilimitado.

Post 1080×1080 com margem de 96 px, logo e @ no topo esquerdo a 28 px, título ancorado na base entre 72 e 96 px em até três linhas, dado grande entre 200 e 260 px.

Relatório em PDF

A4 retrato, margens 20 mm, PDF/A. Capa Profundo com logo branco, período em caixa alta, nome do cliente em Figtree 700, dado principal do mês em #8DB0FF na base, símbolo recortado no canto. Internas claras com cabeçalho, título 24 pt, corpo 10,5 pt, legenda 8 pt. Gráficos monocromáticos em escala de azul; verde, âmbar e vermelho só para variação.

Tom de voz neste projeto

EcomSmart — analítica e direta. Primeira do plural e você. Título com até oito palavras e um número.

"31 carrinhos recuperados no primeiro mês. Sem mexer em nada."

SmartConversas — próxima e prática. Segunda pessoa, imperativo gentil, até um emoji.

"Seu cliente mandou mensagem às 22h. Quem responde? O time todo, num só número."

CTAs são verbo mais resultado: "Testar grátis", "Ver como funciona", "Ativar módulo", "Conectar minha loja". Nunca "Clique aqui", "Saiba mais" sozinho, "Enviar".

Números: R$ 299 com espaço, milhar com ponto, decimal com vírgula, 20,4%.

Palavras proibidas

Escrever um teste automatizado que falha o build se qualquer uma aparecer em template, copy de anúncio ou texto de e-mail:

ilimitado · disparo em massa · spam · lista fria · revolucionário · inovador · solução completa · 360º · alavancar · chatbot (dizer "atendimento com IA") · espionar (dizer "acompanhar")

Também proibido: exclamação em série, reticências, caixa alta como ênfase, travessão (usar ponto), e chamar o lojista de "cliente" em texto dirigido ao consumidor final.

Checklist antes de entregar qualquer peça

Responder pergunta por pergunta, sem pular:

1. Só Figtree?
2. Só azul, navy, neutros e semânticas?
3. Margem em todos os lados, mínimo 20 px em mobile e 96 px no post?
4. Um botão primário?
5. Um degradê, só em superfície, e dos três oficiais?
6. Dado em Figtree 700 azul tabular, com fonte e período?
7. Contraste AA? (azul sobre branco 5,6:1 · navy 18:1 · #8DB0FF sobre navy 8,1:1)
8. Logo com área de proteção e versão certa para o fundo?
9. Texto passa no "diga / não diga", sem palavra proibida?
10. Marca certa — EcomSmart escuro e analítico, SmartConversas claro e próximo?
11. Tem versão clara e escura?