Design de Landing Page

Uma landing page não é uma homepage. Uma homepage serve a múltiplas intenções. Uma landing page vence uma única intenção:

uma oferta → um público → uma ação primária.

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

Escopo

Aplica-se a todo trabalho de UI web: landing pages, sites de marketing, componentes, dashboards, protótipos e revisões de design. Quando uma regra aqui conflitar com um padrão do framework, este arquivo vence. Quando o prompt explícito do usuário conflitar 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). Ela diagnostica padrões genéricos e delega a este arquivo para cada valor concreto.

PARTE A — Estratégia e estrutura

A1. Coleta de requisitos

Reúna estes antes de projetar ou escrever. Pergunte apenas o que está faltando, e pergunte em um lote único, em vez de uma pergunta de cada vez.

Propósito

Qual é a ÚNICA ação primária? (teste, demonstração, compra, lista de espera, download)
Qual é a oferta, exatamente o que eles recebem?
O que conta como conversão? (clique, cadastro, compra)

Público e contexto

Quem é o ICP (Perfil de Cliente Ideal)?
Que 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 aterrissam?

Provas 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 mobile?

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 primário, verbo claro mais o que eles recebem
Um sinal de prova, faixa de logotipos, estatística ou depoimento curto
Visual do 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 (manipulação de objeções) 10. FAQ, seis a doze perguntas 11. Reversão de risco, teste, cancele quando quiser, garantia 12. CTA final, idêntico ao do topo

Inclua a seção obrigatória de revelação do slogan (B11) em algum lugar do 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 o porquê.

Tipo	Use quando
A. Herói clássico com seções	O produto é compreensível a partir de uma captura de tela do herói. Mais comum.
B. História em formato longo	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 um download ou lista de espera.
D. Página de comparação	A intenção de busca inclui alternativas ("X vs Y", "melhor para"). Geralmente emparelhada com páginas de SEO.

A4. Regras de conversão

Combine a mensagem com a fonte. Se o tráfego vier 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 primário. Nunca coloque CTAs concorrentes acima da dobra.

Escreva o benefício primeiro. Características são o que o produto faz. Benefícios são o que isso significa para o usuário.

Seja específico.

❌ "Economize tempo e simplifique"
✅ "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 quando quiser, garantia de reembolso.

Trate as objeções como uma seção, não uma nota de rodapé. Mova o FAQ mais para cima para ofertas de alto atrito. 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 recebem. Nunca "Saiba mais" ou "Enviar". Use "Iniciar teste gratuito", "Agendar demonstração", "Obter a lista de verificação".

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

Nota: as regras de copy da 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 os diffs revisáveis.

A7. SEO e AEO

Não indexe páginas de campanha apenas para 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 e meta descrição claros, links internos da homepage e páginas de recurso, e o FAQ em formato de perguntas e respostas simples para AEO. Adicione schema de FAQ se apropriado.

A8. Armadilhas

Muitos CTAs acima da dobra
Proposta de valor vaga: "simplificar", "otimizar"
Uma grande lista de recursos sem resultados
Prova enterrada no final
Layout mobile 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 é permitido junto com uma fonte primária apenas para código, dados ou UI numérica onde um monoespaçado é funcionalmente necessário.

Nunca use pesos ultra negritos (900 / black). Limite a semibold ou bold.

Regras de copy

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 tipo

Sempre resolva os tamanhos de fonte para a escala de tipo 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 tanto o tamanho quanto sua altura de linha emparelhada.

Classe	Tamanho	Altura da 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 ajuste de escala com alturas de linha personalizadas definidas independentemente em outro lugar em uma auditoria. O tracking e a altura da linha só podem ser ajustados dentro do valor que o degrau correspondente já fornece, de modo que as duas regras nunca entrem em conflito.

Tipo de botão

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

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 padding vertical, 12px de padding 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 distância entre elas é menor que 32px:

raio interno = raio externo − distância

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

Exemplo: um card externo com rounded-2xl (16px) com 8px de padding 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 card. As bordas vão ao redor de tudo ou não vão.
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 do 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 estranhamente 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 massa do mundo real e física de mola através de curvas cúbicas bezier personalizadas.

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

Navegação ilha fluida

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

Morfismo do hambúrguer. Ao clicar, as linhas do hambúrguer rotacionam 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 suave e pesado aparecimento gradual para cima:

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

em 800ms ou mais.

Para revelações baseadas em JavaScript, use IntersectionObserver ou whileInView do Framer Motion. Nunca use window.addEventListener('scroll') — isso causa reflows contínuos e prejudica o desempenho mobile.

B8. Realismo de conteúdo

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

Sem Lorem Ipsum. Escreva um texto de rascunho real.
Sem "João Silva". Use nomes diversos e realistas.
Sem marcas de espaço reservado como "Acme Corp", "Nexus", ou "SmartFlow". Invente nomes contextuais e acreditáveis.
Sem números redondos falsos como 99,99%, 50%, R$ 100,00. Use dados orgânicos: 47,2%, R$ 99,00, +55 (11) 9847-1928.
Sem clichês de IA. Nunca "Eleve", "Integrado", "Desencadeie", "Próxima Geração", "Mudança de jogo", "Aprofunde-se", "Tapeçaria", ou "No mundo de".
Cabeçalhos em letra minúscula, não "Título Em Caixa Alta 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: "Conexão falhou. Por favor, tente novamente."
Avatares únicos por pessoa e datas de postagem de blog variadas.

B9. Estados

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

Hover — mudança de fundo, leve escala ou translate
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 — esqueletos de carregamento moldados como o layout real, não spinners circulares
Vazio — uma visão composta de "primeiros passos", nunca um painel em branco
Erro — inline e específico. Nunca window.alert().

Sem links mortos. Um botão apontando para # está ou linkado 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 no lado do cliente para formato de e-mail e campos obrigatórios
Um link "Pular para o 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 do slogan (obrigatória)

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

Texto

Mínimo de duas linhas de texto.
Uma declaração de benefício ou slogan, escrita na voz da 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 tipo B1.
Largura máxima limitada como o herói, para que as linhas quebrem em pontos significativos de acordo com B5.

Animação

O texto começa em um tom sutil e suave, aproximadamente 25 a 35% da opacidade da cor base do texto 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, na ordem de leitura.
As palavras ativam uma de cada vez à medida que cruzam uma linha de gatilho, não o bloco inteiro mudando de uma vez. A transição usa a curva de easing personalizada da B7, nunca um fade linear.
Implemente com IntersectionObserver por palavra, ou um único listener de rolagem limitado através de requestAnimationFrame. Nunca um listener de rolagem não limitado.

Perguntar na sua IA favorita

Documentação