A Stack de Sites de Marketing em 2026

A maioria dos sites de marketing "modernos" está cinco anos atrasada. Template do Webflow de 2021, duas webfonts da Adobe, um Lottie no hero, um bundle de CSS do tamanho de um filme da Marvel. Aí uma página da Linear ou do Cursor carrega em 200ms logo ao lado e a diferença aparece no primeiro scroll.

A stack de 2026 é reconhecível em dez segundos. Mesmo framework, mesmas fontes, mesmo motion, mesma densidade visual. Este é o desmonte de marca por marca de como os melhores sites de marketing são realmente construídos, e a auditoria que o seu próximo site deveria passar.

A stack de 2026 tem cinco camadas

Pare de pensar no site de marketing como uma coisa só. As páginas que designers querem copiar são cinco camadas distintas empilhadas. Erre qualquer uma delas e o site inteiro parece ultrapassado.

As camadas, em ordem: framework e hospedagem, fontes, motion e interação, sistema visual e performance. Cada uma tem um padrão em 2026, e cada padrão tem um motivo claro para ter vencido.

Camada 1: Framework e hospedagem convergiram em Next.js mais Vercel

A guerra dos frameworks acabou. Linear, Cursor, v0, Anthropic, OpenAI, Stripe, Vercel e Notion entregam Next.js na Vercel. Isso é convergência, não coincidência. A combinação entrega renderização estática, prerenderização parcial, cache na edge, otimização de imagens e prefetch por rota já de fábrica.

As alternativas críveis são estreitas. Astro mais Vercel funciona para SaaS indie que quer quase zero JavaScript em um site pesado de conteúdo. Framer (o builder da própria empresa) domina o segmento de agências criativas focadas em design e indies orientados a templates. O Webflow ainda está em muitas páginas, mas sua participação em SaaS sério está caindo. Times que antes entregavam homepages no Webflow estão migrando para Next.js mais um CMS como Sanity ou Contentful, porque batem num teto no segundo em que o site de marketing precisa se comportar como um produto.

Se o seu site tem qualquer superfície com cara de produto (uma hero section com dados ao vivo, preços ligados ao billing, uma rota de docs com autenticação), use Next.js. Brochureware de estúdio criativo, Framer serve. Qualquer outra coisa é legado.

Camada 2: As fontes convergiram em um elenco pequeno e específico

Olhe para a tipografia dos sites que você realmente quer copiar. São as mesmas seis famílias em rodízio. Inter e sua irmã display, Geist e Geist Mono, Söhne, Switzer, Tobias e General Sans. Esse é o elenco ativo.

Inter é o padrão. A Linear usa Inter Display no hero e Inter no corpo. A Vercel entrega Geist e Geist Mono em tudo, incluindo o v0 e o próprio site da Vercel. A Anthropic usa Söhne com uma sub-marca serifada para o editorial. A Stripe usa Söhne em marketing e produto. A OpenAI entrega uma variante customizada de Söhne. Notion e Framer usam Inter. O Cursor usa uma fonte display customizada no hero e uma sans de batalha no corpo.

A subtendência da fonte mono é específica de dev tools. Vercel, v0, Cursor, Linear e Anthropic usam monoespaçada em labels de eyebrow, exemplos de código, chips de versão e legendas minúsculas. Ela sinaliza "engenheirado" sem dizer isso, e é o jeito mais rápido de fazer um site de SaaS parecer 2026 em vez de 2022.

A maioria são fontes variáveis auto-hospedadas no mesmo domínio do site. A Adobe Fonts está perdendo espaço em SaaS sério porque o custo de latência é real e licenças diretas agora ganham no preço. O guia de pareamento de fontes explica como escolher a dupla. A metarregra para 2026: uma família variável forte mais uma mono é suficiente.

Camada 3: Motion é affordance, não decoração

Motion em 2026 trabalha, não preenche silêncio. Os grandes momentos são guiados por scroll, trocas de página usam a API de View Transitions, e microinterações vivem em Framer Motion ou CSS puro.

Três padrões dominam. Coreografia de hero (o bloom de gradiente da Linear no primeiro paint, o fade de tipografia contido da Anthropic). Revelações de produto fixadas no scroll (o Cursor fixa um painel, a página rola, o painel atualiza no lugar). Trocas de página com view transition (Vercel e v0 usam a API de View Transitions para a navegação parecer uma mudança de estado, não um reload).

Lottie está em aposentadoria silenciosa em sites sérios. Pesado, hostil à acessibilidade, cheira a 2021. As marcas que entregam animação hoje usam Framer Motion para componentes, GSAP ou CSS ligado ao scroll para os grandes momentos, View Transitions para navegação. O critério é "todo movimento tem um motivo", não "nós temos animação".

Camada 4: O sistema visual é geométrico, fora do grid e granulado

A linguagem visual dos sites de 2026 é reconhecível sem contexto. Tipografia geométrica gigante como elemento do hero. Micro-screenshots fora do grid que vazam para além da coluna. Paletas de cores em OKLCH com modos de alto contraste que parecem nativos. Gradientes com ruído (um gradiente suave com uma camada de grão de filme) substituindo gradientes chapados. Padrões de hero em SVG generativo no lugar de fotografia de banco de imagens.

O hero da Linear é a referência canônica: uma única frase em peso superdimensionado, um bloom suave de gradiente, um screenshot de produto flutuando com parallax sutil, chips de destaque em uma só cor. A homepage da Stripe roda uma composição SVG customizada que anima no scroll, com o gerador de gradiente deles por trás da tipografia. A Anthropic entrega uma sub-marca editorial guiada por serifa e uma marca de produto guiada por sans, e o contraste entre elas faz trabalho de verdade.

O movimento unificador é contenção. Uma cor de destaque usada no máximo três ou quatro vezes. Uma imagem de hero, grande. Uma voz tipográfica no site inteiro. As marcas que parecem mais "desenhadas" em 2026 são as que têm menos ingredientes visuais por página. O texto sobre hierarquia visual explica por que subtração lê como bom gosto.

Camada 5: Performance é a decisão estética final

As marcas que parecem melhores carregam mais rápido. A mesma disciplina expressa de dois jeitos. Um site que não pinta em menos de um segundo em 4G não é um site de 2026, não importa a aparência.

O padrão é consistente entre os líderes. Fontes variáveis auto-hospedadas com preload e font-display: swap. Geração estática com Vercel Image Optimization. Prefetch por rota. View Transitions para trocas suaves de página. Nenhum script de terceiros no caminho crítico. Números reais de Core Web Vitals que você poderia colocar num slide.

O padrão de navegação "parece instantâneo" é a peça mais copiável. Passe o mouse num link, o Next.js faz prefetch da rota. Clique, a página já está em cache, e a View Transition suaviza a troca. O site de marketing parece um produto, que é o ponto. O texto velocidade é a marca vai mais fundo.

O desmonte marca por marca

Especificidades importam mais que princípios. Aqui está o que cada um dos sites citados realmente roda na superfície.

Linear. Next.js na Vercel. Inter e Inter Display, auto-hospedadas. Framer Motion para interações de componentes, CSS ligado ao scroll para o hero com gradiente. Uma cor de destaque, coreografia de hero no primeiro paint, CTA fixo em páginas longas.

Cursor. Next.js na Vercel. Fonte display customizada no hero, sans de batalha no corpo, mono para labels. Revelações de produto fixadas no scroll são o movimento assinatura.

v0 e Vercel. Next.js, Geist e Geist Mono, View Transitions nas rotas de marketing. O hero de "preview ao vivo" do v0 é um iframe real rodando uma página gerada, a prova mais forte que um produto pode mostrar.

Anthropic. Next.js, Söhne, motion contido (fades de tipografia, nada de truques de parallax), sub-marca serifada para o editorial. Fazendo menos que quase qualquer concorrente e parecendo mais "premium" por causa disso.

Stripe. Next.js, Söhne, composições SVG customizadas no hero, o gerador de gradiente por trás da tipografia e uma IA guiada por documentação que definiu o padrão de fintech por uma década.

OpenAI. Next.js, fonte customizada próxima da Söhne, densidade minimalista mais próxima de um museu que de uma landing page de SaaS. Quase nenhum CTA no hero, o que funciona porque a marca pode se dar a esse luxo.

Notion. Next.js na Vercel, Inter, ilustrações animadas de produto mostrando a UI real fazendo a coisa real. Pesado em visuais reais de produto, leve em metáforas de banco de imagens.

Framer (a empresa). Construído no próprio Framer, o dogfood mais forte possível. Estética de template focada em design, páginas densas, rico em motion, com um pitch claro de "se você quer um site assim, use esta ferramenta".

Contraexemplos são fáceis de identificar. Um site de SaaS ainda num tema WordPress de 2018 com ilustração de banco de imagens de "pessoas usando um laptop" parece ter dez anos antes do primeiro scroll. Uma homepage de agência criativa com vídeo autoplay lento e hero com quatro CTAs parece um pitch deck fingindo ser um site. A categoria, não a marca, é a lição.

Cinco perguntas para avaliar qualquer stack

Antes de copiar uma stack, avalie-a. Cinco perguntas, nesta ordem.

1. Como é a sensação da navegação? Um reload completo com flash de conteúdo sem estilo significa que a stack está pelo menos um ciclo atrás. Uma mudança de estado significa que está atual.
2. Qual a velocidade do primeiro paint em mobile intermediário? Abaixo de 800ms é o padrão de 2026. Acima de 2 segundos é reprovação.
3. Como a tipografia é carregada? Fonte variável auto-hospedada com preload, ou CDN de terceiros com flash de texto fallback? A primeira leitura parece engenheirada, a segunda parece 2019.
4. Como o motion serve à mensagem? Coreografado para o conteúdo, ou colado como decoração? Animações Lottie no hero são o sinal denunciador.
5. Como é a página vazia? Tire o hero e os gradientes. Se a tipografia, o espaçamento e a estrutura ainda parecem uma marca, a stack é real. Se desmorona, era um template. O texto estados vazios são o produto cobre a versão mais profunda.

Os antipadrões que envelhecem um site da noite para o dia

Seis padrões que datam sites no instante em que vão ao ar.

• Sopa de builder drag-and-drop. Uma página feita arrastando doze seções de marketplace parece doze seções de marketplace. Nada foi desenhado em função da próxima coisa.
• Pacotes de ilustração que ninguém reconhece. Pessoas vetoriais genéricas em fundos chapados das mesmas três bibliotecas que todo outro SaaS usa. Ruído visual sem memorização.
• Animações Lottie em toda seção. Pesadas, hostis à acessibilidade, e todas com as mesmas curvas de easing porque vieram do mesmo marketplace de templates.
• Page builders entregando 600KB de CSS. Um site com bundle de 600KB de CSS não entende que performance é uma decisão de marca.
• A armadilha do codado à mão em 2021. Codado à mão com carinho uma vez, nunca atualizado. A estrutura é limpa, a tipografia é datada, o contraste está errado. Manutenção faz parte da stack.
• Modais de cookies bloqueando o hero. Um muro de consentimento como primeira interação é uma falha de stack vestida de conformidade.

A auditoria da stack 2026

Pontue o seu site de marketing atual nestas sete perguntas. Cinco ou mais respostas "não" e você não está na stack de 2026.

1. A página pinta em menos de um segundo numa conexão 4G?
2. As fontes são variáveis, auto-hospedadas e com preload acima da dobra?
3. A navegação entre rotas parece uma mudança de estado, não um reload?
4. Existe uma cor de destaque usada quatro vezes ou menos na página?
5. Toda animação tem uma função clara (afford, revelar, transição)?
6. Os visuais de produto são screenshots reais do produto real, não banco de imagens ou abstrações 3D?
7. A página ainda pareceria on-brand com o hero removido?

Cinco ou mais respostas "sim" significa que você está na stack de 2026. Menos de cinco significa que o próximo redesign é um upgrade de stack, não um refresh visual. O texto de tendências de web design 2026 é o mapa de padrões mais amplo em que esta auditoria vive, o de princípios de design de landing page é a camada de princípios para a página em si, e design de sistema tipográfico mais princípios de web design cobrem o resto.

Perguntas frequentes

Next.js é realmente o único framework crível para sites de marketing em 2026?

Para SaaS sério e sites de marca, na prática sim. Astro é crível para sites pesados de conteúdo com necessidade quase zero de JavaScript. Framer é crível para superfícies de agências criativas focadas em design. Todo o resto vem com um teto que aparece no momento em que o site precisa se comportar como um produto.

Devo sair do Webflow se meu site já funciona?

Não só por estética. Troque quando o Webflow deixar de conseguir fazer o que o site precisa (motion customizado, prefetch por rota, view transitions, orçamentos de performance reais) ou quando o site de marketing precisar compartilhar componentes com o produto. Se é brochureware e converte bem, deixe como está.

Framer versus Webflow versus Next.js para uma marca pequena?

Framer vence numa estética de template focada em design, em que motion e sistema visual fazem o trabalho pesado. Webflow vence quando um time de marketing publica atualizações sem engenharia e o site é genuinamente brochureware. Next.js vence sempre que o site precisa compartilhar código, componentes ou conteúdo com um produto de verdade.

Construa o site na stack de 2026

A stack não é segredo. Os líderes entregam todos a mesma família de decisões, e a distância entre um site de 2026 e um de 2021 se fecha em um projeto focado. Escolha o framework. Escolha a fonte variável e a mono. Escolha os três padrões de motion de que a página realmente precisa. Corte todo o resto.

Se você quer um site de marketing construído na stack de 2026 em vez de um template do Webflow do ciclo passado, contrate a Brainy. Entregamos sites de marca em Next.js, com fontes variáveis auto-hospedadas, motion de verdade e um orçamento de performance que você poderia colocar num slide.