A marca Viver de Comprinha, do símbolo ao app.
Tudo o que você precisa para criar uma peça, uma página ou uma tela que pareça nossa: estratégia, voz, logotipo, cores, tipografia, movimento, componentes e as regras de aplicação no site, nas landings, no app e nas redes.
Introdução e como usar este manual
Uma marca fica forte quando aparece sempre do mesmo jeito. Este manual junta, numa página só, o que o Brandbook v1.0 definiu e como isso vira site, landing, app e post.
Para quem é
Quem cria peça, página ou tela: sócios, design, conteúdo, desenvolvimento e quem mais falar em nome da marca.
Como ler
Seções 1 a 13 são a marca. Seções 14 a 18 mostram a aplicação. A 19 trata de IA e a 20 fecha com o checklist de revisão.
Fonte da verdade
As cores, fontes, raios e a sombra vêm de /static/marca.css (site) e /static/app-marca.css (app). Não crie tokens novos.
Em construção. A estratégia e o público vêm de hipóteses do time, ainda não validadas com afiliados de verdade. As personas são ilustrativas. Valores de impressão, fotos e a assinatura sonora ainda vão ser definidos (veja a seção 20).
Para quem falamos e por que existimos
Falamos com pessoas que divulgam achadinhos e ganham comissão por isso. Umas já vivem disso, outras querem uma renda extra. As duas começam do mesmo lugar: o link, o texto e o grupo.
Público e personas ilustrativas
Carla
Vive de comissão"Divulgo achadinhos todo dia, em vários grupos de WhatsApp e no Instagram. Já vivo das comissões, mas passo horas copiando link e repetindo a mesma mensagem."
- O que pesa
- Tempo perdido em tarefa repetitiva. Medo de perder o número do WhatsApp.
- O que busca
- Ganhar horas no dia, achar ofertas boas antes e manter o jeito dela de falar.
- Como ajudamos
- Link e texto prontos, editáveis, e ofertas do nicho com nota.
Rafael
Quer renda extra"Tenho outro trabalho e quero uma renda extra. Não sei por onde começar nem quanto tempo isso toma. Desconfio de quem promete dinheiro fácil."
- O que pesa
- Falta de clareza sobre o primeiro passo e desconfiança de promessa de ganho.
- O que busca
- Começar simples, testar sem compromisso e ver se compensa.
- Como ajudamos
- Teste de 7 dias, passo a passo claro e linguagem honesta.
Personas ilustrativas, criadas a partir de hipóteses do time.
Ajustado ao que o produto faz hoje. IA e radar estão em Próximos passos.
Propósito
Tirar o trabalho braçal de quem divulga achadinhos, para sobrar tempo de achar boas ofertas.
Proposta de propósito, a confirmar com os sócios.
Territórios
Os assuntos em que a marca fala com autoridade. Se o conteúdo não cabe em nenhum, provavelmente não é nosso.
Achadinhos e ofertas
O que está barato, em alta e vale a pena mostrar.
Divulgação e comunidade
Grupos, Instagram e WhatsApp: como falar com quem acompanha.
Renda por comissão
Como funciona, com honestidade e sem promessa de ganho.
Ferramentas e tempo
Automação para fazer em minutos o que toma horas.
Arquétipos
Cara comum · gente como a gente
Fala como a pessoa fala, sem pose. Mostra que o caminho é simples e que qualquer pessoa pode começar. Dá confiança porque não se coloca acima de ninguém.
Explorador · quem acha primeiro
Gosta de descobrir: a oferta certa, o produto da vez. Traz curiosidade e energia para o dia a dia de quem divulga.
Atributos
Proposta de valor
Cliente
Pessoas que divulgam achadinhos: quem vive de comissão e quem quer uma renda extra.
Ofertas
Link de afiliado, texto pronto e editável, envio para o grupo com a sua aprovação e ofertas do seu nicho com nota.
Razões para acreditar
Teste de 7 dias, texto sempre editável antes de enviar e aviso de afiliado incluído em tudo.
Compromissos
Não prometemos ganho. Não escondemos cobrança. Dizemos o que acontece quando o teste acaba.
Valores compartilhados: honestidade, praticidade e comunidade.
Ajustado ao que o produto faz hoje. IA e radar estão em Próximos passos.
Voz e tom
Falamos como alguém que está do lado de quem divulga: perto, prático e honesto. Se o tom muda de peça para peça, a pessoa não reconhece quem está falando.
Quem fala com quem
Nós
Quando a marca fala dela mesma: no site, nos avisos e nas respostas do suporte.
Nós cuidamos do link e do texto. Você cuida do seu grupo.Você
Sempre que falamos com a pessoa. Nunca "o usuário" ou "o cliente" dentro do app.
Cole o link e copie a mensagem.Preço, aviso e emoji
Preço
Sempre com vírgula nos centavos. Desconto mostra os dois valores.
De R$ 89,90 por R$ 49,90Aviso
Toda peça com link de afiliado leva o aviso. Preço de oferta avisa que pode mudar.
Link de afiliado. O preço pode mudar.Emoji
Só quando carrega informação. Nunca como enfeite de título nem em sequência.
✅ Link pronto · ✅ Texto editável- Sem exclamação e sem travessão. Use ponto ou vírgula. A energia vem do verbo, não da pontuação.
- CTA principal: "Testar 7 dias grátis". Perto dele: "Sem cartão para começar. No fim do teste, você escolhe um plano ou para. Não cobramos sozinhos."
- Nome da marca: Viver de Comprinha, com V e C maiúsculos. Só o @viverdecomprinha vai todo em minúsculas.
Dizemos e não dizemos
Vocabulário
Palavras que usamos
Palavras que evitamos
Manifesto
Achadinho bom não pode se perder no meio do dia.
Quem divulga sabe: o trabalho de verdade é achar a oferta certa, e não copiar link, caçar texto e repetir mensagem grupo por grupo.
A gente pega o trabalho braçal. Você fica com o olho, o jeito e a conversa com o seu grupo.
Sem promessa grande, sem atalho mágico, sem letra miúda. Só ferramenta honesta para quem divulga todo dia, ou só quer começar.
Viver de comprinha: uma oferta de cada vez.
Logotipo
A assinatura é o símbolo e o nome. A sacola de compras sorrindo resume o produto: a comprinha que deixa a pessoa satisfeita. O nome é escrito em Bricolage Grotesque 800, em duas linhas quando o espaço pede: Viver de / Comprinha.
O símbolo: sacola, alça e sorriso
- 1
Sacola
A compra, o achadinho. Cantos arredondados, amigável, sem cara de loja grande.
- 2
Alça única
Larga e redonda. Mantém o ar de bolsa de compras e evita virar cadeado.
- 3
Sorriso
A oferta que deixa a pessoa feliz. É curto, fica dentro da sacola e é a única parte lima.
O sorriso nunca vira seta nem vai para fora da sacola, e a sacola nunca é laranja. É assim que o símbolo se mantém diferente das grandes lojas.
Versões da assinatura
O nome sempre em Bricolage Grotesque 800, "Viver de" e "Comprinha" com V e C maiúsculos.
Versões por cor de fundo
Lavanda: versão principalBranco: versão principal
Violeta: símbolo lima, nome lavanda
Ameixa e tema escuro: símbolo limaNão aplicamos sobre
Lilás, lima e fotos sem proteção. Sobre foto, a assinatura vai em uma caixa lavanda ou ameixa.
Por quê
O símbolo lima sobre fundo claro tem 1,3:1 de contraste e some. O lilás é claro demais para o símbolo violeta.
Área de proteção
Em volta da assinatura existe um espaço que nada pode invadir: nem texto, nem borda, nem outro logo. Ele mede x = metade da largura do símbolo. Em peças pequenas, o mínimo é 8 px de respiro, mesmo que a conta dê menos.
Redução máxima
Abaixo destes tamanhos a assinatura perde legibilidade. As amostras estão no tamanho real.
Como assinamos as peças
- Uma assinatura por peça, em um canto, com a área de proteção livre. Nunca no centro, nunca sobre um rosto.
- Feed 4:5: canto inferior esquerdo. Story: topo, fora da faixa de interface. Banner: canto direito.
- Logos de lojas: não usamos ao lado da nossa assinatura. O nome da loja entra em texto, assim ninguém confunde de onde vem a oferta.
- Selo de oferta (ex.: 7 dias grátis) só onde não houver outro elemento lima na peça.
Usos indevidos
Também nunca
- Sacola baixa com alça em arco: vira cadeado. Mantenha o desenho original.
- Sorriso virando seta: muda o significado e se aproxima de marcas de lojas.
- Mais de um lima na peça: perde o destaque.
- Cifrão, moedas e dinheiro na assinatura: parece promessa de ganho.
- Assinatura sobre foto sem caixa: perde contraste.
- Efeitos: sombra, brilho ou contorno. O símbolo é chapado.
Downloads dos logotipos (SVG)
Arquivos vetoriais oficiais. "Lavanda" serve para fundos claros (lavanda e branco), "violeta" para fundo violeta e "ameixa" para fundo ameixa e tema escuro.
Horizontal · fundo clarohorizontal-lavanda.svg
Horizontal · fundo violetahorizontal-violeta.svg
Horizontal · fundo ameixahorizontal-ameixa.svg
Vertical · fundo clarovertical-lavanda.svg
Vertical · fundo violetavertical-violeta.svg
Vertical · fundo ameixavertical-ameixa.svg
Símbolo · fundo clarosimbolo-lavanda.svg
Símbolo · fundo violetasimbolo-violeta.svg
Símbolo · fundo ameixasimbolo-ameixa.svg
Avatar · violetaavatar.svg · perfil e grupo
Avatar · lavandaavatar-lavanda.svg
Faviconfavicon.svg
Cores
Cinco cores, cada uma com um papel. Fundo lavanda, cartão branco, texto ameixa, ação violeta e um único acento lima.
#5B21B6RGB 91, 33, 182--violetaAção: botão, link e ícone ativo. É a cor da sacola.
#A78BFARGB 167, 139, 250--lilasApoio: capas, ilustrações e blocos. Nunca como cor de texto.
#F3EEFFRGB 243, 238, 255--lavandaFundo de páginas, telas e peças.
#C8F03CRGB 200, 240, 60--limaAcento: só um elemento por peça. É o sorriso.
#1F1535RGB 31, 21, 53--ameixaTexto principal e fundo escuro.
Tons derivados só de leitura (mesmo matiz, para borda e texto de apoio): --texto-apoio #5A4E78, --texto-suave #6E6390, --borda #E2D8FA, --borda-forte #CDBDF6, --lavanda-2 #EAE1FF, --lavanda-3 #DCCEFF, --violeta-escuro #4C1D95 (hover), --sucesso #1B7A47 e --erro #B42318. Valores de impressão (CMYK e Pantone) serão definidos com a gráfica.
Proporção e papéis
Fundo e texto
Fundo é lavanda. Cartões são brancos. Texto é ameixa; apoio é um roxo acinzentado.
Ação
Violeta para botão principal, link e ícone ativo. Texto sobre ele é branco.
Acento
Lima só como preenchimento, com texto ameixa por cima. Um por peça: o botão de ação ou o selo.
Combinações e contraste
Texto precisa de pelo menos 4,5:1. Lima e lilás nunca viram texto sobre fundo claro.
Também conferimos: violeta sobre lavanda 7,9:1 (link), texto de apoio #5A4E78 sobre lavanda 6,6:1 e sobre branco 7,5:1.
A regra do lima único
O lima é o sorriso da marca: aparece pouco para chamar atenção. Em cada peça, bloco de página ou tela do app, só um elemento lima: o botão que faz a comprinha andar ("Gerar link", "Testar 7 dias grátis" num bloco escuro) ou um selo. Se já existe um, o segundo vira violeta ou contorno.
O símbolo dentro da assinatura não conta como acento: ele é o logotipo. Mas evite colocar um botão lima colado na assinatura.
Em fundo ameixa: lima só em um elemento preenchido (botão ou selo) ou no símbolo. Olho, ícones e textos ficam em lavanda (#F3EEFF) ou #D9CEF5.
Tipografia
Duas fontes gratuitas, servidas pelo próprio site: Bricolage Grotesque para o nome e os títulos, Figtree para todo o resto.
Bricolage Grotesque
Tem personalidade e formas redondas, que conversam com a sacola. Sempre no peso 800 (ExtraBold) e com espaçamento levemente fechado (−0,02em).
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 R$ % @
Figtree
Limpa, legível em tela pequena. Texto corrido em 400, rótulos em 500 e 600, destaque e preço em 700.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 R$ % @
Escala
A escala do app e das peças. No site, os três primeiros degraus são fluidos para caber do celular ao desktop (--t-display-xl 40 a 72 px, --t-display-lg 32 a 48 px, --t-titulo 24 a 32 px).
Extensão do site, a validar no brandbook v1.1.
Amostras no tamanho real (display-xl e display-lg reduzem no celular para não quebrar a tela). Altura de linha: 1,05 a 1,15 nos títulos, 1,5 a 1,6 no texto. Texto corrido com no máximo 70 caracteres por linha.
Grid e espaço
Espaço em múltiplos de 4. Quanto mais importante o bloco, mais ar em volta.
Barras em 2× o tamanho real. Os sete primeiros valem para app e peças; 64, 96 e 128 só para o respiro das seções do site.
Extensão do site, a validar no brandbook v1.1.
Margens e colunas
margem 16 px
margem 32 px · máx. 1200 px
1080 × 1350
margem 32 px
- Colunas do site:
.grade-2/3/4viram 1 coluna no celular, 2 a partir de 720 px e 3 ou 4 a partir de 1024 px..dividirpõe texto e tela lado a lado a partir de 960 px. - Seções: 64 px de respiro no celular e 96 px no desktop. Cabeçalho de seção com até 760 px de largura.
- Entre cartões: 16 px; 24 px em grades grandes.
Formas, raios e a única sombra
Cantos grandes e amigáveis, como a sacola. Sem gradiente e sem borda colorida só de um lado: a forma já é o destaque.
Sombra
Uma só: no cartão de oferta (.oferta-c), sobre o fundo lavanda. --sombra-oferta: 0 12px 32px -12px rgba(91,33,182,.28).
Sem sombra em botão, em texto ou em outros cartões. Os cartões comuns usam borda lilás clara (--borda). As molduras de tela também não têm sombra: o navegador usa borda ameixa de 6 px e o celular, o próprio corpo ameixa.
Iconografia
Um só conjunto de ícones de linha: traço de 2 px, pontas e cantos arredondados, em ameixa ou violeta. Ícone sem texto leva rótulo. Emoji não substitui ícone.
Como desenhar um ícone novo
- Grade de 24 × 24, com 2 px de respiro nas bordas. Traço 2 px,
stroke-linecapestroke-linejoinredondos, sem preenchimento. - No código:
<svg class="ic" viewBox="0 0 24 24" aria-hidden="true">. A cor vem decurrentColor. - Tamanhos: 20 px em lista, 24 px padrão, 28 px em destaque. Dentro de
.icone-bloco(48 px, lavanda) nos cartões. - Nada de cifrão, moeda ou logo de loja como ícone.
Ilustração e elementos gráficos
A ilustração é geométrica e feita com as próprias formas da marca: blocos de cantos redondos, círculos e o sorriso como detalhe.
Regras da ilustração
- Só as cinco cores. Um detalhe lima.
- Formas chapadas: blocos com raio 24, círculos, o sorriso em arco.
- Sem contorno fino, sem sombra e sem rosto realista.
- Círculos não viram moedas com cifrão: a marca não mostra dinheiro.
Elementos gráficos
Dois elementos montam o clima: os blocos de canto redondo (.blocos) organizam o espaço, e o sorriso em arco repetido (.textura-sorriso) vira textura em capas e fundos. Um padrão por peça, e ao menos metade da área livre.
Mostrados juntos só como catálogo. Numa peça real, um bloco lima por vez.
A textura ocupa um canto. A outra metade fica livre para o texto.
Fotografia
A foto mostra a pessoa por trás do link, e não o dinheiro. Ela precisa parecer algo que quem nos acompanha poderia ter feito hoje, com o celular que tem.
Somos gente de verdade
Pessoas comuns, de idades, corpos e tons de pele variados. Sem pose de banco de imagem.
Somos do dia a dia
Cozinha, sala, home office, café. Luz natural e ambientes brasileiros de verdade.
Somos úteis
O celular está na mão, a oferta está na tela, a pessoa está resolvendo algo. Nada de dinheiro na mão.
Faça
Luz natural. Celular em uso. Ambientes comuns. Um toque lilás ou lavanda em um objeto (almofada, sacola, caneca), sem tingir a foto inteira.
Não faça
Dinheiro vivo, carro ou casa de luxo, pessoa gritando de felicidade, filtro forte e logos de lojas aparecendo na tela.
Ainda não temos fotos. Até existirem imagens reais ou autorizadas, não usamos banco de imagem nem rosto gerado. No lugar: telas reais do app, ilustração geométrica e o chat simulado.
Diretriz para as fotos futuras
Antes de aprovar uma foto
- Gente de verdade: pessoas comuns, de idades, corpos e tons de pele variados, sem pose.
- Do dia a dia: cozinha, sala, home office, café, com luz natural.
- Útil: o celular na mão e a oferta na tela. Um toque lilás ou lavanda num objeto.
- Autorizada: imagem real com direito de uso por escrito.
- Dinheiro, luxo, grito de felicidade, filtro forte, logo de loja na tela, rosto gerado ou banco de imagem.
Até existirem fotos, a ilustração geométrica ocupa o lugar delas. Nada de quadro vazio na página.
Motion: suave, útil, sem piscar
O movimento existe para guiar o olho e dar vida à oferta, nunca para enfeitar. Tudo vem de /static/motion.js e das classes de marca.css, sem biblioteca externa.
Suave
Entradas com desaceleração longa (--ease). Nada brusco, nada que chacoalhe a tela.
Útil
Cada movimento conta algo: o que é clicável, o que entrou, o que mudou, a ordem de leitura.
Sem piscar
Nada pisca, nada passa de 3 flashes por segundo, nada se mexe sozinho sem parar no reduzir movimento.
Durações e curvas
As duas curvas da marca
--ease para entradas e trocas. --ease-mola só para o "pulinho" de botão e ícone. Linear só na faixa rolante.
Tabela de tempos
| Movimento | Duração | Curva |
|---|---|---|
| Cor de hover | 0,2 s | padrão |
| Botão sobe 2 px | 0,35 s | --ease-mola |
| Sublinhado do menu | 0,35 s | --ease |
| Troca de aba | 0,6 s | --ease |
| Revelar ao rolar | 0,8 a 0,9 s, +90 ms por item | --ease |
| Contador, sorriso | 1,4 s | desacelera |
| Flutuar | 6 s (lento 9 s), em loop | ease-in-out |
| Faixa rolante | 40 s, em loop | linear |
Catálogo dos movimentos do site
Demonstrações vivas. Com "reduzir movimento" ligado no seu aparelho, elas aparecem paradas no estado final, como no resto do site.
Revelar ao rolar
Sobe 28 px e aparece, um item depois do outro. data-anima="sobe|esq|dir|zoom" ou data-anima-grupo no pai.
Palavra que troca
Ache a ofertatendênciacomprinha
Uma palavra do título troca a cada 2,6 s. Use uma vez por página, no herói. .palavra-troca>span
Chat que digita
Os balões entram um a um quando o chat aparece. .chat-sim[data-chat]
Flutuar
Sobe e desce 12 px em 6 s. Só em um elemento decorativo por tela. .flutua, .flutua.lento
Inclinar
Com mouse, o cartão inclina até 8° seguindo o ponteiro. No toque, fica parado. .inclina
Paralaxe
Camadas de fundo andam em velocidades diferentes ao rolar. Só em formas decorativas, nunca no texto. .paralaxe[data-velocidade]
Contadores
Só números reais do produto. Nunca ganho, faturamento ou quantidade de clientes. b[data-contar]
Faixa rolante
Lista duplicada em loop de 40 s, pausa ao passar o mouse. .faixa>.trilho>.item
Sorriso que se desenha
O traço do sorriso aparece em 1,4 s. Reservado ao herói e às assinaturas animadas. .sorriso-anima
A regra do reduzir movimento
Quando a pessoa liga prefers-reduced-motion, tudo fica no estado final: o conteúdo aparece sem animar, a faixa vira lista, o chat mostra todos os balões, os contadores já mostram o número e paralaxe e inclinação desligam. Nenhuma informação depende de movimento. Toda animação nova precisa respeitar esta regra no CSS e no JS.
Som
O som aparece sobretudo nos Reels e nos vídeos curtos. Precisa soar leve, rápido e do dia a dia, como a conversa de um grupo de ofertas.
Ritmo
Animado, de médio a rápido. Ponto de partida: de 100 a 125 BPM.
Clima
Leve, de dia bom. Energia sem exagero e sem locutor gritando.
Timbres
Violão ou guitarra limpa, palmas, baixo marcado e sons curtos de notificação.
Evitar
Música dramática e efeito de moedas caindo ou de cofre: parecem promessa de ganho.
Uso em vídeo
- Trilha sempre com licença de uso comercial: biblioteca do próprio canal ou música livre de direitos.
- Voz natural e clara, como uma mensagem de voz para o grupo. A voz fica acima da trilha.
- Legenda sempre, porque muita gente assiste sem som. "Link de afiliado" aparece na tela.
Assinatura sonora: dois toques curtos e ascendentes
Como um "plim-plim" de mensagem chegando. Dura menos de um segundo e fecha os vídeos e as notificações do app.
Rascunho sintetizado no seu navegador só para dar a ideia. Toca apenas quando você clica. Não é a assinatura final.
Componentes de interface
Exemplos vivos dos componentes prontos de marca.css. Copie a classe, não reinvente o estilo.
Botões
.btn-violeta, .btn-contorno
.btn-lima (um por bloco, o que faz a comprinha andar)
.btn-claro
Selos, avisos e nota honesta
O preço pode mudar.
Clique não é venda. A comissão aparece só no relatório oficial da loja.
.selo, .selo-ameixa, .selo-lima (conta como o lima do bloco), .aviso-afiliado (escreve "Link de afiliado ·" sozinho) e .nota-honesta.
Faixa de lançamento
- Quando usar: no topo de todas as páginas do site, acima do topo fixo, enquanto o envio direto para os grupos não estiver liberado para todo mundo.
.aviso-lancamentocomrole="note". - Texto: o que já funciona, o que está sendo liberado e o link "Entenda" para a página de Transparência. Sem urgência e sem lima.
- Remover de todas as páginas (e do
_modelo-pagina.html) quando o envio for liberado.
Cartões
Cartão branco
O padrão. Raio 24, borda lilás clara, sem sombra. .cartao
Cartão lavanda
Sobre seção branca. .cartao-lavanda
Cartão ameixa
Para o que é sério: privacidade, riscos. .cartao-ameixa
Cartão de oferta e campos
.oferta-c
Erro e sucesso sempre com texto e ícone, nunca só com cor.
Chat simulado, abas e FAQ
Cole o link do produto e receba o texto pronto para editar. Use as setas do teclado para trocar de aba.
Ofertas do seu nicho, cada uma com nota de 0 a 100 e o motivo.
5, 10, 15 ou 20 ofertas por dia, na janela e nos dias que você escolher.
O texto pronto sai do jeito que eu escrevo?
O que acontece no fim do teste?
FAQ: pergunta como a pessoa faria, resposta curta e honesta. .faq-s details
Plano
Criador
R$ 69 a cada 30 dias
- 3 grupos
- Até 15 ofertas por dia e relatórios
Valores de lançamento, podem mudar. O plano em destaque usa borda violeta de 2 px, nunca lima. Pago por Pix a cada 30 dias.
Aplicação no site institucional
A promessa é o que o produto faz, não o quanto a pessoa vai ganhar. Toda página segue a mesma espinha, partindo de _modelo-pagina.html.
Topo e rodapé iguais em tudo
Copie de _modelo-pagina.html sem editar textos ou links. Marque a página atual com aria-current="page".
Herói
Um h1 por página. Título objetivo, uma frase de apoio, CTA "Testar 7 dias grátis" e logo abaixo o que acontece no fim do teste. Produto visível: tela real ou chat simulado.
CTA recorrente
A cada 2 ou 3 seções, um CTA. O mesmo texto em toda página. Secundário em contorno.
Rodapé
Aviso de afiliado, "não prometemos renda", não afiliação a WhatsApp, Meta e lojas, termos e privacidade.
Cor de fundo das seções: quando usar
Lavanda · padrão
Fundo da página e da maioria das seções. Herói sempre em lavanda. .secao
Branca · alternância
Para separar uma seção da outra e destacar grades de cartões lavanda. Alterne lavanda e branca. .secao-branca
Ameixa · o que é sério
Manifesto, transparência, privacidade, riscos. No máximo uma por página, fora o rodapé. Olho e ícones em lavanda; lima só em um elemento preenchido (botão ou selo) ou no símbolo. .secao-ameixa
Violeta · fechamento
Reservado ao CTA final ou a uma faixa de chamada. Uma por página. Botão lima ou claro. .secao-violeta, .cta-faixa
Ache a oferta, gere o link, divulgue no grupo.
Sem cartão para começar. No fim do teste, você escolhe um plano ou para. Não cobramos sozinhos.
Exemplo vivo de .cta-faixa: o lima é o único acento do bloco.
Páginas do site
Prova que usamos
Telas reais do app com a legenda "Tela real do app, com dados de exemplo.", números do produto (31 nichos, 3 tons, 7 dias, nota de 0 a 100), o que não fazemos e FAQ honesta.
Prova que não usamos
Depoimentos, número de clientes, logos de "empresas que confiam", prints de ganho. Não temos e não inventamos.
Landings A, B e C
Três páginas de campanha, uma para cada momento de quem divulga. Mesma marca, mesma espinha do site, promessa diferente.
- Endereço
- /lp/a
- Público
- Quem já divulga todo dia, em vários grupos, e vive de comissão (como a persona Carla).
- Promessa
- Ganhe de volta as horas de copiar link e repetir mensagem.
- Tom
- De colega de trabalho: direto, mostra o fluxo, respeita quem já sabe.
- Prova
- Tela real de Gerar link e de Horários, formato da mensagem, aviso de risco do número antes de conectar.
- Herói com a promessa e a tela do Gerar link.
- O que você ganha de volta: link, texto e envio num lugar só.
- Texto pronto em 3 tons, sempre editável, com o seu jeito.
- Horários sem rajada: 5 a 20 ofertas por dia, com a sua aprovação.
- Vários grupos e link do grupo com vaga.
- Seu número em primeiro lugar: o que avisamos antes de conectar.
- Planos Criador e Pro em destaque, valores de lançamento.
- FAQ e CTA final.
- Endereço
- /lp/b
- Público
- Quem tem outro trabalho e quer uma renda extra, mas não sabe por onde começar (como a persona Rafael).
- Promessa
- Comece simples: cole um link e veja a mensagem pronta.
- Tom
- Didático e calmo. Explica o que é afiliado e diz com todas as letras que não prometemos ganho.
- Prova
- Checklist "Começar" real, passo a passo em 4 etapas, o que acontece no fim do teste, o que não fazemos.
- Herói com a promessa e o chat simulado.
- Como funciona em 4 passos: conectar a loja, escolher o nicho, gerar o link, mandar pro grupo.
- Quanto você ganha depende de você e das lojas: explicação honesta da comissão.
- Ofertas do nicho com nota para não começar do zero.
- Teste de 7 dias, sem cartão, com o que acontece no fim.
- Plano Começar em destaque.
- FAQ de iniciante e CTA final.
- Endereço
- /lp/c
- Público
- Quem já tem um grupo de ofertas e quer mais gente entrando e ficando.
- Promessa
- Um link para o grupo, ofertas boas no ritmo certo e números honestos.
- Tom
- Animado e prático, de quem cuida de comunidade. Sem promessa de crescimento.
- Prova
- Tela real do Link do grupo e de Relatórios (entradas, saídas, cliques), com "clique não é venda".
- Herói com a promessa e a tela do Link do grupo.
- Link único que leva ao convite do grupo com vaga.
- Ofertas do nicho com nota de 0 a 100 e o motivo.
- Ritmo sem rajada, para o grupo não cansar.
- Relatórios honestos: membros, entradas, saídas, cliques.
- Privacidade: não lemos conversas nem guardamos telefone dos membros.
- Planos Criador e Pro, FAQ e CTA final.
Regras comuns de CTA e de prova
CTA
- Um só CTA principal: "Testar 7 dias grátis", repetido no herói, no meio e no fim.
- Sempre com a nota do teste por perto. Secundário em contorno ("Ver como funciona").
- Topo e rodapé completos: a landing não esconde o resto do site.
- Sem contagem regressiva, sem "últimas vagas", sem urgência falsa.
Prova
- Só o que o produto faz hoje. O que ainda não existe fica numa seção "Em breve", rotulada.
- Telas reais com legenda e
altdescritivo. - Persona citada sempre como ilustrativa.
- Sem depoimento, sem número de clientes, sem logo de loja.
Aplicação no app
Tela clara, cartões brancos e botão principal violeta. Em cada tela, um só acento lima: o botão que faz a comprinha andar.
- Fundo lavanda, cartões brancos com raio 24.
- Ação violeta (
.btn-primario). Um único lima por tela: o botão "Gerar link" (.btn-lima). - Campos com contorno violeta, raio 16.
- Botões pílula com 48 px de altura mínima.
- Erro e sucesso com texto, não só com cor.
- Texto pronto sempre editável, rotulado como rascunho, com "Gerar de novo" ao lado. Nada vai para o grupo sem aprovação.
- Títulos em Bricolage 800, o resto em Figtree.
Telas reais
Tokens do app ao lado dos do site
O app roda sobre o painel v3; app-marca.css remapeia os tokens dele para a marca. Os valores são os mesmos do site, com nomes diferentes.
| Papel | Site · marca.css | App · app-marca.css | Observação |
|---|---|---|---|
| Fundo | --lavanda #F3EEFF | --papel #F3EEFF | Igual |
| Cartão | --branco #FFFFFF | --bg #FFFFFF | Igual |
| Texto | --texto #1F1535 | --ink #1F1535 | Igual |
| Texto de apoio | --texto-apoio #5A4E78 | --ink-2 #5A4E78 | Igual |
| Texto suave | --texto-suave #6E6390 | --muted #6E6390 | Igual |
| Ação | --violeta #5B21B6 | --azul #5B21B6 | Nome herdado do painel |
| Ação, hover | --violeta-escuro #4C1D95 | --azul-700 #4C1D95 | Igual |
| Apoio | --lilas #A78BFA | --ceu-400 #A78BFA | Igual |
| Acento | --lima #C8F03C | --lima #C8F03C | Um por tela |
| Borda | --borda #E2D8FA | --borda #E2D8FA | Igual |
| Borda forte | --borda-forte #CDBDF6 | --borda-2 #CDBDF6 | Contorno dos campos |
| Lavanda de apoio | --lavanda-2 #EAE1FF | --ceu-100 #EDE6FF | Diferença mínima, mesmo papel |
| Sucesso e erro | --sucesso #1B7A47 · --erro #B42318 | --ok · --erro | O app tem também fundos e atenção |
| Raio de campo e cartão | --r-md 16 · --r-lg 24 | --r-input 16 · --r-card 24 | Igual |
| Alvo de toque | .btn 48 px | --vdc-alvo 48px | Igual |
| Foco | --foco 4 px, 35% | --foco 4 px, 30% | Mesmo anel violeta |
Tema escuro
No tema escuro, o fundo vira ameixa (--papel #1F1535), os cartões #2A1E47, o texto lavanda e a ação um violeta claro (#C4B1FF no texto, botão #7C4DDB). O símbolo passa para a versão lima (simbolo-ameixa.svg) e o item ativo do menu fica em lima.
Continua valendo: um lima por tela, erro e sucesso com texto, contraste de 4,5:1.
Visão geralRedes, mensagens e teste grátis
Os layouts são exemplos, não modelos obrigatórios. O que não muda: uma assinatura por peça, um lima por peça e o aviso de afiliado sempre visível.
Instagram: perfil
Viver de Comprinha
@viverdecomprinha A confirmar
Link pronto, texto editável e envio para o grupo. Teste 7 dias grátis.
O @ ainda precisa ser checado e registrado. Avatar no recorte redondo e botão violeta: o lima fica para os posts.
Instagram: feed 4:5 (1080 × 1350)
Colou o link, saiu a mensagem.
Link de afiliadoAchou? Gere o link.
Link de afiliadoSeu grupo de ofertas, sem trabalho braçal.
Link de afiliadoAssinatura no canto inferior esquerdo, margem de 32 px, aviso no outro canto.
Stories e Reels: 1080 × 1920
Colou o link, saiu a mensagem.
Link de afiliadoComo gerar o link em 10 segundos
Link de afiliado- Faixas livres em cima e embaixo (as linhas tracejadas): é onde o Instagram põe a interface. Referência prática: cerca de 250 px no topo e 340 px na base.
- "Link de afiliado" sempre visível, fora das faixas.
- Capa de Reels com o símbolo e o título em Figtree 700. Legenda sempre no vídeo.
- Assinatura no topo, fora da faixa de interface.
Onde a assinatura entra em cada peça
Colou o link, saiu a mensagem.
Colou o link, saiu a mensagem.
Seu grupo de ofertas, sem trabalho braçal.
Uma assinatura por peça, em um canto. Nunca no centro, nunca sobre um rosto.
WhatsApp: grupo e mensagem
- Uma oferta por mensagem. Nome do produto em negrito, os dois preços, o link e o aviso.
- O "De R$" só entra quando os dois preços foram conferidos.
- Sem sequência de emojis e sem promessa de ganho.
Avatar no recorte redondo
O ícone do grupo e o perfil usam o avatar: a sacola fica centralizada e não corta no círculo.
Teste de 7 dias
Três mensagens acompanham o teste. Cada cartão tem um só lima: o botão que leva ao próximo passo. São exemplos de tom: os textos de cobrança dependem do que o produto decidir.
Bem-vinda, bem-vindo
Cole seu primeiro link e veja o texto pronto. Sem cartão para começar.
Onde aparece: no app, na tela Começar, logo depois de entrar.Está gostando?
Escolha o plano quando quiser.
Onde aparece: no app, como aviso no topo da Visão geral.Seu teste acaba hoje
Aqui dizemos o que acontece depois: se cobra, quanto e quando. Sem letra miúda.
Onde aparece: no app, como aviso no topo da Visão geral.O e-mail ainda não envia lembrete do teste: por enquanto as mensagens aparecem só dentro do app. Não diga "veja quanto tempo você já ganhou", porque não medimos isso.
Resumo da identidade visual
IA: a IA rascunha, a pessoa decide
O uso de IA deve ser transparente, editável e responsável. Ela adianta o trabalho, mas nunca fala pela pessoa sem que ela veja, edite e aprove.
Hoje o texto pronto sai de modelos prontos, não de IA. Não diga que é IA nas peças. Quando a IA entrar, vale tudo abaixo.
Diretrizes para texto
- Sempre em campo editável, com "Gerar de novo" ao lado.
- Mostrado como rascunho até a pessoa enviar.
- Preço e link conferidos antes do envio: a IA pode errar.
- Mantém o jeito da pessoa: ela escolhe o tom.
- Leva o aviso "Link de afiliado" sempre.
- Sem promessa de ganho e sem "menor preço da internet".
Diretrizes para imagem
- Podemos gerar imagens de referência para ilustrar a comunicação da marca.
- Podemos usar imagem gerada em peça da marca, avisando quando puder parecer foto real.
- Nunca mostrar produto com imagem inventada: a foto é sempre a oficial da loja.
- Nunca gerar rosto de pessoa real ou celebridade para indicar produto.
- Nunca gerar logo de loja ou de marca de terceiros.
Riscos e como respondemos
| Risco | O que pode acontecer | Como respondemos |
|---|---|---|
| Envio no WhatsApp | O envio por canal não oficial pode levar à limitação do número de quem usa. | Avisar antes, pedir confirmação e deixar a pessoa decidir. |
| Promessa de ganho | Texto gerado pode soar como "renda garantida". | Filtrar o texto e reforçar o aviso em toda mensagem. |
| Preço e estoque | A IA pode errar ou usar preço antigo. | Mostrar o preço da loja e pedir conferência antes de enviar. |
| Dados e grupos | Listas de contatos e grupos têm dados pessoais. | Pedir só o necessário e seguir a LGPD, com revisão jurídica. |
Checklist de revisão e governança
Antes de publicar qualquer peça, página ou tela, passe por esta lista. Se um item falhar, a peça volta.
Governança
Quem cuida
Tainara, sócia fundadora: marca, marketing e divulgação. Geraldo Durães: produto. Dúvida de aplicação vai para quem cuida da marca antes de publicar.
Versão
Brandbook v1.0, outubro de 2026. Este manual acompanha o brandbook e os arquivos marca.css e app-marca.css. Mudou um token, muda aqui também.
O que ainda falta
- Conversar com afiliados para validar público e voz.
- Valores de impressão (CMYK e Pantone).
- Fotos reais ou autorizadas.
- Produzir a assinatura sonora.
- Checar @ e domínio e registrar a marca no nome da empresa.