Bossin'Up Design System

Design System

Referência viva compartilhada do universo Bossin'Up (Lady, Digital e Travel) — cores, tipografia, componentes e regras de aplicação. Feita pra consultar antes de criar qualquer peça, e pra compartilhar com quem produz conteúdo com você. Base de partida enquanto cada sub-marca não tem identidade visual profissional própria.

Fundação

Posicionamento

"Eu guio mulheres cansadas do automático a conquistarem clareza e liberdade para decidir pelo desejo de forma simples, estratégica e prazerosa."

Categoria: Neuroliberdade · Movimento: Neuroliberdade Feminina

Público

Mulheres ambiciosas, cansadas de viver no automático, presas entre a obrigação e a culpa. Não sabem separar desejo genuíno de expectativa alheia — foram ensinadas a servir antes de escolher. Buscam clareza prática, não teoria: querem decidir pelo desejo e sustentar isso com estrutura leve, não com disciplina rígida.

Personalidade visual em 5 adjetivos

Elegante Confiante Livre Bem-humorada Direta

O que a marca faz e evita

Faz

Fala com humor mesmo em assunto sério — é o tempero constante da voz
Usa a escala de cinza como base visual em tudo
Usa Lucide como pacote de ícones padrão em tudo (outline, stroke padrão, sem preenchimento), nunca emoji fora de card
Nomeia o que não é verdade antes de revelar o que é (estrutura de tese)
Trata a leitora como amiga, não como aluna
Mistura autoridade (Governante) com leveza (Performática) na mesma peça
Usa sarcasmo leve como quebra de tensão, e não como deboche

Evita

Jargão de autoajuda: "propósito", "abundância", "frequência", "gratidão"
Tom de professora distante ou "você deve / é necessário que"
Travessão como separador de cláusula no meio da frase
Repetir "Lady," a cada subitem
Prender um formato (carrossel, reels) a um único arquétipo fixo

Tom de Voz

Vale pra qualquer peça escrita da marca: copy de página de vendas, conteúdo de rede social, ebook/material didático, e-mail, tudo. Não é um guia à parte pra ebook, é a forma de comunicação da marca inteira.

Ver guia completo de tom de voz

Tom geral

Direto, firme e brutalmente honesto, e usa o humor pra aliviar a tensão que essa honestidade cria. Fala o que precisa ser dito sem rodeio, mesmo quando dói, e é exatamente por isso que o humor entra: pra descontrair o ambiente antes, durante ou depois da verdade crua. Humor aqui não é suavizar o que foi dito, é aliviar o peso de ter dito. Não é agressiva, é realista e prática. Não tem paciência pra enrolação, conversa vazia ou drama, mas sempre acha espaço pra uma piada.

Ritmo e estrutura

Frases curtas e retas
Escrita natural, como fala no dia a dia
Usa abreviações e expressões comuns: "tô", "ngm", "saco", "cansei", "não to afim"
Costuma começar com emoção e terminar com ponto final seco. Ex: "cansei de forçar o que não faz sentido."

Vocabulário

Prefere

paz, tranquila, bem, cansada
real, sentido, decidir, agir
Negação como afirmação de limite: "não quero", "não to afim", "não aguento mais"

Evita

leveza, propósito, abundância
gratidão, frequência
Termos de autoajuda rebuscados

Energia emocional

Exaustão lúcida: já viveu o caos, entende o que pesa e não tem mais paciência pra firula. Não fala pra inspirar, fala pra colocar as coisas no lugar. Usa o humor como válvula de escape: a franqueza brutal e a piada não se contradizem, uma é o conteúdo e a outra é o jeito de entregar sem pesar demais no ambiente. Soa como desabafo lúcido com graça, não discurso nem comédia pastelão.

Tom por arquétipo

Arquétipo	Tom	Palavras âncora	Evita
Governante	Direto, firme, sem rodeio	paz, real, sentido, decidir, agir	propósito, leveza, gratidão, frequência
Exploradora	Espontâneo, autêntico, lúcido	paz, tranquila, vida minha, não to afim, cansei	termos abstratos e frases prontas
Performática	Sarcástico, leve, espirituoso	realidade, tô rindo mas é verdade, enfim	humor forçado, piada gratuita, ironia pesada

Essência do estilo

Elemento	Descrição
Linguagem	Simples, direta, sem floreio
Tom	Curto, grosso e honesto
Emoção	Cansaço lúcido com desejo de paz
Marca da fala	"não to afim", "cansei", "só quero ficar bem", "quero paz"
Energia	Mulher que já entendeu tudo e agora só quer viver tranquila

Endereçamento

"Lady," abre a aula ou seção, uma vez só. Não repete a cada subitem.
"Mulher," interjeição mid-texto pra momentos de revelação, humor ou confissão direta: "Mulher, deixa eu te contar", "Mulher, já pensou nisso?"
"a gente" como referência colaborativa está ok, mas pra ação usa "vamos" ou "nós vamos", nunca "a gente vai/não vai fazer algo"
"juntas", tom colaborativo, não de especialista ensinando

Expressões típicas

"né?" no final de frases (confirmação casual)
"inclusive" como conector casual de adição
"tipo" pra dar exemplo
"acontece demais!" / "acontece o tempo todo"
"A ideia é..." pra explicar o porquê
"Não precisa se assustar" / "Não precisa ser complicado"
"um pouquinho" / "devagar", diminutivos pra suavizar
"montão", "esperta", "bacana"
Emojis com moderação, só pra reforçar emoção, não enfeitar

Estrutura de frase

Frases curtas e diretas, misturadas com explicações mais longas
Parágrafos curtos, no máximo 3 a 4 linhas por bloco
Travessão só pra exemplos rápidos: "— salário, pensão, aluguel recebido"
Sem travessão como separador de cláusula mid-frase: usar vírgula no lugar. Ex: "você já dá desconto, já se justifica, isso é falta de autovalorização" em vez de "você já dá desconto, e já se justifica, isso é..." com travessão
Começa com situação ou emoção, nunca com o conceito técnico
Redundância orgânica é permitida: quando uma frase repete a anterior em outras palavras e soa como pensamento em voz alta, não cortar
Perguntas ficam no fluxo do texto, não isoladas em negrito ou parágrafo sozinho
Sem linha divisória entre subseções dentro de uma mesma peça, o título em negrito já faz a separação
Concreto antes do abstrato: preferir palavras palpáveis. "filtro" em vez de "crença que determina tudo", "extrato" em vez de "finanças"

O que evitar

Tom de professor/especialista distante
Palavras muito técnicas sem explicação imediata
"Você deve", "É necessário que", soa formal demais
Repetir "Lady," a cada subitem
"olhar de frente": preferir "encarar"
Linguagem de aspiração em contexto de identidade: quando o assunto é o que a pessoa acredita que é, não usar "o que você merece ser" ou "o que você pretende"

Abrindo um assunto pesado

Quando o assunto é difícil, histórico, emocional, tabu, abre como se fosse uma fofoca entre amigas, não como aula. Tom leve, quase de revelação casual, sem peso de palestra. Ex: "deixa eu te contar uma história, no caso a nossa" antes de contextualizar algo denso. A leitora absorve o conteúdo sem sentir que está sendo educada, sente que está ouvindo algo que precisava saber.

Técnica narrativa

Não descreve a situação de fora. Narra o pensamento interno da leitora em tempo real, com a ansiedade, a confusão, o raciocínio torto que ela fez. A leitora se vê ali antes da punchline chegar:

Narra o pensamento/decisão da pessoa passo a passo
Nomeia a emoção no processo ("na ansiedade", "fica perdida")
Mostra o resultado ruim
Revela o óbvio com leveza e humor

Humor

Understatement no final: não explica a piada, deixa cair sozinha. "você apenas planejou com o dinheiro que não tinha... clássico"
Reticências antes da revelação: "pra te contar o segredo..."
Estica palavras pra ênfase: "suuuper comum", "absooolutamente"
Nunca força, o humor surge do reconhecimento, não da tentativa de ser engraçada
Sarcasmo leve como quebra de tensão, nunca como deboche

Formato PS destaque

Pra informações importantes que merecem destaque visual dentro de um texto corrido:

Ps: título curto

conteúdo do destaque

Logos

Monograma

#0a0a0a · Preto profundo#fafafa · Off-white

Lockup — Bossin'Up Lady (BUL)

#0a0a0a · Preto profundo#fafafa · Off-white

Lockup — Bossin'Up Digital (BUD)

#0a0a0a · Preto profundo#fafafa · Off-white

Escala tonal do monograma (versões flexíveis)

Pra usar sobre foto ou fundo que não é puro preto/branco — cada tom bate exatamente com um token da paleta.

#0a0a0a

#363534

#595959

#7f7f7f

#a5a5a5

#f2f2f2

#fafafa

Regras de aplicação

Contraste mínimo: só usar tons médios (#595959–#a5a5a5) sobre fundo bem claro ou bem escuro — nunca médio sobre médio, a legibilidade cai demais (dá pra ver isso comparando as células acima).
Monograma para espaços pequenos: foto de perfil, ícone, favicon, marca d'água.
Lockup completo para cabeçalho, assinatura de e-mail, capa de material, primeira aparição da marca numa peça.
Área de proteção: manter ao redor do logo um espaço livre de pelo menos a altura da estrela do monograma — nada de texto ou outro elemento colado nele.
Nunca recolorir fora dos 7 tons da escala — não usar a logo nas cores complementares (Poder/Liberdade/Tranquilidade).
Nunca distorcer a proporção — redimensionar sempre com as duas dimensões travadas juntas.

Ícones

Dois grupos, cada um com a sua regra: interface (setas, check, calendário etc., sempre Lucide) e redes sociais (logos de marca, que o Lucide não cobre). Clique num ícone pra copiar o SVG pronto.

Interface — Lucide (pacote padrão)

Regras dos ícones de interface

Sempre Lucide (lucide.dev). Se precisar de um ícone que não está aqui, buscar pelo nome lá e manter o mesmo estilo. Nunca outro pacote, nunca emoji, nunca imagem de ícone.
Estilo: contorno (outline), stroke-width="2", pontas e junções arredondadas, fill="none", viewBox 24×24.
Cor: stroke="currentColor", o ícone herda a cor do texto e inverte sozinho entre fundo claro e escuro. Nunca colorir.
Tamanho: 16px dentro de texto e listas, 20px em card e botão, 24px em destaque. A área de toque, quando o ícone clica, tem pelo menos 44px.

Redes sociais (logos de marca)

O Lucide não tem logos de marca, então as redes sociais usam um conjunto próprio, no mesmo estilo de contorno. São 8, com as 4 do rodapé já em uso.

Regras dos ícones de redes sociais

Só esse conjunto pra logo de rede social. Nunca baixar o logo oficial colorido da rede, nunca emoji.
Estilo: contorno com stroke-width="1.5" (mais fino que o Lucide, porque o desenho da marca é mais cheio), fill="none", viewBox 24×24.
Cor: stroke="currentColor", inverte entre fundo claro e escuro como o resto. Nunca usar a cor da marca da rede.
Tamanho e toque: 24px no desenho, com área de toque de pelo menos 44px. Rede que não está na lista entra no mesmo estilo (contorno 1,5) e é adicionada aqui.

Cores

Base — escala de cinza (paleta principal)

Off-white#FAFAFA--off-whiteFundo padrão de peças claras.

Cinza claro#F2F2F2--gray-100Fundo de card, texto sobre fundo escuro (usado no botão real do site).

Cinza claro-médio#A5A5A5--gray-300Texto secundário, elementos com opacidade reduzida.

Cinza médio#7F7F7F--gray-500Fundo intermediário, texto de apoio.

Cinza médio-escuro#595959--gray-600Texto de destaque secundário.

Cinza escuro#363534--gray-800Texto principal sobre fundo claro — cor de corpo de texto mais usada no site real.

Preto profundo#0A0A0A--blackFundo de seções escuras, ícone de rodapé. Único preto oficial da marca.

Complementares — pontuais, nunca a base

Governante · Borgonha#4A1C28--poder-borgonhaTítulos fortes e CTAs específicos. Acento de partida da Bossin'Up Digital.

Governante · Marinho#0C1C3D--poder-marinhoAlternativa ao borgonha em CTAs. Acento de partida da Bossin'Up Digital.

Exploradora · Verde militar#3D4638--liberdade-verdeCenários de aventura/terra. Acento de partida da Bossin'Up Travel.

Exploradora · Terracota#9E5C43--liberdade-terracotaPar do verde militar. Acento de partida da Bossin'Up Travel.

Exploradora · Petróleo#317177--tranquilidade-petroleoCenários de praia e mar. Acento de partida da Bossin'Up Travel.

Exploradora · Creme#F5F5EF--tranquilidade-cremePar do petróleo. Acento de partida da Bossin'Up Travel.

Base compartilhada: a escala de cinza + tipografia servem Lady, Digital e Travel igualmente. Acentos por sub-marca (ponto de partida, não identidade final): Lady usa os dois pares conforme o conteúdo pede; Digital parte do par Governante (borgonha/marinho); Travel parte do par Exploradora (verde/terracota/petróleo/creme). Sem pedido explícito de acento, a base (escala de cinza) é a paleta usada.

Verde do botão (extraído do site real)

Gradiente CTA#0C440F → #2A9C31--cta-gradientÚnico gradiente encontrado nas 3 páginas de venda reais — não faz parte da paleta de marca, é específico de botão de conversão.

Tipografia

Título / SubtítuloThe Seasons · preview em Fraunces

Liberdade é ter o prazer de tomar as rédeas da própria vida.

Corpo de textoMontserrat

Lady, deixa eu te contar uma coisa. Você não está travada por falta de força, foco ou disciplina. Está travada porque aprendeu a decidir com base na obrigação, não no desejo.

CitaçãoHalimun · preview em Parisienne

Se você não está vivendo a sua vida, está vivendo a de outra pessoa.

Aplicada via Canva. Nesta prévia, aproximação com Parisienne pra visualização.

A escala de tamanho por papel (título hero, subtítulo, corpo etc.) é específica de site (tem versão celular, tablet e desktop) — documentada na seção Sites, não aqui.

Espaçamento

Escala extraída das páginas de venda reais (valores de padding e gap mais frequentes) — não é um sistema inventado, é o que você já usa na prática.

5px

10px

15px

20px

30px

40px

60px

Margem lateral, respiro entre seções e largura de container por dispositivo (celular, tablet, desktop) estão em Sites, em "Margens, larguras e espaço" — todos os valores saem desta escala.

Sites

Estrutura de seções (alternância, placa de vidro e fundo)

Alternância de seções

As seções do site sempre alternam entre os dois fundos chapados da base — nunca um fundo colorido, nunca um gradiente, nunca um tom intermediário de cinza como fundo de seção inteira.

#FAFAFA — seção clara

#0A0A0A — seção escura

#FAFAFA — seção clara

Uma seção nunca repete o fundo da seção imediatamente anterior — é essa troca constante que dá o ritmo da página, não a cor. Título/texto sempre trocam de cor junto (--gray-800 sobre claro, --gray-100 sobre escuro), nunca ficam com baixo contraste pra "suavizar" a transição.

Padrão dos sites: as seções são montadas sobre a Placa de vidro (logo abaixo, neste mesmo recolhível). Nas placas retas de baixo, o fundo pode ser estático, vidro ou textura, e o tom base continua sendo um dos dois chapados.

Placa de vidro (padrão dos sites)

É o padrão de todas as páginas de site. Cada seção vira uma placa de vidro fosco de lado a lado (sem margem/borda lateral). Só um dos dois tons arredonda em cada emenda — esse é o que "vence" e sobrepõe o outro, que fica reto ali. O outro tom nunca arredonda na emenda, senão forma aquele buraco de duas curvas se encontrando. Hero e Rodapé são sempre retos no lado que não tem vizinho, e a quantidade de seções não é fixa. A placa que sobrepõe (a arredondada) é sempre o vidro; as placas retas de baixo usam um dos fundos de seção logo abaixo (estático, vidro ou textura).

Versão clara (placas claras sobrepõem)

Hero — reto em cima (clara)

Seção 2 (escura, reta — fica embaixo)

Seção 3 (clara, sobrepõe os dois lados)

Seção 4 (escura, reta)

Seção 5 (clara, sobrepõe os dois lados)

Rodapé — reto embaixo (escura, reta)

Toda placa clara arredonda nos dois cantos (ou só embaixo/cima quando é Hero/Rodapé) e sobrepõe a escura vizinha, que fica sempre reta. A cor nos cantinhos é o que está por trás de tudo (aqui, preto).

Versão escura (placas escuras sobrepõem)

Hero — reto em cima (escura)

Seção 2 (clara, reta — fica embaixo)

Seção 3 (escura, sobrepõe os dois lados)

Seção 4 (clara, reta)

Seção 5 (escura, sobrepõe os dois lados)

Seção 6 (clara, reta)

Rodapé — reto embaixo (escura)

Exatamente o espelho da versão clara: mesmos tons, mesma sobreposição, só invertendo qual lado arredonda — aqui o Hero já começa escuro. Essa versão tem uma seção a mais de propósito: a quantidade de seções não é fixa, a página pode ter quantas precisar, sempre alternando. Validado: a placa de vidro é a direção pra costura/fundo. Acabamento da borda: as placas que sobrepõem têm um fio de 1px só na curva (sem linha lateral) que some nas pontas, brilho interno no topo e sombra projetada na placa vizinha, o mesmo acabamento do Card de vidro. Placa clara: fio escuro a 20% e brilho branco. Placa escura: fio branco a 30% e leve halo.

Fundo de seção: estático, vidro e textura

É o fundo das placas retas (as que ficam embaixo, sem arredondar) da Placa de vidro. Escolhe-se um dos três por seção, e o tom base continua sendo um dos dois chapados. "Estático" é liso, sem nenhuma camada. "Vidro" acrescenta formas suaves desfocadas. "Textura" é um grão bem sutil (tipo filme/papel), 100% P&B, sem padrão repetido óbvio.

Estático, Vidro e Textura

Estático — escuro (padrão atual)

Estático — claro (padrão atual)

Vidro — escuro (mesmo fundo chapado + formas desfocadas por cima)

Vidro — claro

Textura — escuro (grão sutil)

Textura — claro (grão sutil)

O tom de base (#0A0A0A / #FAFAFA) nunca muda nas três — é sempre uma camada bem sutil por cima, sem virar gradiente visível nem mudar o contraste do texto. A placa arredondada que sobrepõe continua sendo o vidro da Placa de vidro acima, só a reta de baixo recebe um desses três.

Padrão de construção (tamanhos, margens e toque)

Breakpoints

O site é construído mobile-first: o CSS base é o celular, e as faixas maiores só acrescentam (min-width). Três faixas, com os valores padrão de mercado (celular de 375px de referência, tablet na largura do iPad em pé, desktop no notebook).

Faixa	Largura	Testar em	O que muda
Celular	até 767px	375px	Base. 1 coluna, margem lateral 20px, botão principal na largura toda
Tablet	768px a 1023px	768px	2 colunas, margem lateral 30px, fontes um degrau acima
Desktop	1024px ou mais	1024px e 1440px	3 colunas (4 só em cards curtos com ícone), margem lateral 40px, container de 1200px

Acima de 1440px nada cresce: o container fica em 1200px centralizado. Variáveis CSS não funcionam dentro de @media, então os valores 768px e 1024px entram direto no código (os tokens prontos estão na seção Tokens CSS).

Escala de tamanho

Tamanho de fonte por papel e por dispositivo, específico de site — não se aplica a Ebooks, Instagram ou Aplicativos, que têm suas próprias telas/escalas.

Papel	Celular	Tablet	Desktop	Fonte	Altura da linha
Título hero	34px	44px	52px	The Seasons	1,1
Título de seção	26px	30px	34px	The Seasons	1,2
Subtítulo	22px	25px	28px	The Seasons	1,25
Citação em destaque	20px	21px	22px	The Seasons itálico	1,45
Preço (número principal)	40px	48px	52px	The Seasons 600	1,1
Corpo	16px	16px	17px	Montserrat	1,65
Título de card	16px	16px	16px	Montserrat 700	1,35
Texto de card, FAQ, listas	15px	15px	15px	Montserrat	1,6
Botão	15px	16px	17px	Poppins 500	1,2
Rótulo em caixa alta (categoria, selo)	13px	13px	13px	Montserrat 600, espaçamento +8%	1,3
Texto legal e de apoio	13px	13px	13px	Montserrat	1,6

Regras de texto (padrão de mercado): corpo nunca abaixo de 16px no celular (abaixo disso o iPhone dá zoom sozinho nos campos e o texto cansa); nada de texto abaixo de 12px; altura de linha do corpo entre 1,5 e 1,75 e dos títulos entre 1,1 e 1,25; linha de 45 a 75 caracteres no desktop e 35 a 60 no celular (por isso a coluna de texto corrido não passa de 600px); famílias de fonte: The Seasons nos títulos, Montserrat no resto, Poppins só no botão e Halimun/Parisienne só no script.

Margens, larguras e espaço

Todos os valores saem da escala de espaçamento já catalogada (5, 10, 15, 20, 30, 40, 60), nada inventado.

Item	Celular	Tablet	Desktop
Margem lateral (borda da tela até o conteúdo)	20px	30px	40px
Respiro vertical de cada seção (em cima e embaixo)	40px	60px	60px
Largura máxima do container	100%	100%	1200px, centralizado
Coluna de texto corrido	100%	até 600px	até 600px
Colunas de grade (cards)	1	2	3 (4 só em cards curtos com ícone)
Espaço entre cards	15px	20px	20px
Padding interno do card	20px	30px	30px
Raio do card	20px	20px	20px
Raio da placa de vidro	20px	28px	28px
Altura mínima do hero	560px	600px	640px

Larguras de componente (centralizados dentro do container): preço 480px, garantia 680px, FAQ 760px, aviso legal do rodapé 620px.

Toque, formulário e construção

Alvo de toque: mínimo de 44×44px (Apple) / 48px (Material) em tudo que clica, com pelo menos 8px entre um alvo e outro. Ícone pequeno ganha área de toque maior com padding, sem crescer visualmente. Botão oficial (15px de padding + texto) já passa.
Campo de formulário: altura mínima de 48px e fonte de 16px ou mais no celular (com menos, o iPhone dá zoom ao tocar). Usar o tipo certo (email, tel) pra abrir o teclado certo.
Botão principal no celular: ocupa a largura toda do container.
Sem rolagem lateral em nenhuma largura. Testar em 375px, 768px, 1024px e 1440px antes de publicar.
Viewport: width=device-width, initial-scale=1, nunca bloquear o zoom da pessoa.
Imagens: sempre com largura e altura (ou aspect-ratio) declaradas pra a página não pular enquanto carrega; só a primeira dobra carrega na hora, o resto loading="lazy".
Fontes: carregar só os pesos que a página usa, com font-display: swap pra o texto aparecer mesmo antes da fonte chegar.
Alturas: preferir min-height a altura fixa, e dvh no lugar de vh pra o celular não cortar o hero atrás da barra do navegador.
Contraste: texto normal com contraste mínimo de 4,5:1 sobre o fundo (já garantido pelos dois fundos chapados, vale conferir sobre foto).

Base: Apple Human Interface Guidelines e Material Design (alvo de toque), WCAG 2.2 (contraste e zoom), breakpoints padrão 768/1024 e medida de linha de 45 a 75 caracteres (tipografia clássica). O site real (bossingrow-dinheiro) hoje troca de layout em 760px e usa container de 1080px, e deve ser alinhado a 768px e 1200px na próxima revisão.

Tipos de página

O hero e a estrutura mudam de um tipo de página pro outro — o que se repete entre eles são só as peças já catalogadas (botão, card de vidro, formatos de preço, rodapé).

01Página de Vendas

Hero

Anatomia obrigatória do Hero

Nome do produto: ex. "Bossin'Grow: Dinheiro". Pode aparecer simples, em texto corrido, ou estilizado como uma espécie de "logotipo" do produto: uma palavra em script/cursiva seguida do restante em caixa alta e negrito, sempre antes do headline (é o que o Formato 3 já faz com "plano" + "DE AÇO 2026")
Headline: ex. "Pare de perder o sono por causa de dinheiro"
Subheadline: ex. "Pare de ir dormir pensando nos boletos e na fatura no cartão, o dinheiro é uma ferramenta que deve trabalhar para você e não o contrário"
Botão CTA (âncora): ex. "QUERO PARAR DE PERDER MEU SONO"

Sobre os formatos de Hero abaixo: qualquer formato pode ser claro ou escuro, e o elemento visual (foto, notificações, etc.) pode ficar à direita ou à esquerda do texto. Não é uma regra fixa por tema, é escolha de composição de cada peça.

Hero — Formato 1 (real: Bossin'Grow)

Kicker + nome do produto em destaque (peso 400, mais leve) + subtítulo em negrito + corpo + CTA + barra de checklist ao final. Texto sempre centralizado (CTA alinhado à esquerda dentro do bloco). Onde entraria a foto real, o fundo vira um degradê pro cinza da base — sem cor inventada — e troca de lado entre as duas versões: escura = foto à esquerda, clara = foto à direita.

Modelos (claro e escuro)

Kicker de apoio aqui

Nome do Produto

Subtítulo de apoio

Texto de apoio explicando o principal benefício do produto, de forma clara e direta, em duas ou três linhas.

QUERO GARANTIR AGORA

Acesso ImediatoProduto VitalícioConteúdo Prático e Aplicável

Kicker de apoio aqui

Nome do Produto

Subtítulo de apoio

Texto de apoio explicando o principal benefício do produto, de forma clara e direta, em duas ou três linhas.

QUERO GARANTIR AGORA

Acesso ImediatoProduto VitalícioConteúdo Prático e Aplicável

Sempre em PB: subtítulo em preto/off-white (inverte com o tema, igual ao resto do texto), degradê de "onde vai a foto" em gray-600 (#595959), e a barra de checklist final segue a mesma regra de Alternância de seções — inverte pro tom oposto do hero (escuro fecha em off-white, claro fecha em preto).

Hero — Formato 2 (inspiração: notificações flutuantes)

Divisor fino + título em display (uma palavra em itálico + resto reto) + frase de impacto em negrito + corpo + CTA com seta. À direita, cards de notificação flutuantes como prova social — genéricos aqui (não reproduzem logos de apps reais); em produção, usar o app/valor real. Mesmo degradê cinza da base onde a foto entraria.

Modelos (claro e escuro)

Nome do
Produto

Frase de impacto em destaque aqui.

Texto de apoio explicando o principal benefício do produto, de forma clara e direta.

QUERO GARANTIR AGORA

CategoriaTexto da notificação

Nome do
Produto

Frase de impacto em destaque aqui.

Texto de apoio explicando o principal benefício do produto, de forma clara e direta.

QUERO GARANTIR AGORA

CategoriaTexto da notificação

Formato ainda não usado em nenhuma página real — é uma inspiração adaptada, com a versão clara criada do zero (só a escura existia como referência). Aqui invertida (texto à direita) só pra deixar visível que o formato funciona nos dois sentidos — ver aviso acima.

Hero — Formato 3 (inspiração: barra utilitária + título em duas camadas)

O mais denso dos três: uma barra utilitária no topo (logo + prova social com avatares + CTA menor) antes mesmo da dobra principal, depois um título em duas camadas — palavra de assinatura em script + nome/ano em caps — seguido do título de venda em destaque. Fecha com uma barra central de reforço. CTA sempre no verde oficial (a inspiração original usava outra cor; adaptado aqui pra a paleta da casa).

Modelos (claro e escuro)

Sua Marca

Junte-se a +X mil pessoas que já tiveram resultado QUERO GARANTIR AGORA

palavra

NOME DO PRODUTO

Frase de headline com a promessa principal do produto.

Texto de apoio explicando o produto e seus principais benefícios, de forma clara e direta.

QUERO GARANTIR AGORA

GARANTA AGORA O SEU ACESSO!

Sua Marca

Junte-se a +X mil pessoas que já tiveram resultado QUERO GARANTIR AGORA

palavra

NOME DO PRODUTO

Frase de headline com a promessa principal do produto.

Texto de apoio explicando o produto e seus principais benefícios, de forma clara e direta.

QUERO GARANTIR AGORA

GARANTA AGORA O SEU ACESSO!

Igual ao Formato 2: inspiração adaptada, nunca usada numa página real. A barra utilitária do topo é a novidade estrutural desse formato — pode ser reaproveitada sozinha em qualquer outro formato de hero, não é exclusiva deste.

Hero — Formato 4 (Isca/Ebook, inspiração: Woma Academy)

Usado também na venda de ebooks/PDFs: minimalista, centralizado, sem foto sua — tags de formato (PDF / nº de páginas), título direto, subtítulo com uma frase em destaque, CTA, link de download imediato, e uma vitrine das páginas do PDF numa faixa que sempre inverte o tom da cabeça (regra de Alternância de seções). CTA no verde oficial (a inspiração original usava preto sólido). Mesmo formato reaproveitado como hero de isca gratuita em Página de Captura.

Modelos (claro e escuro)

SUA MARCA

PDFX PÁGINAS

Título direto com a promessa principal da isca

Frase de destaque reforçando o valor da isca. Complemento explicando pra quem é e o que ela entrega.

QUERO ACESSAR AGORA

Download Imediato

SUA MARCA

PDFX PÁGINAS

Título direto com a promessa principal da isca

Frase de destaque reforçando o valor da isca. Complemento explicando pra quem é e o que ela entrega.

QUERO ACESSAR AGORA

Download Imediato

Em teste — Hero com foto de fundo inteira (sem barra no meio)

Sem divisão texto/foto lado a lado. A foto ocupa o topo inteiro, com um degradê escurecendo por baixo pra dar contraste ao texto. Vidro fosco só na barra de checklist final. O kicker fica em texto simples, sem caixa, pra não ser confundido com um botão.

Modelos (claro e escuro)

foto

Nome do Produto

Subtítulo de apoio

Texto de apoio explicando o principal benefício do produto, de forma clara e direta.

QUERO GARANTIR AGORA

Acesso ImediatoProduto VitalícioConteúdo Prático e Aplicável

foto

Nome do Produto

Subtítulo de apoio

Texto de apoio explicando o principal benefício do produto, de forma clara e direta.

QUERO GARANTIR AGORA

Acesso ImediatoProduto VitalícioConteúdo Prático e Aplicável

Botão

Botão (padrão — vidro fosco)

Superfície de vidro fosco (translúcido + blur) em vez do sólido — substitui o botão antigo. Três cores: verde (CTA principal, o de sempre), borgonha e marinho (as duas já catalogadas em Cores) — mesmo tom, só variando opacidade pro efeito de vidro, nada de cor nova.

Quero Garantir Agora Quero Garantir Agora Quero Garantir Agora

No fundo claro, as 3 cores ficam opacas (sólidas) em vez de translúcidas — o vidro fosco original ficaria lavado/pastel sobre branco. A versão escura acima continua translúcida, é a referência oficial de "vidro".

Card de vidro

Card de vidro (ícone + título + texto)

O card é de vidro fosco (fundo translúcido + blur), raio 20px, padding 30px (20px no celular). O "3D" é só a borda interna: um fio na borda e um halo curto que desbota pra dentro, sem sombra pesada nem relevo. Card escuro: fio branco a 30%. Card claro: fundo #FAFAFA translúcido e borda #A5A5A5 em degradê. Badge do ícone sempre em preto e branco (nunca cor) — inverte junto com o card: preto sobre card claro, off-white sobre card escuro.

Modelos (claro e escuro)

Título 1

Texto curto explicando esse ponto, de forma clara e direta, em duas linhas.

Título 2

Texto curto explicando esse ponto, de forma clara e direta, em duas linhas.

Título 3

Texto curto explicando esse ponto, de forma clara e direta, em duas linhas.

Título 1

Texto curto explicando esse ponto, de forma clara e direta, em duas linhas.

Título 2

Texto curto explicando esse ponto, de forma clara e direta, em duas linhas.

Título 3

Texto curto explicando esse ponto, de forma clara e direta, em duas linhas.

Depoimentos

Dois blocos: 3 cards de depoimento em destaque (citação + nome + contexto), e uma vitrine de "prova social real" — prints genéricos de mensagens/comentários, sempre em PB, sem emoji. Mesma superfície de vidro do Card de vidro.

Modelos (claro e escuro)

Prova social

Quem já fez, recomenda

Mensagens reais de quem já usou o produto, do primeiro contato até o resultado.

"Depoimento curto contando o resultado que a pessoa teve com o produto."

Nome da Cliente

cargo ou contexto

"Depoimento curto contando o resultado que a pessoa teve com o produto."

Nome da Cliente

cargo ou contexto

"Depoimento curto contando o resultado que a pessoa teve com o produto."

Nome da Cliente

cargo ou contexto

Nome ou Grupo

Texto curto de mensagem real, tipo print de grupo ou DM. 14:32

Nome ou Grupo

Texto curto de mensagem real, tipo print de grupo ou DM. 09:07

Nome ou Grupo

Texto curto de mensagem real, tipo print de grupo ou DM. 21:18

Prova social

Quem já fez, recomenda

Mensagens reais de quem já usou o produto, do primeiro contato até o resultado.

"Depoimento curto contando o resultado que a pessoa teve com o produto."

Nome da Cliente

cargo ou contexto

"Depoimento curto contando o resultado que a pessoa teve com o produto."

Nome da Cliente

cargo ou contexto

"Depoimento curto contando o resultado que a pessoa teve com o produto."

Nome da Cliente

cargo ou contexto

Nome ou Grupo

Texto curto de mensagem real, tipo print de grupo ou DM. 14:32

Nome ou Grupo

Texto curto de mensagem real, tipo print de grupo ou DM. 09:07

Nome ou Grupo

Texto curto de mensagem real, tipo print de grupo ou DM. 21:18

Preços

Preços — Formato Curto (oferta única)

Bloco compacto pra uma única oferta: kicker + assinatura em script + nome do produto + preço + CTA + confiança. Vidro fosco, mesma superfície do Card de vidro.

Modelos (claro e escuro)

Quanto você precisa investir hoje pra fazer parte da primeira turma do

Passo a Passo do

Produto Digital

12x de R$70,82

ou R$697 à vista.

QUERO O PASSO A PASSO →

Garantia de 7 diasCompra seguraAcesso imediato

Quanto você precisa investir hoje pra fazer parte da primeira turma do

Passo a Passo do

Produto Digital

12x de R$70,82

ou R$697 à vista.

QUERO O PASSO A PASSO →

Garantia de 7 diasCompra seguraAcesso imediato

Preços — Formato Individual ("o que está incluso")

Maior que o curto: título "O que está incluso" + lista dos itens com preço riscado, soma o valor total riscado, e fecha no preço final — real do que você já vende (Manual Lady Glow, Bossin'Grow etc.). Nunca chamar de "combo" — é o pacote com os itens explicados.

Modelos (claro e escuro)

O que está incluso

Produto AR$XX
Produto BR$XX
Produto CR$XX
BônusR$XX
Atualizações pelos próximos X mesesR$XX

Valor Total: ~~R$XXX,00~~, por:

12x de R$XX,XX

ou R$XXX,00 à vista

QUERO O PACOTE ESSENCIAL

Garantia de 7 diasCompra seguraAcesso imediato

O que está incluso

Produto AR$XX
Produto BR$XX
Produto CR$XX
BônusR$XX
Atualizações pelos próximos X mesesR$XX

Valor Total: ~~R$XXX,00~~, por:

12x de R$XX,XX

ou R$XXX,00 à vista

QUERO O PACOTE ESSENCIAL

Garantia de 7 diasCompra seguraAcesso imediato

Preços — Formato Planos (comparação de 3)

Três colunas, a do meio elevada com o selo "Mais Popular" — a mesma estrutura da inspiração (Mensal/Anual/Trimestral), adaptada pro vidro fosco em vez do bordô.

Modelos (claro e escuro)

Escolha seu plano, sem letra miúda.

Todos os planos dão acesso completo: trilhas, aulas e comunidade.

MENSAL

R$150,00

por mês · renovação mensal

Acesso completo
Comunidade exclusiva
Sem taxa de adesão

Assinar mensal →

MAIS POPULAR ANUAL

12x de R$95,84

no plano anual · 12 meses de acesso garantido

Acesso completo
Comunidade exclusiva
TODOS os workshops, gravações e próximos, por 1 ano
12 meses garantidos

Assinar anual →

TRIMESTRAL

3x de R$143,03

ou R$397 à vista no trimestre

Acesso completo
Comunidade exclusiva
3 meses garantidos

Assinar trimestral →

7 dias de garantia incondicionalCartão de crédito ou PixAcesso imediato após o pagamento

Escolha seu plano, sem letra miúda.

Todos os planos dão acesso completo: trilhas, aulas e comunidade.

MENSAL

R$150,00

por mês · renovação mensal

Acesso completo
Comunidade exclusiva
Sem taxa de adesão

Assinar mensal →

MAIS POPULAR ANUAL

12x de R$95,84

no plano anual · 12 meses de acesso garantido

Acesso completo
Comunidade exclusiva
TODOS os workshops, gravações e próximos, por 1 ano
12 meses garantidos

Assinar anual →

TRIMESTRAL

3x de R$143,03

ou R$397 à vista no trimestre

Acesso completo
Comunidade exclusiva
3 meses garantidos

Assinar trimestral →

7 dias de garantia incondicionalCartão de crédito ou PixAcesso imediato após o pagamento

Garantia

Selo de cera fosca (gerado via IA, PB, sem dourado/estrelas) + título + texto de garantia. Inverte com o card: selo branco sobre card escuro, selo preto sobre card claro. Duas versões de texto: Curta pra produto mais simples/barato, Completa pra ticket mais alto, reforça a decisão com mais contexto, não só o prazo.

Selo — 4 opções

Curta (produto simples)

Modelos (claro e escuro)

Garantia de 7 dias

Você tem 7 dias após a compra pra testar o conteúdo. Se não for pra você, é só enviar um e-mail pro suporte, e devolvemos 100% do valor, sem burocracia.

Garantia de 7 dias

Você tem 7 dias após a compra pra testar o conteúdo. Se não for pra você, é só enviar um e-mail pro suporte, e devolvemos 100% do valor, sem burocracia.

Completa (ticket mais alto)

Mesmo selo, mas o texto reforça o que já fica liberado antes do prazo acabar — reduz o medo de "comprar e não poder testar direito" em produtos mais caros.

Modelos (claro e escuro)

Garantia incondicional de 7 dias

Ao se inscrever agora, você já tem acesso a grande parte do conteúdo. Se dentro de 7 dias você sentir que não é pra você, é só avisar o suporte, e devolvemos 100% do valor investido, sem perguntas e sem burocracia.

Garantia incondicional de 7 dias

FAQ

Accordion em vidro fosco — mesma superfície do Card de vidro. Ícone de seta (chevron), não +/−, pra manter o mesmo idioma visual já usado nos recolhíveis deste design system. Uma pergunta pode ficar aberta por padrão pra sinalizar que é interativo.

Modelos (claro e escuro)

Perguntas Frequentes

Pergunta frequente 1?

Resposta curta e direta, explicando o que o cliente precisa saber antes de comprar.

Pergunta frequente 2?

Resposta curta e direta, explicando o que o cliente precisa saber antes de comprar.

Pergunta frequente 3?

Resposta curta e direta, explicando o que o cliente precisa saber antes de comprar.

Pergunta frequente 4?

Resposta curta e direta, explicando o que o cliente precisa saber antes de comprar.

Perguntas Frequentes

Pergunta frequente 1?

Resposta curta e direta, explicando o que o cliente precisa saber antes de comprar.

Pergunta frequente 2?

Resposta curta e direta, explicando o que o cliente precisa saber antes de comprar.

Pergunta frequente 3?

Resposta curta e direta, explicando o que o cliente precisa saber antes de comprar.

Pergunta frequente 4?

Resposta curta e direta, explicando o que o cliente precisa saber antes de comprar.

Rodapé

Rodapé — Formato 1 (real, recriado em HTML)

Modelos (claro e escuro)

Fundo: preto profundo #0a0a0a (o mesmo --black da paleta base) — nunca colorido.
Logo: monograma + wordmark em creme/off-white, centralizados no topo do bloco de aviso legal; wordmark sozinho (sem o monograma) alinhado à esquerda, ao lado do copyright, no rodapé inferior.
Aviso legal: "AVISO LEGAL:" em negrito seguido do texto de isenção de garantia de resultado — obrigatório em toda página de venda.
Links legais: Política de Privacidade e Termos de Uso, sublinhados, centralizados, logo abaixo do aviso legal.
Divisor: linha fina clara separando o bloco de aviso legal do bloco final de copyright/contato.
Bloco final: quatro colunas — logo+wordmark · copyright · "Precisa de ajuda?" com e-mail de suporte · ícones sociais (Instagram, YouTube, Facebook) em contorno simples, sem preenchimento.
Tipografia: mesma família do corpo (Montserrat), tamanho reduzido, cor secundária (creme/cinza claro sobre o preto) — nunca branco puro.

Rodapé — Formato 2 (painel flutuante, vidro fosco)

Mesmo conteúdo do Formato 1, mas como painel flutuante com bordas arredondadas e vidro, em vez de faixa full-bleed. Os dois são oficiais, escolha por página conforme o resto da seção usar vidro ou não.

Receitas de Montagem

A ordem certa dos blocos pra montar uma página de vendas do zero, por tamanho — baseado no material de copy da Gabi Cervantes. Blocos marcados não catalogado ainda não têm componente padronizado aqui: ao montar uma página real, geram sob demanda seguindo o estilo geral (PB, vidro fosco, sem emoji), sem precisar esperar virarem padrão no design system.

Página Curta 3–5 dobras

Foco: direta ao ponto.

Hero (promessa principal) catalogado
Pra quem é / Benefícios Card de vidro
Preço + CTA Preços
Garantia Garantia

Página Padrão 6–9 dobras

Foco: equilibrar desejo, autoridade e quebra de objeções.

Hero (headline + subhead + CTA) catalogado
Problema / Agitação (conectar com a dor) não catalogado
Apresentação da Solução não catalogado
Conteúdo / Módulos (o que o cliente vai levar) não catalogado
Bônus não catalogado
Prova Social Depoimentos
Quem Sou Eu (autoridade do criador) não catalogado
Oferta e Preço Preços
Garantia + Dúvidas Frequentes Garantia FAQ

Página Longa 10+ dobras

Foco: quebrar todas as objeções antes do CTA final. Duas variações válidas, a ordem muda conforme o que precisa de mais reforço.

Variação A (10 blocos)

Hero (promessa) catalogado
Depoimentos catalogado
Dor ou dificuldade do lead não catalogado
Entregável não catalogado
Bônus não catalogado
Autor não catalogado
CTA não catalogado
Garantia Garantia
Dúvidas Frequentes FAQ
WhatsApp não catalogado

Variação B (13 blocos)

Hero (promessa) catalogado
Problema não catalogado
Solução não catalogado
Seu produto é diferente não catalogado
Depoimentos catalogado
Para quem é não catalogado
Entregável não catalogado
Bônus não catalogado
CTA não catalogado
Autor não catalogado
Garantia Garantia
Dúvidas Frequentes FAQ
WhatsApp não catalogado

Formatos livres

Formatos de diagramação sem função obrigatória fixa — servem pra qualquer conteúdo que precise dessa estrutura (texto corrido, lista de módulos, diferenciais, etapas etc.), separados por categoria. Ícones sempre do pacote Lucide (outline, sem preenchimento), nunca emoji.

1 — Texto + imagem alternado em blocos

Blocos que se repetem na mesma página (partes de um conteúdo, etapas, módulos). A lateralidade da imagem nunca repete do bloco anterior pro próximo. É uma dobra completa — sempre vem com um título introduzindo a sequência antes dos blocos.

Título que introduz a sequência de blocos

Parte 1

Título do bloco 1

Texto explicando o conteúdo desse bloco, de forma clara e direta.

Item 1 da lista
Item 2 da lista

Parte 2

Título do bloco 2

Texto explicando o conteúdo desse bloco, de forma clara e direta.

Item 1 da lista
Item 2 da lista

Parte 3

Título do bloco 3

Texto explicando o conteúdo desse bloco, de forma clara e direta.

Item 1 da lista
Item 2 da lista

Bloco 1 = imagem à direita, bloco 2 = inverte, bloco 3 = inverte de novo. Nunca o mesmo lado duas vezes seguidas — a alternativa à inversão é centralizar o bloco (sem imagem lateral).

2 — Grade de cards com ícone

3 ou 4 colunas, ícone + título + descrição curta. Serve pra módulos, diferenciais, categorias de conteúdo etc. É uma dobra completa — sempre vem com um título introduzindo a grade.

Título que introduz a grade

Título 1

Descrição curta explicando esse item.

Título 2

Descrição curta explicando esse item.

Título 3

Descrição curta explicando esse item.

Título 4

Descrição curta explicando esse item.

3 — Grade de cards com imagem

Mesma ideia da grade com ícone, mas cada card abre com uma foto/imagem no topo em vez de ícone. Também é uma dobra completa, com título antes da grade.

Título que introduz a grade

Título 1

Descrição curta explicando esse item.

Título 2

Descrição curta explicando esse item.

Título 3

Descrição curta explicando esse item.

Título 4

Descrição curta explicando esse item.

4 — Imagem + lista com seta, frase e CTA abaixo da dobra

Imagem de um lado, título + lista com seta (divisória fina entre os itens) do outro. Abaixo da dobra inteira, uma frase centralizada e o CTA.

Título de destaque
para o bloco

Item da lista explicando um ponto específico
Item da lista explicando um ponto específico
Item da lista explicando um ponto específico
Item da lista explicando um ponto específico

Frase de apoio centralizada reforçando o valor, logo abaixo da dobra.

QUERO GARANTIR AGORA

A imagem pode ficar dos dois lados — aqui está à esquerda, mas inverte pra direita dependendo do contexto da página (e da dobra anterior, se for repetir o formato 1 na mesma página).

5 — Carrossel de cards numerados com imagem de fundo

Cards com foto de fundo, número + rótulo no rodapé, rolagem horizontal. Serve pra listar etapas, módulos ou tópicos em sequência. Nunca fica solto — sempre vem com um título introduzindo a dobra.

Eyebrow da dobra

Título que introduz o carrossel

01.Tópico um

02.Tópico dois

03.Tópico três

04.Tópico quatro

6 — Carrossel de imagens com legenda sobreposta

Mesma base do carrossel acima, mas a legenda é uma frase curta centralizada em vez de número + rótulo. Aqui o título fica em cima e ainda fecha com uma frase embaixo, reforçando a ideia antes da próxima dobra.

Título que introduz o carrossel:

Frase curta um?

Frase curta dois?

Frase curta três?

Frase curta quatro?

A frase de fechamento: reforça o ponto antes de seguir pra próxima dobra.

7 — Diagrama de etapas/processo horizontal

Círculos numerados ligados por uma linha, com rótulo embaixo de cada um. Serve pra mostrar um processo ou fluxo em etapas. Título e texto de apoio antes do diagrama, e opcionalmente uma caixa de destaque fechando o raciocínio depois.

Eyebrow da dobra

Título que introduz o diagrama

Texto de apoio explicando o contexto do processo antes de mostrar as etapas.

1Etapa um

2Etapa dois

3Etapa três

4Etapa quatro

5Etapa cinco

Caixa de destaque opcional fechando o raciocínio, reforçando o que mais importa entre as etapas.

8 — Imagem + checklist lateral

Foto de um lado, lista de benefícios com check do outro. Diferente do formato 1 porque aqui é só uma lista, sem título/subtítulo por bloco — mas a dobra em si sempre tem um título acima, tipo uma pergunta ("Para quem é X?").

Título que introduz a dobra?

Item da lista explicando um ponto específico
Item da lista explicando um ponto específico
Item da lista explicando um ponto específico
Item da lista explicando um ponto específico

A imagem pode ficar dos dois lados — aqui está à esquerda, mas inverte pra direita dependendo do contexto da página.

9 — Cards de texto numerados sem ícone

3 colunas, só número + título + corpo, sem ícone nem imagem. Serve pra listar objeções, motivos ou passos curtos. Também vem com título (e opcionalmente um badge) antes dos cards.

Eyebrow da dobra

Título que introduz os cards

Título 1

Descrição curta explicando esse item.

Título 2

Descrição curta explicando esse item.

Título 3

Descrição curta explicando esse item.

Aplicação

Toda página de vendas segue obrigatoriamente os componentes e regras catalogados nesta seção. Resumo rápido:

Página de vendas

Hero: Anatomia obrigatória: nome do produto, headline, subheadline, botão CTA (ver Hero)
Botão: Vidro fosco, 3 cores oficiais (verde, borgonha, marinho)
Card de vidro: Ícone sempre P&B, vidro fosco com borda interna em degradê
Depoimentos: 3 cards de citação + prova social em prints genéricos
Preços: Formato Curto, Individual ou Planos, nunca chamar o Individual de "combo"
Garantia: Selo em cera fosca (PB) + título + texto, versão Curta ou Completa conforme o ticket
FAQ: Accordion em vidro fosco, ícone de seta (nunca +/−)
Rodapé: Formato 1 (full-bleed) ou Formato 2 (painel glass), os dois são oficiais
Preto: #0a0a0a
Tipografia: The Seasons (título), Montserrat (corpo)
Ícones: Lucide-style SVG, outline, stroke padrão, sem preenchimento, nunca emoji

02Página de Obrigado

Obrigado de compra (área de membros)

Hero — Acesso à área de membros (real)

Faixa de alerta + bloco de login (fictício, os dados chegam por e-mail) + imagem/gráfico da marca do lado. O vermelho da faixa é uma exceção pontual, não faz parte da paleta catalogada — só existe aqui, nesse alerta específico. Onde entraria a imagem real, o mesmo degradê cinza usado nos outros heros.

Ver modelo

Parabéns, a sua vaga está 100% garantida!

Acesse agora a
área de membros!

Os dados para o seu login serão enviados por e-mail.

Email: Seu e-mail de compra

Senha: Sua senha

ACESSAR A ÁREA DE MEMBROS

Precisa de alguma ajuda?

Caso você ainda esteja com alguma dificuldade para acessar a área de membros, basta clicar no botão abaixo e nos chamar no WhatsApp.

QUERO FALAR NO WHATSAPP

Rodapé: usa o mesmo Rodapé oficial já documentado em Página de Vendas — não repetido aqui.

Obrigado da captura (redirecionamento)

Passo final da captura — leva ao grupo de WhatsApp

É uma função diferente da Página de Obrigado de compra (aquela entrega acesso à área de membros). Esta vem logo depois do formulário da Página de Captura e tem uma tarefa só: levar a pessoa pro grupo de WhatsApp, onde a isca é entregue. A barra em 90% passa a sensação de "quase lá" e segura a pessoa no último passo, e a contagem regressiva redireciona sozinha caso ela não clique.

Ver modelo

Nome da isca

Subtítulo ou nome do evento

90%

Falta só 1 passo pra concluir o seu cadastro

Atenção!

Pra ter acesso à isca, é necessário que você entre no grupo oficial do WhatsApp.

ENTRAR NO GRUPO DO WHATSAPP

Ou aguarde alguns segundos pra ser redirecionada pro grupo exclusivo do WhatsApp.

Na próxima tela, aperte "Entrar na conversa".

Só existe um botão, o do WhatsApp, e a contagem regressiva (7 segundos, aqui rodando em loop só pra demonstrar) faz o mesmo trabalho sozinha ao chegar em 0. A barra de progresso é sempre em 90%, nunca 100%, pra indicar que ainda falta o passo. O texto da próxima tela ("Entrar na conversa") evita que a pessoa trave no aviso do próprio WhatsApp. Rodapé reduzido a só o copyright, de propósito: nesta página nada deve tirar a pessoa do caminho. Linka para: grupo de WhatsApp.

03Página de UpsellEm construção

Hero e estrutura ainda não definidos — oferta complementar mostrada logo após a compra principal.

04Página de Captura

Página completa — hero com formulário (inspiração: inscrição em evento)

Foco em capturar nome, e-mail e telefone em troca de uma isca, sem venda direta. Cinco dobras sobre a placa de vidro (versão escura: Hero escuro, alterna a partir daí): Hero com título, infos rápidas, formulário e foto; frase de condição + pontos que a pessoa leva; para quem é; quem apresenta; rodapé. Todo o texto é genérico, o conteúdo real entra na hora de criar a página.

Ver modelo

palavra

NOME DA ISCA

Frase com a promessa principal da isca

Data da isca Horário Onde acontece

foto

Frase curta com a condição principal da isca.

Título que introduz o que a pessoa vai levar:

Título 1

Descrição curta explicando esse ponto.

Título 2

Descrição curta explicando esse ponto.

Título 3

Descrição curta explicando esse ponto.

Título 4

Descrição curta explicando esse ponto.

QUERO PARTICIPAR

Para quem é a isca?

Frase curta pra pessoa se reconhecer no perfil.

Perfil 1

Descrição curta de quem se encaixa nesse perfil e do que essa pessoa busca.

Perfil 2

Descrição curta de quem se encaixa nesse perfil e do que essa pessoa busca.

Perfil 3

Descrição curta de quem se encaixa nesse perfil e do que essa pessoa busca.

Perfil 4

Descrição curta de quem se encaixa nesse perfil e do que essa pessoa busca.

QUERO PARTICIPAR

Conheça:

Nome de quem apresenta

Parágrafo de apresentação com a trajetória e a credibilidade, em linguagem direta e sem enrolação.

Segundo parágrafo explicando o que essa pessoa já entregou e por que isso importa pra quem está chegando agora.

Frase final convidando a pessoa a dar o próximo passo.

Só existe um botão que envia: o do formulário do Hero. Os outros "Quero participar" são âncora que rolam até ele. O formulário tem 3 campos (nome, e-mail, telefone), e o telefone pode sair se o objetivo for só e-mail. Fotos são placeholder cinza (#595959), a moldura em arco da dobra "Conheça" é o único elemento de formato diferente. Rodapé segue o Rodapé oficial (Formato 1 ou 2), aqui mostrado como placa final com o aviso legal em cima. Como na Placa de vidro, a versão clara é só espelhar (Hero claro, escuras e claras trocam de papel), e o número de dobras não é fixo. Linka para: Página de Obrigado com redirecionamento.

05Site InstitucionalEm construção

Hero e estrutura ainda não definidos — apresentação da marca/negócio, sem foco em uma oferta específica.

Aplicativos

Os tokens de base se aplicam direto, sem precisar redefinir nada:

Pronto pra herdar

Cor: Escala de cinza (ver Cores) como base de UI; complementares só quando solicitadas especificamente
Tipografia: The Seasons em título de tela, Montserrat no restante
Ícones: Lucide React — outline, stroke padrão, sem preenchimento
Raio: --radius-btn (25px) e --radius-card (12px), já definidos em Tokens CSS

Instagram

Card de destaque

Neuroliberdade Feminina

A prisão que ninguém vê

Mulher tem que rir mais, se divertir mais e mandar mais. E ponto.

Aplicação

Feed

Base: Escala de cinza, sem formato travado a um arquétipo
Tipografia: The Seasons (título), Montserrat (corpo)
Tom: Direto + humor constante, mesmo em carrossel "sério"

Stories

Base: Rotina real intercalada com autoridade
Cor: Complementares (viagem, praia) só quando solicitadas — não são padrão nem aqui

Ebooks

Bloco de categoria (real — usado 4x por página nos manuais)

◐

REFLEXÕES

◑

PLANEJAMENTO

◒

RODA DA VIDA

◓

EXERCÍCIOS

Título 19px Montserrat 600, cor #363534 — se repete em fileira de 3-4 pra listar módulos ou pilares.

Modelos de página (template comprado — réplica fiel)

O "Lorem ipsum" é o placeholder de fábrica do template — é onde o texto de cada ebook entra depois. As cores variadas no texto placeholder (laranja, azul, preto) já vêm assim no template original.

Capas

BOSSIN'UP

Guia Glow Lady

by lorennah lobah

Capa · moldura em L

the ultimate

Workbook

by lorennah lobah

Capa · moldura fechada

Workbook

the ultimate handbook

i'm so happy you're here,

gabby wilson

Capa · base do template

Copyright

Bem-vinda ao ebook Bossin'Grow. Este trabalho é protegido por direitos autorais...

Lorennah Lobah

Sumário

Conhecendo sua vida financeira

01. Mapeamento de Gastos

01 · Receitas vs. Despesas — 11

02 · Hábitos Financeiros — 133

03 · Os 4 Pilares da Gestão — 117

02. Dívidas

04 · O que são e os tipos — 117

05 · Priorização — 133

Sumário · versão finalizada

order of items

Table of Contents

01 Lorem ipsum dolor sit amet

02 Lorem ipsum dolor sit amet

03 Lorem ipsum dolor sit amet

04 Lorem ipsum dolor sit amet

Sumário · base do template

Bem-vinda

bem-vinda a este livro

Bem-vinda

Se você está aqui, é porque você olhou pra sua vida financeira e pensou: isso não pode continuar assim.

Talvez você esteja no vermelho. Talvez não esteja, mas também não sobra nada.

LEMBRETE

O que vamos fazer a seguir pode ser desconfortável no começo...

Bem-vinda · versão finalizada

welcome to the course

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Orem ipsum dolor sit amet, consectetur adipiscing elit.

REMINDER

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bem-vinda · base (foto embaixo)

welcome to the course

Welcome

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Orem ipsum dolor sit amet, consectetur adipiscing elit.

Bem-vinda · base (foto em cima)

Sobre mim

meet your instructor

About Me

Lorem ipsum dolor sit amet, consectetur.

Orem ipsum dolor sit amet.

CONTACT INFO:

Phone: +123-456-7890
Email: hello@site.com

COURSE QUESTIONS

hello@site.com

Gabby Wilson

500k Followers
1,900 Students
Satisfaction 100%

Sobre mim · About Me (2 col)

meet your instructor

Hi, I'm Gabby

Lorem ipsum dolor sit amet.

Consectetur adipiscing elit.

CONTACT INFO:

Phone / Email

ANYTHING ELSE:

Lorem ipsum dolor.

Sobre mim · split + redes sociais

conheça sua mentora

Hi, I'm Gabby

Lorem ipsum dolor sit.

Gabby Wilson

Sobre mim · PT

Respiros

Be the change you wish to see in the world

Brand Name

Respiro · citação sobre foto

brand board

Our Mood this is your moment

Respiro · moodboard

a little inspiration for you

Lorem ipsum dolor sit amet, consectetur.

Respiro · colagem de inspiração

O que se repete em todo modelo

Barra preta lateral esquerda — presente em copyright, sumário, sobre mim e respiro. É a costura visual entre as páginas de miolo (a capa usa moldura em L ou fechada em vez da barra).
Eyebrow minúsculo + título grande serifado em caixa alta — usado em toda abertura de seção (Bem-vinda, Sobre mim, Respiros).
Assinatura em script ("Lorennah Lobah") — provavelmente já é a Halimun; confirmar arquivo de origem.
Numeral fantasma (cinza claro, grande, atrás do texto) e a letra "B" gigante no copyright são o mesmo tipo de recurso: marca d'água tipográfica usando a própria identidade.
Callout preto arredondado ("Lembrete"/"Reminder") já usa exatamente #0a0a0a — sem ajuste necessário.
Texto placeholder colorido (laranja/azul/preto alternados) é de fábrica do template — normal ficar assim até o texto real entrar.

Aplicação

Manual / Ebook em PDF

Tipografia: Halimun só em citação de destaque e assinatura; corpo em Montserrat
Tom: Bate-papo entre amigas — "Lady," só na abertura, "Mulher," mid-texto
Bloco repetido: Categoria com ícone (acima) e barra lateral preta em toda página de miolo

Tokens CSS

Pronto pra colar no início de qualquer projeto.

Halimun e The Seasons são fontes de licença (Canva/compradas), não existem como web font pra colar num site. Sem o arquivo real, --font-script cai no fallback Parisienne (já é uma fonte do Google Fonts, precisa importar com <link> no <head>) — sem isso, o navegador usa o genérico cursive, que no Windows/Chrome vira Comic Sans.

:root {
  /* Base — escala de cinza */
  --off-white: #fafafa;
  --gray-100: #f2f2f2;
  --gray-300: #a5a5a5;
  --gray-500: #7f7f7f;
  --gray-600: #595959;
  --gray-800: #363534;
  --black: #0a0a0a;

  /* Complementares */
  --poder-borgonha: #4a1c28;
  --poder-marinho: #0c1c3d;
  --liberdade-verde: #3d4638;
  --liberdade-terracota: #9e5c43;
  --tranquilidade-petroleo: #317177;
  --tranquilidade-creme: #f5f5ef;

  /* CTA (extraído do site real) */
  --cta-gradient: linear-gradient(358deg, #0c440f 0%, #2a9c31 100%);

  /* Tipografia */
  --font-display: 'The Seasons', Georgia, serif;
  --font-body: 'Montserrat', Arial, sans-serif;
  --font-script: 'Halimun', 'Parisienne', cursive;

  /* Espaçamento (extraído do site real) */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 20px;
  --space-5: 30px;
  --space-6: 40px;
  --space-7: 60px;

  /* Raio */
  --radius-btn: 25px;
  --radius-card: 12px;

  /* Layout de site (celular é a base, sobe com min-width) */
  --gutter: 20px;            /* margem lateral */
  --section-y: 40px;         /* respiro vertical de cada seção */
  --container: 1200px;       /* largura máxima, centralizado */
  --measure: 600px;          /* coluna de texto corrido */
  --radius-plate: 20px;      /* placa de vidro */

  /* Tamanho de fonte por papel (celular) */
  --fs-hero: 34px;
  --fs-section: 26px;
  --fs-sub: 22px;
  --fs-body: 16px;
  --fs-button: 15px;
}

/* Tablet: a partir de 768px */
@media (min-width: 768px) {
  :root {
    --gutter: 30px;
    --section-y: 60px;
    --radius-plate: 28px;
    --fs-hero: 44px;
    --fs-section: 30px;
    --fs-sub: 25px;
    --fs-button: 16px;
  }
}

/* Desktop: a partir de 1024px (acima de 1440px nada cresce) */
@media (min-width: 1024px) {
  :root {
    --gutter: 40px;
    --fs-hero: 52px;
    --fs-section: 34px;
    --fs-sub: 28px;
    --fs-body: 17px;
    --fs-button: 17px;
  }
}

Checklist antes de publicar

O preto usado é #0a0a0a
Título em The Seasons, corpo em Montserrat
Cores complementares só entram se foram solicitadas, nunca como base
Contraste confere com o fundo em tudo (texto, logo, ícone, borda) — não só no logo
Tom tem humor constante, mesmo se o assunto for sério
Nenhum jargão de autoajuda ("propósito", "abundância", "frequência", "gratidão")
Botão de CTA usa o gradiente verde oficial, se houver botão
Formato (carrossel/reels/story) não está travado a um único arquétipo
Sem travessão no meio da frase
Se foi verificado o design system completo antes de tomar decisões
Emoji só aparece em cards (ex. Instagram), nunca como ícone de interface ou no meio do texto
Vidro fosco só onde faz sentido (botão, card, selo) — não em logo/marca
Site: fontes seguem a escala por dispositivo (celular, tablet, desktop) e o corpo nunca fica abaixo de 16px no celular
Site: margem lateral 20/30/40px e container de no máximo 1200px, sem rolagem lateral em 375, 768, 1024 e 1440px
Ícones de interface são Lucide e logos de rede social são do conjunto da seção Logos > Ícones, sempre com currentColor, nunca emoji nem logo colorido
Site: alvos de toque de pelo menos 44px e campos de formulário com 48px de altura e fonte de 16px ou mais