El stack de sitios de marketing 2026

La mayoría de los sitios de marketing "modernos" van cinco años atrasados. Plantilla de Webflow de 2021, dos webfonts de Adobe, un Lottie en el hero, un bundle de CSS del tamaño de una película de Marvel. Y entonces una página de Linear o Cursor carga en 200 ms al lado, y la brecha se nota en el primer scroll.

El stack de 2026 se reconoce en diez segundos. Mismo framework, mismas fuentes, mismo movimiento, misma densidad visual. Este es el desglose de marca por marca de cómo se construyen realmente los mejores sitios de marketing, y la auditoría que tu próximo sitio debería pasar.

El stack de 2026 tiene cinco capas

Deja de pensar en el sitio de marketing como una sola cosa. Las páginas que los diseñadores quieren copiar son cinco capas distintas apiladas. Si fallas en una sola, todo el sitio se lee como anticuado.

Las capas, en orden: framework y hosting, fuentes, movimiento e interacción, sistema visual y rendimiento. Cada una tiene un estándar en 2026, y cada estándar ganó por una razón clara.

Capa 1: Framework y hosting convergieron en Next.js más Vercel

La guerra de frameworks terminó. Linear, Cursor, v0, Anthropic, OpenAI, Stripe, Vercel y Notion publican Next.js en Vercel. Eso es convergencia, no coincidencia. La combinación te da renderizado estático, prerenderizado parcial, caché en el edge, optimización de imágenes y prefetching a nivel de ruta de serie.

Las alternativas creíbles son estrechas. Astro más Vercel funciona para SaaS indie que quiere casi cero JavaScript en un sitio cargado de contenido. Framer (el builder de la propia empresa) domina el segmento de agencias creativas muy orientadas al diseño y el indie basado en plantillas. Webflow sigue en muchas páginas, pero su cuota dentro del SaaS serio va cayendo. Los equipos que antes publicaban homepages en Webflow se están pasando a Next.js más un CMS como Sanity o Contentful, porque chocan con un techo en cuanto el sitio de marketing necesita comportarse como un producto.

Si tu sitio tiene alguna superficie con forma de producto (una sección hero con datos en vivo, precios conectados a facturación, una ruta de docs con autenticación), usa Next.js. Para folletos de un estudio creativo, Framer sirve. Todo lo demás es legado.

Capa 2: Las fuentes convergieron en una lista pequeña y concreta

Mira la tipografía de los sitios que de verdad quieres copiar. Son las mismas seis familias en rotación. Inter y su hermana display, Geist y Geist Mono, Söhne, Switzer, Tobias y General Sans. Esa es la lista activa.

Inter es el estándar. Linear usa Inter Display en el hero e Inter para el cuerpo. Vercel publica Geist y Geist Mono en todas partes, incluidos v0 y el propio sitio de Vercel. Anthropic usa Söhne con una sub-marca serif para lo editorial. Stripe usa Söhne en marketing y producto. OpenAI publica una variante personalizada de Söhne. Notion y Framer usan Inter. Cursor usa una fuente display personalizada en el hero y una sans de trabajo para el cuerpo.

La subtendencia de la fuente mono es propia de las herramientas para desarrolladores. Vercel, v0, Cursor, Linear y Anthropic usan una monoespaciada en etiquetas superiores, ejemplos de código, chips de versión y pies de foto diminutos. Señala "ingeniería" sin decirlo, y es la forma más rápida de que un sitio SaaS parezca de 2026 y no de 2022.

La mayoría son fuentes variables alojadas en el mismo dominio del sitio. Adobe Fonts pierde cuota en el SaaS serio porque el costo de latencia es real y las licencias directas ya le ganan en precio. La guía de combinación de fuentes explica cómo elegir el par. La metarregla para 2026: una familia variable fuerte más una mono es más que suficiente.

Capa 3: El movimiento es la affordance, no la decoración

El movimiento en 2026 trabaja, no rellena silencios. Las piezas principales se guían por scroll, los cambios de página usan la API de View Transitions y las microinteracciones viven en Framer Motion o en CSS puro.

Dominan tres patrones. La coreografía del hero (el florecimiento de gradiente de Linear en el primer paint, el desvanecimiento sobrio de tipografía de Anthropic). Revelados de producto fijados al scroll (Cursor fija un panel, la página hace scroll, el panel se actualiza en su lugar). Cambios de página con view transitions (Vercel y v0 usan la API de View Transitions para que navegar se sienta como un cambio de estado, no una recarga).

Lottie está en retiro silencioso en los sitios serios. Pesado, hostil con la accesibilidad, se lee como 2021. Las marcas que hoy publican animación usan Framer Motion para componentes, GSAP o CSS vinculado al scroll para las piezas principales y View Transitions para la navegación. El listón es "cada movimiento tiene una razón", no "tenemos animación".

Capa 4: El sistema visual es geométrico, fuera de la grilla y con ruido

El lenguaje visual de los sitios de 2026 se reconoce sin contexto. Tipografía geométrica enorme como elemento del hero. Microcapturas fuera de la grilla que sangran más allá de la columna. Paletas de color en OKLCH con modos de alto contraste que se ven nativos. Gradientes con ruido (un gradiente suave con una capa de grano de película) que reemplazan a los gradientes planos. Patrones hero generativos en SVG en lugar de fotografía de stock.

El hero de Linear es la referencia canónica: una sola frase con peso sobredimensionado, un florecimiento suave de gradiente, una captura de producto flotando con paralaje sutil, chips de acento en un solo color. La homepage de Stripe usa una composición SVG personalizada que se anima con el scroll, con su generador de gradientes detrás del texto. Anthropic publica una sub-marca editorial guiada por serif y una marca de producto guiada por sans, y el contraste entre ambas hace un trabajo real.

La jugada que lo unifica es la contención. Un color de acento usado tres o cuatro veces como máximo. Una imagen hero, grande. Una sola voz tipográfica en todo el sitio. Las marcas que se ven más "diseñadas" en 2026 son las que tienen menos ingredientes visuales por página. El desglose de jerarquía visual explica por qué restar se lee como buen gusto.

Capa 5: El rendimiento es la decisión estética final

Las marcas que mejor se ven son las que cargan más rápido. La misma disciplina expresada de dos formas. Un sitio que no pinta en menos de un segundo en 4G no es un sitio de 2026, sin importar cómo se vea.

El patrón es consistente entre los líderes. Fuentes variables autoalojadas y precargadas con font-display: swap. Generación estática con Vercel Image Optimization. Prefetching a nivel de ruta. View Transitions para cambios suaves de página. Cero scripts de terceros en la ruta crítica. Números reales de Core Web Vitals que podrías poner en una diapositiva.

El patrón de navegación "se siente instantánea" es la pieza más copiable. Pasas el cursor sobre un enlace y Next.js hace prefetch de la ruta. Haces clic, la página ya está en caché y la View Transition suaviza el cambio. El sitio de marketing se siente como un producto, que es justo la idea. La pieza la velocidad es la marca profundiza en esto.

El desglose marca por marca

Los detalles importan más que los principios. Esto es lo que usa cada uno de los sitios mencionados en la superficie.

Linear. Next.js en Vercel. Inter e Inter Display, autoalojadas. Framer Motion para interacciones de componentes, CSS vinculado al scroll para el hero con gradiente. Un solo color de acento, coreografía del hero en el primer paint, CTA fijo en páginas largas.

Cursor. Next.js en Vercel. Fuente display personalizada para el hero, sans de trabajo para el cuerpo, mono para etiquetas. Los revelados de producto fijados al scroll son su jugada insignia.

v0 y Vercel. Next.js, Geist y Geist Mono, View Transitions en todas las rutas de marketing. El hero de "vista previa en vivo" de v0 es un iframe real ejecutándose con una página generada, la prueba más fuerte que un producto puede mostrar.

Anthropic. Next.js, Söhne, movimiento sobrio (desvanecimientos de tipografía, no trucos de paralaje), sub-marca serif para lo editorial. Hace menos que casi cualquier par y se lee más "premium" por eso.

Stripe. Next.js, Söhne, composiciones SVG personalizadas en el hero, el generador de gradientes detrás del texto y una arquitectura de información guiada por la documentación que ha marcado el listón del fintech durante una década.

OpenAI. Next.js, fuente personalizada cercana a Söhne, densidad minimalista más cercana a un museo que a una landing de SaaS. Casi sin CTAs en el hero, lo cual funciona porque la marca se lo puede permitir.

Notion. Next.js en Vercel, Inter, ilustraciones de producto animadas que muestran la interfaz real haciendo la cosa real. Cargado de visuales reales de producto, ligero en metáforas de stock.

Framer (la empresa). Construido en el propio Framer, el dogfooding más fuerte posible. Estética de plantilla muy orientada al diseño, páginas densas, mucho movimiento, con un pitch claro de "si quieres un sitio como este, usa esta herramienta".

Los contraejemplos son fáciles de detectar. Un sitio SaaS todavía en un tema de WordPress de 2018 con ilustración de stock de "gente usando una laptop" se lee como de hace diez años antes del primer scroll. La homepage de una agencia creativa con un video autoplay lento y un hero con cuatro CTAs se lee como un pitch deck fingiendo ser un sitio web. La lección es la categoría, no la marca.

Cinco preguntas para evaluar cualquier stack

Antes de copiar un stack, evalúalo. Cinco preguntas, en este orden.

1. ¿Cómo se siente la navegación? Una recarga completa con un destello de contenido sin estilos significa que el stack va al menos un ciclo atrás. Un cambio de estado significa que está al día.
2. ¿Qué tan rápido es el primer paint en un móvil de gama media? Menos de 800 ms es el listón de 2026. Más de 2 segundos es reprobar.
3. ¿Cómo se carga la tipografía? ¿Fuente variable autoalojada y precargada, o CDN de terceros con un destello de texto de respaldo? La primera se lee como ingeniería, la segunda se lee como 2019.
4. ¿Cómo sirve el movimiento al mensaje? ¿Coreografiado con el contenido o pegado como decoración? Las animaciones Lottie en el hero son la señal.
5. ¿Cómo se ve la página vacía? Quita el hero y los gradientes. Si la tipografía, el espaciado y la estructura siguen leyéndose como una marca, el stack es real. Si se desmorona, era una plantilla. La pieza los estados vacíos son el producto cubre la versión más profunda.

Los antipatrones que envejecen un sitio de la noche a la mañana

Seis patrones que fechan los sitios en el instante en que se publican.

• Sopa de builder drag-and-drop. Una página armada arrastrando doce secciones de un marketplace se ve como doce secciones de un marketplace. Nada se diseñó en relación con lo siguiente.
• Packs de ilustraciones que nadie reconoce. Personas vectoriales genéricas sobre fondos planos de las mismas tres librerías que usa todo otro SaaS. Ruido visual sin recordación.
• Animaciones Lottie en cada sección. Pesadas, hostiles con la accesibilidad, y todas con las mismas curvas de easing porque vienen del mismo marketplace de plantillas.
• Page builders que publican 600 KB de CSS. Un sitio con un bundle de 600 KB de CSS no entiende que el rendimiento es una decisión de marca.
• La trampa de lo programado a mano en 2021. Programado a mano con cuidado una vez, nunca actualizado. La estructura es limpia, la tipografía está datada, el contraste está mal. El mantenimiento es parte del stack.
• Modales de cookies bloqueando el hero. Un muro de consentimiento como primera interacción es un fallo del stack disfrazado de cumplimiento.

La auditoría del stack 2026

Puntúa tu sitio de marketing actual con estas siete preguntas. Con cinco o más respuestas "no", no estás en el stack de 2026.

1. ¿La página pinta en menos de un segundo en una conexión 4G?
2. ¿Las fuentes son variables, autoalojadas y precargadas above the fold?
3. ¿La navegación entre rutas se siente como un cambio de estado, no como una recarga?
4. ¿Hay un solo color de acento usado cuatro veces o menos en la página?
5. ¿Cada animación tiene una función clara (afford, revelar, transición)?
6. ¿Los visuales de producto son capturas reales del producto real, no stock ni abstracciones 3D?
7. ¿La página seguiría leyéndose como de la marca sin el hero?

Cinco o más respuestas "sí" significa que estás en el stack de 2026. Menos de cinco significa que el próximo rediseño es una mejora de stack, no un retoque visual. La pieza de tendencias de diseño web 2026 es el mapa de patrones más amplio dentro del cual vive esta auditoría, el desglose de principios de diseño de landing pages es la capa de principios para la página en sí, y diseño de sistemas tipográficos junto con principios de diseño web cubren el resto.

Preguntas frecuentes

¿Next.js es realmente el único framework creíble para sitios de marketing en 2026?

Para SaaS serio y sitios de marca, en la práctica sí. Astro es creíble para sitios cargados de contenido con necesidades de JavaScript casi nulas. Framer es creíble para superficies de agencias creativas muy orientadas al diseño. Todo lo demás viene con un techo que aparece en cuanto el sitio necesita comportarse como un producto.

¿Debería dejar Webflow si mi sitio ya funciona?

No solo por estética. Cámbiate cuando Webflow deje de poder hacer lo que el sitio necesita (movimiento personalizado, prefetching a nivel de ruta, view transitions, presupuestos de rendimiento reales) o cuando el sitio de marketing necesite compartir componentes con el producto. Si es un folleto y convierte bien, déjalo.

¿Framer, Webflow o Next.js para una marca pequeña?

Framer gana para una estética de plantilla muy orientada al diseño donde el movimiento y el sistema visual hacen el trabajo pesado. Webflow gana cuando un equipo de marketing publica cambios sin ingeniería y el sitio es genuinamente un folleto. Next.js gana donde sea que el sitio necesite compartir código, componentes o contenido con un producto real.

Construye el sitio con el stack 2026

El stack no es un secreto. Los líderes publican la misma familia de decisiones, y la brecha entre un sitio de 2026 y uno de 2021 se cierra en un proyecto enfocado. Elige el framework. Elige la fuente variable y la mono. Elige los tres patrones de movimiento que la página realmente necesita. Corta todo lo demás.

Si quieres un sitio de marketing construido con el stack 2026 en lugar de una plantilla de Webflow del ciclo pasado, contrata a Brainy. Publicamos sitios de marca en Next.js, con fuentes variables autoalojadas, movimiento real y un presupuesto de rendimiento que podrías poner en una diapositiva.