Não é página de builder. É um sistema.

/// 01 · o que está no ar

HTML estático na Vercel, design system em /v2/.

Captura do HTML vivo em 29/10/2026. Comentários no próprio arquivo mapeiam um spec interno (core-top F0a, chrome-top F0b, §4.x). Quem desenhou isso pensa em peças, não em “seções de LP”.

/// 02 · as libs

Seis scripts. Zero builder.

Tudo self-hosted em /v2/vendor/ e um bundle próprio. A ordem no HTML é a ordem do motor: GSAP primeiro, plugins, Lenis, WDF por último. Tracking fica de fora dessa fila — entra no idle.

ok = gsap && ScrollTrigger
     && SplitText && CustomEase
ok && gsap.registerPlugin(
  ScrollTrigger, SplitText, CustomEase)
ok && CustomEase.create(
  "wdf.out", ".19,1,.22,1")
ok && gsap.defaults({
  ease: "wdf.out", duration: 1.15 })

Não entra no HTML

/// 03 · anatomia

Seis camadas, não uma landing.

Os comentários do HTML separam chrome (sempre presente) de seções (que só pintam). É por isso que o site não “parece template”.

/// 04 · as três peles

Toca no botão do topo. É o mesmo truque.

Eles não pintam seção por seção com hex solto. Têm um dicionário (--ink, --paper, --flame) e um segundo dicionário semântico (--bg, --display, --cta-bg) que cada pele reescreve. O caderno que você está lendo usa os hex reais.

Paper inverte o contraste (fundo quente, texto ink, acento flame-deep). Flame vira o laranja em palco e o ink vira o acento. CTA sempre “o contrário do fundo”: branco no ink, ink no paper e no flame. Uma cor de marca, usada como interruptor — não como gradiente em tudo.

[data-theme=ink]   { --bg: var(--ink);   --display: #fff;    --cta-bg: #fff; --accent: var(--flame); }
[data-theme=paper] { --bg: var(--paper); --display: var(--ink); --cta-bg: var(--ink); --accent: var(--flame); }
[data-theme=flame] { --bg: var(--flame); --display: #fff;    --cta-bg: var(--ink); --accent: var(--ink); }

/// 05 · escala

O título é o herói. O corpo não compete.

Na LP o display chega a 172px e o mega usa o menor entre a viewport e 46svh. Corpo travado em 16 / 14 / 12. Kickers em 12px com letter-spacing aberto. Isso é o “nível Apple”: um cartaz, não um artigo.

• --fs-statementPáginas que pesam.
• --fs-d2Uma ideia por seção.
• --fs-leadLead curto, no máximo 44ch.
• --fs-body 16Corpo que não cresce com a viewport.
• --fs-kicker 12/// 05 · escala

/// 06 · chrome

O luxo está na borda da página.

Preloader, grain, cursor e botão magnético não vendem o curso. Eles dizem “isso foi feito à mão”. No desktop. No mobile eles desligam metade.

/// 07 · o pulo do gato

O HTML já está no estado final.

Comentário literal da seção Solução: “HTML no ESTADO FINAL (.is-struck .is-selected .is-checked .is-paid); em is-motion o JS remove as classes ainda não alcançadas e as reaplica.” Autor: a foto já aparece inteira no CSS; o JS só esconde o rosto se houver motion.

Quem abre o arquivo sem JavaScript ainda vê a página vendida. O motion é um verniz, não a estrutura.Leitura dos comentários em /promo · 29/10/2026

Isso mata CLS, mata o “flash de conteúdo vazio” e deixa o no-js utilizável. Para as LPs da Gestão Bem: escreve o markup como se a animação já tivesse acabado. Se o GSAP falhar, a página continua certa.

/// 08 · motion

Um easing. Split por linha. Lenis no ticker.

/// 09 · o roteiro

Treze seções, uma ideia cada.

A beleza também é editorial: ink → paper → ink → paper → flame no preço → paper no autor → ink na garantia. O olho descansa. A oferta só pinta de laranja quando precisa.

/// 10 · o que copiar

Receita pra LP da Gestão Bem.

Oito hábitos. Nenhum pede GSAP Club, NeuePower nem 137 kB de CSS. O caderno que você está vendo já faz 1, 2, 3, 5 e 7.

/// 11 · o que não copiar

O verniz caro, o tracking, a oferta.