Design de Landing Page

Uma landing page não é uma homepage. Uma homepage atende a múltiplas intenções. Uma landing page conquista uma intenção:

uma oferta → um público → uma ação principal.

Este skill tem duas metades. Parte A decide o que a página diz e como é estruturada. Parte B é o sistema visual não negociável. Trabalhe na Parte A antes de tocar na Parte B.

Escopo

Aplicar a todo trabalho de UI web: landing pages, sites de marketing, componentes, dashboards, protótipos e revisões de design. Quando uma regra aqui entra em conflito com um padrão de framework, este arquivo vence. Quando o prompt explícito do usuário entra em conflito com uma regra, o usuário vence.

Skill complementar. Para atualizar um site existente em vez de construir um novo, use redesign-existing-projects (github.com/elayadesign/redesign-skill). Ele diagnostica padrões genéricos e delega a este arquivo para cada valor concreto.

PARTE A — Estratégia e estrutura

A1. Perguntas iniciais

Colete estas antes de projetar ou escrever. Pergunte apenas pelo que está faltando e pergunte em um lote, em vez de uma pergunta de cada vez.

Propósito

Qual é a ÚNICA ação principal? (teste, demonstração, compra, lista de espera, download)
Qual é a oferta, exatamente o que eles obtêm?
O que conta como conversão? (clique, inscrição, compra)

Público e contexto

Quem é o ICP (Perfil de Cliente Ideal)?
Qual problema eles estão tentando resolver?
As três principais objeções, ou seja, por que eles não convertem hoje
Fonte de tráfego: anúncios, busca, redes sociais, e-mail
O que os visitantes já sabem quando chegam?

Prova e ativos

Pontos de prova: logotipos, depoimentos, números, estudos de caso
Capturas de tela, vídeo de demonstração, GIFs do produto
Garantias, termos de reembolso, termos de cancelamento

Restrições

Tom da marca: casual ou profissional
Direção de design: editorial minimalista, 3D lúdico, UI de vidro
Prioridade móvel?

Se o usuário não puder responder, faça uma suposição razoável, declare-a em uma linha e continue. Não pare a construção.

A2. Estrutura da página

Acima da dobra (obrigatório)

Título, resultado mais público
Subtítulo, esclarece como e adiciona especificidade
CTA principal, verbo claro mais o que eles obtêm
Um sinal de prova, faixa de logotipos, estatística ou depoimento curto
Visual de herói, captura de tela do produto ou vídeo, ou uma ilustração forte

Meio da página (o argumento) 6. Problema para solução, uma seção 7. Benefícios, três a cinco, orientados a resultados 8. Como funciona, três etapas 9. Prova social, depoimentos ou um estudo de caso

Parte inferior (tratamento de objeções) 10. FAQ, seis a doze perguntas 11. Reversão de risco, teste, cancele a qualquer momento, garantia 12. CTA final, idêntico ao de cima

Inclua a seção obrigatória de revelação de tagline da B11 em algum lugar no argumento do meio da página, tipicamente logo após o herói ou após os benefícios.

A3. Seleção de layout

Escolha um e diga por quê.

Tipo	Use quando
A. Herói clássico mais seções	O produto é compreensível a partir de uma captura de tela do herói. Mais comum.
B. História longa	Você precisa educar e superar o ceticismo.
C. Página de conversão mínima	Tráfego de alta intenção (e-mail para usuários conhecidos), ou uma oferta curta como download ou lista de espera.
D. Página de comparação	A intenção de busca inclui alternativas ("X vs Y", "melhor para"). Geralmente pareada com páginas de SEO.

A4. Regras de conversão

Combine a mensagem com a fonte. Se o tráfego vem de anúncios, espelhe o título do anúncio no herói e mantenha a mesma promessa e tom visual.

Torne o próximo passo óbvio. Um CTA principal. Nunca coloque CTAs concorrentes acima da dobra.

Escreva o benefício primeiro. Características são o que faz. Benefícios são o que isso significa para eles.

Seja específico.

❌ "Economize tempo e otimize"
✅ "Reduza seu relatório semanal de 4 horas para 15 minutos"

Reduza o risco. Escolha pelo menos um: teste gratuito, plano gratuito, sem cartão de crédito, cancele a qualquer momento, garantia de reembolso.

Trate as objeções como uma seção, não uma nota de rodapé. Mova o FAQ para mais cedo para ofertas de alta fricção. Coloque a prova diretamente ao lado da afirmação que ela suporta.

A5. Copywriting

Fórmulas de título

"{Resultado} sem {dor}"
"O {categoria} para {público}"
"Entregue {resultado} em {tempo}"

Subtítulo. Uma ou duas frases. Esclareça o que é e para quem é.

CTA. Verbo mais o que eles obtêm. Nunca "Saiba mais" ou "Enviar". Use "Iniciar teste gratuito", "Agendar demonstração", "Obter a lista de verificação".

Marcadores de benefício. Negrito no benefício, depois a prova ou detalhe. Exemplo: Iteração mais rápida — gere três variantes de layout em um clique.

Nota: as regras de cópia em B1 ainda se aplicam. Sem hífens dentro de frases, sem palavras órfãs.

A6. Ordem de construção

Trabalhe seção por seção, nesta ordem:

Herói
Benefícios
Como funciona
Prova
FAQ
CTA final

Nunca reconstrua a página inteira em cada iteração. Seção por seção mantém o controle e mantém os diffs revisáveis.

A7. SEO e AEO (Otimização para Motores de Resposta)

Não indexe páginas de campanha apenas de anúncios ou ofertas altamente limitadas no tempo. Use noindex ou mantenha-as atrás de um caminho não indexado.

Indexe ofertas perenes e páginas onde a intenção de busca corresponde à promessa. Adicione um título claro e meta descrição, links internos da homepage e páginas de recurso, e o FAQ em forma de pergunta e resposta simples para AEO. Adicione esquema de FAQ se apropriado.

A8. Armadilhas

Muitos CTAs acima da dobra
Proposta de valor vaga: "otimizar", "simplificar"
Uma grande lista de recursos sem resultados
Prova enterrada no final
Layout móvel que quebra a legibilidade
Nenhum próximo passo claro

PARTE B — Sistema visual

Cada valor visual deve ser resolvido através destas regras em vez de ser inventado ad hoc.

B1. Tipografia

Fontes

Use: Geist, Manrope, Geist Mono, Poppins.

Nunca use: Inter, Roboto, Arial, Open Sans, Helvetica.

Nunca use fontes itálicas em nenhum lugar da interface.

Um tipo de letra por site. Não combine duas fontes a menos que o prompt peça explicitamente. Geist Mono é permitida junto com uma fonte primária apenas para código, dados ou UI numérica onde uma monoespaçada é funcionalmente necessária.

Nunca use pesos ultra negritos (900 / black). Limite a seminegrito ou negrito.

Regras de cópia

Sem hífens no texto. Não use - dentro de corpo de texto, títulos ou rótulos. Reescreva a frase.

Sem palavras órfãs. Uma única palavra nunca deve ficar sozinha na última linha. Aplique text-wrap: balance para títulos e text-wrap: pretty para corpo de texto.

Escala de tipos

Sempre resolva os tamanhos de fonte para a escala de tipos padrão do Tailwind. Nunca deixe valores arbitrários no lugar, incluindo text-[19px], font-size: 22px ou 1.4rem.

Se um tamanho existente não cair exatamente em um degrau, ajuste-o para o degrau mais próximo abaixo, levando em conta tanto o tamanho quanto sua altura de linha emparelhada.

Classe	Tamanho	Altura de linha
`text-xs`	12px (0.75rem)	16px
`text-sm`	14px (0.875rem)	20px
`text-base`	16px (1rem)	24px
`text-lg`	18px (1.125rem)	28px
`text-xl`	20px (1.25rem)	28px
`text-2xl`	24px (1.5rem)	32px
`text-3xl`	30px (1.875rem)	36px
`text-4xl`	36px (2.25rem)	40px
`text-5xl`	48px (3rem)	1
`text-6xl`	60px (3.75rem)	1
`text-7xl`	72px (4.5rem)	1
`text-8xl`	96px (6rem)	1
`text-9xl`	128px (8rem)	1

Não combine o encaixe de escala com alturas de linha personalizadas definidas independentemente em outro lugar em uma auditoria. O rastreamento e a altura de linha só podem ser ajustados dentro do valor que o degrau correspondente já fornece, para que as duas regras nunca entrem em conflito.

Tipo de botão

Botões principais: text-base (16px), seminegrito.
Botões de cabeçalho menores: text-sm (14px), seminegrito.

B2. Espaçamento

Apenas estes valores. Nada entre eles, nada fora deles.

Token	Valor
Spacing-0	0
Spacing-25	2px
Spacing-50	4px
Spacing-75	8px
Spacing-100	12px
Spacing-200	16px
Spacing-300	24px
Spacing-400	32px
Spacing-500	40px
Spacing-600	48px
Spacing-700	64px
Spacing-800	80px
Spacing-900	96px

Botões principais: 8px de preenchimento vertical, 12px de preenchimento horizontal.

B3. Raio de canto

Use apenas os valores de raio do Tailwind.

Fórmula de raio aninhado. Quando uma forma está dentro de outra forma e a lacuna entre elas é menor que 32px:

raio interno = raio externo − lacuna

Aplique isso apenas quando o resultado for maior que 2. Abaixo disso, deixe a forma interna quadrada ou inalterada.

Exemplo: um cartão externo com rounded-2xl (16px) com 8px de preenchimento interno dá a um elemento interno um raio de 8px (rounded-lg).

B4. Bordas e fundos

Nunca aplique uma borda a apenas um lado de um cartão. Bordas vão ao redor de tudo ou nada.
Nunca use gradientes em fundos. Fundos são sólidos.

Cores de fundo do modo escuro

Use apenas estas:

#000000 · #181818 · #1F1F1F · #272727 · #313131 · #131209

B5. Seção de herói

Cor do título

Tema escuro: gradiente da esquerda para a direita no texto do título, #FFFFFF → #9B9B9B.
Tema claro: gradiente da esquerda para a direita no texto do título, #000000 → #666666.

Este é o único lugar onde gradientes são usados, e apenas no texto, nunca no fundo.

Layout

O título e o subtítulo recebem uma largura máxima de 680px.
Leia o texto do título e insira quebras de linha em pontos significativos.
Nunca quebre uma linha de uma forma que corte uma frase de forma estranha ou torne a frase mais difícil de ler. Quebre onde o pensamento quebra.

B6. Ícones

Use: Phosphor, Solar ou Iconamoon.

Nunca use: Material Icons, Material Symbols.

B7. Coreografia de movimento (dinâmica de fluidos)

Nunca use transições padrão. Todo movimento simula física de massa e mola do mundo real através de curvas cúbicas de Bézier personalizadas.

 transition-all duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]

Navegação flutuante ilha

Estado fechado. A barra de navegação é uma pílula de vidro flutuante destacada do topo: mt-6, mx-auto, w-max, rounded-full.

Morph do menu hambúrguer. Ao clicar, as linhas do menu hambúrguer giram e se traduzem fluidamente em um X perfeito usando rotate-45 e -rotate-45 com posicionamento absoluto. Elas nunca devem simplesmente desaparecer.

Expansão modal. O menu abre como uma sobreposição de tela inteira com um efeito de vidro pesado: backdrop-blur-3xl bg-black/80 ou bg-white/80.

Revelação com máscara escalonada. Os links de navegação dentro do estado expandido aparecem gradualmente e deslizam para cima a partir de uma caixa invisível, translate-y-12 opacity-0 resolvendo para translate-y-0 opacity-100, escalonados por item com delay-100, delay-150, delay-200 e assim por diante.

Interpolação de rolagem

Os elementos nunca aparecem estaticamente no carregamento. Ao entrar no viewport, eles executam um fade up gentil e pesado:

 translate-y-16 blur-md opacity-0  →  translate-y-0 blur-0 opacity-100

por 800ms ou mais.

Para revelações orientadas por JavaScript, use IntersectionObserver ou whileInView do Framer Motion. Nunca use window.addEventListener('scroll') — causa reflows contínuos e mata o desempenho móvel.

B8. Realismo de conteúdo

Nunca envie preenchimento. Estes são os sinais de que uma página foi gerada em vez de criada.

Sem Lorem Ipsum. Escreva um rascunho de cópia real.
Sem "João Silva". Use nomes diversos e realistas.
Sem marcas placeholder como "Acme Corp", "Nexus" ou "SmartFlow". Invente nomes contextuais e críveis.
Sem números falsos redondos como 99,99%, 50%, $100,00. Use dados orgânicos: 47,2%, $99,00, +1 (312) 847-1928.
Sem clichês de IA. Nunca "Eleve", "Perfeito", "Liberte", "Nova Geração", "Mudança de Jogo", "Aprofunde", "Tapeçaria" ou "No mundo de".
Cabeçalhos em letra minúscula, não Título Maiúsculo Em Tudo.
Voz ativa. "Não foi possível salvar suas alterações", não "Erros foram cometidos".
Sem pontos de exclamação em mensagens de sucesso, e sem "Ops!" em erros. Seja direto: "Falha na conexão. Tente novamente."
Avatares únicos por pessoa e datas de postagem de blog variadas.

B9. Estados

Todo elemento interativo é enviado com seu conjunto completo de estados:

Hover — mudança de fundo, leve escala ou tradução
Ativo — scale(0.98) ou translateY(1px) para feedback físico
Foco — um anel de foco visível. Requisito de acessibilidade, não opcional.
Carregamento — carregadores de esqueleto em forma de layout real, não spinners circulares
Vazio — uma visualização "primeiros passos" composta, nunca um painel em branco
Erro — embutido e específico. Nunca window.alert().

Sem links mortos. Um botão apontando para # está ou vinculado ou visualmente desabilitado. A página atual deve ser indicada na navegação.

B10. Requisitos de envio

Coisas que são esquecidas e fazem uma página parecer inacabada:

Links de política de privacidade e termos no rodapé
Um 404 personalizado e com marca
Validação de formulário do lado do cliente para formato de e-mail e campos obrigatórios
Um link de pular para conteúdo para usuários de teclado
Consentimento de cookies onde a jurisdição exige
Um favicon com marca
<title>, meta descrição, og:image e tags de compartilhamento social
Texto alternativo em cada imagem significativa
HTML semântico: <nav>, <main>, <article>, <aside>, <section>
Um caminho de volta de cada página

B11. Seção de revelação de tagline (obrigatória)

Toda landing page inclui uma seção de tipo grande declarando o benefício central ou tagline, separada do herói. Ela fica mais abaixo na página como seu próprio momento, não empilhada diretamente sob o herói.

Cópia

Mínimo duas linhas de texto.
Uma declaração de benefício ou tagline, escrita na voz de A5, não um título de seção genérico.

Tipografia

Tamanho text-4xl a text-6xl dependendo do número de linhas, seguindo a escala de tipos B1.
Largura máxima limitada como o herói, para que as linhas quebrem em pontos significativos conforme B5.

Animação

O texto começa em um tom sutil e suave, aproximadamente 25 a 35% de opacidade da cor base do tema.
À medida que a seção rola para a visualização, cada palavra transita individualmente desse tom suave para a cor total do texto, em ordem de leitura.
As palavras ativam uma de cada vez conforme cruzam uma linha de gatilho, não o bloco inteiro virando de uma vez. A transição usa a curva de easing personalizada de B7, nunca um fade linear.
Implemente com IntersectionObserver por palavra, ou um único ouvinte de rolagem acelerado através de requestAnimationFrame. Nunca um listener de rolagem sem aceleração. Um listener de rolagem sem throttling causa reflows contínuos e degrada o desempenho.

Perguntar na sua IA favorita

Documentação