website-vsl-standard

Padrão Website VSL (o método olaceo)

v1.0.0, 25 de outubro de 2026. Escrito a partir do código de referência do olaceo.com e seus logs de medição, não de memória. Cada número abaixo é:

• medido: copiado do código de referência ou de um log de verificação da build de referência, ou
• marcado como NÃO VERIFICADO: um alvo, uma afirmação externa, ou ainda não medido. Não cite estes como fatos para um cliente.

Arquivos que acompanham este padrão (caminhos relativos a este arquivo):

• reference/tokens.css: o bloco de tokens real (claro e escuro), tipo base, grade, botões, entradas, herói, pílula e transições.
• reference/motion.js: o código real de molas, elástico, velocidade, projeção de flick e o VSL sem pular.
• templates/client-intake.md: o formulário de preenchimento para o Passo 1.

A filosofia em uma tela (leia isto primeiro)

1. Um visitante, um trabalho, um próximo passo. Cada pessoa que chega tem um objetivo. O trabalho do site é descobrir quem é essa pessoa em um toque, depois mostrar apenas o que a move para frente. O atrito é o inimigo.
2. Frente quieta, maquinário trabalhando por baixo. A superfície é espaço em branco, uma tipografia, um acento e fotos reais ou um vídeo real. A inteligência (roteamento, player sem pular, rastreamento, CRM) é invisível.
3. Comprovantes, não alegações. Nenhuma estatística inventada, logotipos, depoimentos, escassez ou contagens regressivas. Se a prova não existir, o espaço fica oculto ou o FAQ diz 'ainda não, e não inventaremos nenhuma'. A build falha em alegações proibidas.
4. Todo mundo sai para algum lugar útil. Sem becos sem saída e sem linguagem de rejeição ('não é adequado', 'não qualificado'). Um visitante que não está pronto recebe o caminho gratuito.
5. O movimento é líquido, não de vidro. O movimento segue a física (molas, velocidade, elástico). Nunca decora e sempre respeita movimento reduzido. Pense em água se fundindo com uma poça, não em vidro.
6. Medido, não estimado. Centralização, deslocamento de layout, quedas de quadro e posições de dobra são medidas em px e ms antes de alguém considerá-las prontas.

Por que funciona (o ângulo psicológico):

• Auto-seleção na porta. As pessoas confiam em uma página que as nomeia. 'Qual você é?' faz o visitante fazer a segmentação, então cada palavra seguinte pode falar para uma pessoa. Também custa um toque, não um formulário.
• Valor antes do pedido. O H1 declara o resultado que o ICP deseja (tempo, dinheiro, a habilidade que falta), não o serviço. Dois praticantes de funil VSL colocaram assim: Haynes, 'uma declaração clara e direta sobre o que é sua oferta e para quem'; Iles, 'fale sobre o resultado, não sobre o serviço'.
• Menos escolhas, mais ação. Um CTA primário por página. Caminhos secundários são links de texto silenciosos, nunca um segundo botão.
• Calmo = confiável. Moderação (espaço em branco, um acento, tipo grande e leve) é lido como premium e confiante. Desordem é lida como carente. Este é um julgamento de design da build de referência. NÃO VERIFICADO como um efeito de conversão medido.
• Compromisso ao assistir. O VSL não pode ser pulado para frente, então o CTA encontra alguém que ouviu o argumento inteiro. A tela final coloca o CTA bem ali.

---

Passo 1. Intake: quem entra, o que querem, o que os impede

Faça isso antes de qualquer pixel. Preencha templates/client-intake.md com o cliente.

Para cada ICP, anote:

• Nome nas palavras deles, a forma como se descreveriam em um cartão. olaceo: 'Eu tenho um negócio' / 'Eu construo com IA'.
• Objetivo: o único resultado que vieram buscar. Donos compram resultados ('economizar dinheiro, economizar tempo, ganhar dinheiro'), não ferramentas.
• Principal objeção: o motivo pelo qual sairiam. Construtor: 'Eu sei construir, mas congelo em chamadas de vendas'. Dono: 'Não sei o que a IA poderia resolver no meu negócio'.
• Prova de que precisam: apenas a prova real que você realmente tem.
• Próximo passo: a única ação para aquele ICP (agendar uma chamada, iniciar um passo a passo, comprar, baixar).
• Regra de preço: mostrar ou ocultar. O funil de negócios do olaceo não mostra PREÇOS ('Diagnosticamos antes de orçar'), imposto pela build.

Regras:

• 2 ICPs é a referência. Mais de 3 portas em um roteador dilui a divisão. NÃO VERIFICADO (julgamento, não testado).
• Se você não conseguir escrever uma frase para o objetivo de um ICP, ainda não pode construir a página dele. Pare e pergunte.

Passo 2. A divisão de entrada (roteador em '/')

O que: a página inicial é um roteador. Uma pergunta e um cartão grande por ICP. Nenhuma parede de cópia de herói, nenhum menu de navegação.

Build de referência (página do roteador e seus estilos; ativa no olaceo.com desde 24 de outubro de 2026):

• H1 = a marca nominativa mais uma linha nomeando ambos os públicos ('IA que paga, para donos de negócios e os construtores que a vendem.'). Leitores de tela a obtêm como texto real.
• Pergunta: 'qual você é?' (minúsculo, quieto). Margem 56px 0 18px.
• Cartões: 2 por linha, 340px cada, intervalo de 16px, altura de 200px, raio 22px, borda rgba(18,24,32,.09). Disco da seta 44px. Hover levanta -2px; ativo escala .985.
• Mobile: 1 coluna até 420px de largura, cartões com 108px de altura.
• Cada cartão é um simples <a href>. Funciona sem JS.
• Escolha lembrada: localStorage ola_path. Um retorno lê 'bem-vindo de volta' e o último cartão recebe um chip 'continuar' discreto.
• Nunca redirecionar automaticamente. Por que: o logotipo em todas as páginas linka para '/', então o roteamento automático prenderia qualquer um que escolheu a porta errada.
• Links diretos (anúncios, e-mails, PDFs) vão direto para a página do ICP e nunca tocam no roteador.
• Membros recebem um link de texto discreto abaixo dos cartões ('Já é membro? Faça login'): 13px, #6B7580, alvo de toque de 44px.
• Carregador: CSS puro na marca nominativa do próprio h1. Executa por 1.78s, um retorno na mesma sessão obtém 0.4s, e movimento reduzido obtém um único fade de 0.4s. Nenhuma requisição extra, CLS 0.
• Saída: uma transição de visualização entre documentos, usada apenas do roteador para o caminho: saída de .3s, entrada de .5s cubic-bezier(.22,1,.36,1).
• Rodapé: uma fileira discreta de links secundários (guia gratuita, agendamento, sobre, privacidade, termos).
• JSON-LD: Organization, Person, WebSite, mais um WebPage com hasPart para cada caminho.

Medido na build de referência: escolhas, marca nominativa e pergunta centralizados dentro de 0.02px; empilhados verticalmente centralizados em 0.000px; suíte de testes do roteador 39/39.

Passo 3. Caminho por ICP: direto ao valor

Cada página de ICP segue a mesma espinha dorsal: título, vídeo, uma ação.

1. Sobrancelha: para quem é, em palavras simples. 'Para donos de negócios'.
2. H1: o resultado. 12 palavras ou menos.
3. Lede: uma linha. Como você o entrega.
4. VSL: grande e centralizado (passo 3a).
5. Um CTA logo abaixo do vídeo, visível desde o carregamento, sem revelação atrasada. Letras miúdas abaixo dele removem o medo: 'Grátis. 30 minutos. Sem pitch deck.'.
6. Prova diretamente abaixo do herói: honesta apenas ('O que entregamos').
7. Depois apenas o que responde às objeções, nesta ordem: problemas (nas palavras deles), o que você encontra ou faz, como funciona (3 passos), escada de oferta, FAQ (com uma resposta direta sobre custo), e um CTA de fechamento em sangria que repete a única ação.

Ordens de referência:

• /business: herói VSL, O que entregamos, Problemas (4), O que a auditoria encontra (6, numerados), Como funciona (Walkthrough, Diagnóstico, Construção), Escada, FAQ, CTA de fechamento (link de texto alternativo para a verificação gratuita do site).
• /builders: herói VSL, #book (calendário inline, 'Escolha um horário.'), para quem é, sobre o fundador, FAQ.

Regras:

• Nenhum botão de agendamento no cabeçalho. O cabeçalho é apenas a marca nominativa (mais links de texto Sobre/FAQ quando necessário). Por que: um segundo CTA no topo compete com o vídeo.
• Pílula flutuante espelhando o único CTA da página. Aparece apenas depois que o CTA do herói sai da tela e se oculta sobre o calendário, formulários, o CTA de fechamento e o rodapé ([data-fc-hide]). Fica centralizada no fundo 20px + área segura. Movimento reduzido: apenas fade.
• Páginas de nicho (/for/<slug>) são um arquivo JSON mesclado sobre um JSON padrão, então um nicho lista apenas o que muda.
• Agende no lugar onde puder. O CTA rola para um calendário inline, não para outro site, para que o visitante nunca saia da página para agendar. NÃO VERIFICADO como um aumento medido no nosso próprio tráfego.

3a. Layout do VSL e regras do player (ativo no olaceo.com /business e /builders)

Layout (código em reference/tokens.css, 'herói VSL centralizado'):

• Sobrancelha rastreando .08em, margem inferior 14px.
• H1: clamp(40px,3.3vw,56px)/1.05, largura máxima 880px.
• Lede: clamp(17px,1.35vw,19px), largura máxima 720px, 12px abaixo do H1.
• Vídeo: width:min(880px,92vw,calc((100svh - 330px)*16/9)), 22px abaixo do lede, raio 16px, sombra 0 24px 60px -28px rgba(10,30,50,.35). O termo de altura mantém o CTA acima da dobra em laptops curtos.
• CTA: largura mínima 320px, altura 56px.
• Medido: em 1440x900 o vídeo é 880x495 e o botão fica em y 744-800 (dentro da dobra). Em 1280x720 o vídeo é 693x390. Em 390x844 o vídeo 4:5 é 358x448 e o botão fica em y 712-768.
• Mobile: H1 32px/1.08, lede 15px. O arquivo 4:5 é usado apenas em um telefone na vertical (max-width:699px) and (orientation:portrait). Na rotação ele troca os arquivos no mesmo segundo. Sempre object-fit:contain, então as palavras nunca são cortadas.

Player (trecho de código em reference/motion.js parte C):

• Antes do primeiro toque: um loop de pré-visualização mudo com um desfoque de 18px e escala 1.1 (12px e 1.13 no mobile), um título estático sobre um botão de play de 112px (círculo interno de 92px; 100/80 no mobile), e 'Toca com som' abaixo dele. O primeiro toque remove o desfoque em .42s, reinicia em 0:00 com som, e o desfoque nunca retorna.
• Sem pular para frente: maxW cresce apenas através da reprodução natural (cada passo abaixo de 1.5s). Qualquer busca além de maxW + 0.3s volta imediatamente. A taxa de reprodução é fixada em 1. Sem PiP, reprodução remota, download ou tela cheia nativa; iOS permanece inline. Retroceder e pausar são sempre permitidos. Teclas: Espaço/K alterna, J -10s, Esquerda -5s, Início; Direita apenas dentro da parte já assistida.
• Controles: a barra se oculta automaticamente 2s após o início da reprodução. Botões 44px (48 no mobile). Trilha 4px (6px no hover), polegar 14px.
• Tela final: o CTA (focado) mais 'Assistir novamente'.
• Eventos: VideoPreview, VideoSoundOn, VideoView25/50/75/100, VideoReplay.
• Qualidade: 4K é servido apenas em telas grandes com alto DPR quando mediaCapabilities relata decodificação suave. Se 4K falhar, volta para 1080 no mesmo segundo com o som mantido. (Padrão de bug conhecido: uma queda que silencia. Correção: silenciar apenas em NotAllowedError.)
• Centralização do botão de play: o halo, círculo e SVG compartilham uma célula de grade (inset 0, margin auto, sem transformações), e o centroide da área do triângulo está +0.5px à direita. Medido 0.000px fora do centro no DSF 3.
• Por que sem pular: o CTA deve encontrar alguém que ouviu o argumento inteiro. Por que o desfoque: diz 'isto é um vídeo, toque nele' sem reproduzir som automaticamente.
• Metas: VSL de 5 minutos ou menos. Taxa de reprodução e metas de engajamento de 50% ou mais vêm do método VSL de Haynes. NÃO VERIFICADO: ainda não temos uma taxa de reprodução medida.

3b. Formulários e atrito

• Uma tela, no máximo 3 campos (referência: nome, e-mail, site ou nome do negócio). Sem etapas, sem barra de progresso. A qualificação acontece na chamada e no CRM.
• Cada campo recebe o autocomplete, inputmode, autocapitalize, spellcheck=false adequado onde necessário, e enterkeyhint (próximo, próximo, ir). Enter move para o próximo campo.
• Honeypot, verificação de mesma origem, limite de tamanho e limite de taxa no servidor. Funciona sem JS (um action real + method="post").
• O botão diz o que acontece: 'Agende meu walkthrough'. Letras miúdas abaixo dele: 'Usamos isso apenas para configurar seu walkthrough. Sem lista, sem spam.'.
• Telefone apenas se for opcional e perguntado após o compromisso, com uma caixa de consentimento SMS separada e desmarcada cuja redação a build verifica.
• Histórico (por que): um quiz de tap de 8 telas foi construído primeiro e depois removido ('sem oito toques, em menos de dois minutos'). Não construa quizzes de múltiplas etapas.

3c. Regras de cópia (impostas quando possível)

• Nome da marca em minúsculo ('olaceo') em todos os lugares, mesmo dentro de sobrancelhas maiúsculas (<span class="lc">). Para um cliente, use a regra de capitalização da própria marca.
• Sem travessões (em dash). A build falha em U+2014 na cópia de nicho.
• Sem preços no funil de negócios enquanto BIZ_SHOW_PRICES for falso. A build falha em $<digito> no HTML renderizado.
• Sem estatísticas inventadas, alegações de %, logotipos, depoimentos ou nomes de produtos não lançados na cópia de nicho. A build falha nestes (bannedProof).
• Valor primeiro: o resultado no H1, o mecanismo no lede, o removedor de medo abaixo do CTA.
• Palavras simples, frases curtas, contrações, segunda pessoa. As páginas do construtor do olaceo usam a voz do fundador ('Fam, ...'), nunca 'bro' (a build falha nessa palavra em e-mails).
• Seletividade encoberta: apenas especificidades, nunca 'selecionados a dedo', 'escolhidos' ou 'exclusivo'.
• Nunca alegações de 'hackeado': 'poderia', nunca 'é'.
• Um aviso de ganhos em páginas de coaching ou renda.

Passo 4. Tokens: tipo, espaçamento, grade, cor, tema

Copie reference/tokens.css. Mantenha cada valor não relacionado a cor. Troque as cores para o cliente.

Tipografia (por que: uma face variável mantém a calma e economiza uma requisição; títulos grandes e leves são lidos como premium):

• Uma família, woff2 variável auto-hospedada 300-700, font-display:swap, pré-carregada. Fallback: system-ui, -apple-system, 'Segoe UI', sans-serif.
• Corpo: 400, 1.0625rem/1.6. Pequeno: .9375rem.
• H1: peso 300, clamp(2.625rem,5.4vw,5rem), line-height 1.04, tracking -.03em.
• H2: peso 400, clamp(2rem,3.4vw,3.125rem), 1.1, -.025em.
• H3: 1.25rem, 600, 1.3, -.01em.
• text-wrap:balance em títulos.
• Comprimentos de linha: lede 34ch, corpo 60ch, parágrafo de linha de cabeçalho 38ch.

Espaçamento e grade (por que: ritmo fixo grande = calma; clamp() mantém um sistema de 320 a 2560):

• Margem lateral --m clamp(20px,4vw,64px).
• Preenchimento de seção --gap clamp(96px,11vw,168px).
• Container 1360px máximo.
• 12 colunas, gap clamp(16px,2vw,32px).
• Margem inferior do bloco de título de seção clamp(40px,4.4vw,64px).
• Breakpoints: 900, 700/699 e 560px.
• Raios: cartões 22px, pequeno 16px, ações e entradas pílula (999px).
• Alvos de toque 44px ou mais. Botões primários 54px (.btn), 56px no herói e formulário (alcance do polegar).
• Nav 72px de altura (64px no mobile).

Cor (por que: um acento significa 'aja aqui'; todo o resto é tinta sobre branco com um tom suave):

• Papéis: fundo (branco), tons de tom (mist, mist-2), texto (ink, ink-2), acento (sky, hover sky-2, wash), linha, ...

…

[truncado para tradução]