The Marketing Site Stack 2026

Most "modern" marketing sites are five years behind. Webflow template from 2021, two webfonts from Adobe, a Lottie in the hero, a CSS bundle the size of a Marvel movie. Then a Linear or Cursor page loads in 200ms next door and the gap shows up in the first scroll.

The 2026 stack is recognizable inside ten seconds. Same framework, same fonts, same motion, same visual density. This is the brand-by-brand teardown of how the best marketing sites are actually built, and the audit your next one should pass.

The 2026 stack has five layers

Stop thinking about the marketing site as one thing. The pages designers want to copy are five distinct layers stacked together. Get any one of them wrong and the whole site reads as outdated.

The layers, in order: framework and hosting, fonts, motion and interaction, visual system, and performance. Each one has a default in 2026, and each default has a clear reason it won.

Layer 1: Framework and hosting converged on Next.js plus Vercel

The framework war is over. Linear, Cursor, v0, Anthropic, OpenAI, Stripe, Vercel, and Notion all ship Next.js on Vercel. That is convergence, not coincidence. The combo gives you static rendering, partial prerendering, edge caching, image optimization, and route-level prefetching out of the box.

The credible alternatives are narrow. Astro plus Vercel works for indie SaaS that wants near-zero JavaScript on a content-heavy site. Framer (the company's own builder) owns the design-heavy creative agency and template-driven indie segment. Webflow is still on a lot of pages, but the share inside serious SaaS is sliding. Teams that used to ship Webflow homepages are moving to Next.js plus a Sanity or Contentful CMS, because they hit a ceiling the second the marketing site needs to behave like a product.

If your site has any product-shaped surface (a hero section with live data, pricing wired to billing, a docs route with auth), ship Next.js. Brochureware for a creative studio, Framer is fine. Anything else is legacy.

Layer 2: Fonts converged on a small specific roster

Look at the type on the sites you actually want to copy. It is the same six families in rotation. Inter and its display sibling, Geist and Geist Mono, Söhne, Switzer, Tobias, and General Sans. That is the active roster.

Inter is the default. Linear runs Inter Display in the hero and Inter for body. Vercel ships Geist and Geist Mono everywhere, including v0 and the Vercel site itself. Anthropic uses Söhne with a serif sub-brand for editorial. Stripe runs Söhne across marketing and product. OpenAI ships a custom Söhne variant. Notion and Framer both use Inter. Cursor uses a custom display font on the hero and a workhorse sans for body.

The mono-font sub-trend is specific to dev tools. Vercel, v0, Cursor, Linear, and Anthropic all use a monospace in eyebrow labels, code samples, version chips, and tiny captions. It signals "engineered" without saying it, and it is the fastest way to make a SaaS site look 2026 instead of 2022.

Most of these are variable fonts self-hosted on the same domain as the site. Adobe Fonts is losing share inside serious SaaS because the latency cost is real and direct licenses now beat it on price. The font pairing guide breakdown covers how to pick the pair. The meta-rule for 2026: one strong variable family plus a mono is plenty.

Layer 3: Motion is the affordance, not the decoration

Motion in 2026 is doing work, not filling silence. Set pieces are scroll-driven, page swaps use the View Transitions API, and micro-interactions live in Framer Motion or pure CSS.

Three patterns dominate. Hero choreography (Linear's gradient bloom on first paint, Anthropic's restrained type fade). Scroll-pinned product reveals (Cursor pins a panel, the page scrolls, the panel updates in place). View-transition page swaps (Vercel and v0 use the View Transitions API so navigation feels like a state change, not a reload).

Lottie is in quiet retirement on serious sites. Heavy, accessibility-hostile, reads as 2021. Brands shipping animation now use Framer Motion for components, GSAP or scroll-linked CSS for set pieces, View Transitions for navigation. The bar is "every motion has a reason," not "we have animation."

Layer 4: The visual system is geometric, off-grid, and noisy

The visual language of 2026 sites is recognizable without context. Big geometric type as the hero element. Off-grid micro-screenshots that bleed past the column. OKLCH color palettes with high-contrast modes that look native. Noisy gradients (a smooth gradient with a film-grain noise overlay) replacing flat gradients. Generative SVG hero patterns instead of stock photography.

Linear's hero is the canonical reference: a single sentence at oversized weight, a soft gradient bloom, a product screenshot floating with subtle parallax, accent chips in one color. Stripe's homepage runs a custom SVG composition that animates on scroll, with their gradient generator behind the type. Anthropic ships a serif-led editorial sub-brand and a sans-led product brand, and the contrast between them is doing real work.

The unifying move is restraint. One accent color used three or four times maximum. One hero image, large. One type voice across the site. The brands that look the most "designed" in 2026 are the ones with the fewest visual ingredients per page. The visual hierarchy breakdown covers why subtraction reads as taste.

Layer 5: Performance is the final aesthetic decision

The brands that look the best load the fastest. Same discipline expressed two ways. A site that does not paint in under a second on 4G is not a 2026 site, regardless of how it looks.

The pattern is consistent across the leaders. Self-hosted variable fonts preloaded with font-display: swap. Static generation with Vercel Image Optimization. Route-level prefetching. View Transitions for soft page swaps. No third-party scripts in the critical path. Real Core Web Vitals numbers you could put on a slide.

The "feels-instant" navigation pattern is the most copyable piece. Hover a link, Next.js prefetches the route. Click, the page is in cache, and the View Transition smooths the swap. The marketing site feels like a product, which is the point. The speed is the brand piece goes deeper.

The brand-by-brand teardown

Specifics matter more than principles. Here is what each of the named sites is actually running on the surface.

Linear. Next.js on Vercel. Inter and Inter Display, self-hosted. Framer Motion for component interactions, scroll-linked CSS for the gradient hero. One accent color, hero choreography on first paint, sticky CTA on long pages.

Cursor. Next.js on Vercel. Custom display font for the hero, workhorse sans for body, mono for labels. Scroll-pinned product reveals are the signature move.

v0 and Vercel. Next.js, Geist and Geist Mono, View Transitions across marketing routes. The v0 "live preview" hero is a real running iframe of a generated page, which is the strongest proof a product can show.

Anthropic. Next.js, Söhne, restrained motion (type fades, not parallax tricks), serif sub-brand for editorial. Doing less than almost any peer and reading more "premium" because of it.

Stripe. Next.js, Söhne, custom SVG compositions in the hero, the gradient generator behind the type, and a documentation-driven IA that has set the fintech bar for a decade.

OpenAI. Next.js, custom font close to Söhne, minimalist density closer to a museum than a SaaS landing page. Almost no on-page CTAs in the hero, which works because the brand can afford to.

Notion. Next.js on Vercel, Inter, animated product illustrations showing the actual UI doing the actual thing. Heavy on real product visuals, light on stock metaphors.

Framer (the company). Built on Framer itself, the strongest possible dogfood. Design-heavy template aesthetic, dense pages, motion-rich, with a clear "if you want a site like this, use this tool" pitch.

Counter-examples are easy to spot. A SaaS site still on a 2018 WordPress theme with stock illustration of "people using a laptop" reads as ten years old before the first scroll. A creative-agency homepage with a slow autoplay video and a four-CTA hero reads as a pitch deck pretending to be a website. The category, not the brand, is the lesson.

Five questions to evaluate any stack

Before you copy a stack, evaluate it. Five questions, in this order.

1. What does navigation feel like? A full reload with a flash of unstyled content means the stack is at least one cycle behind. A state change means it is current.
2. How fast is first paint on mid-tier mobile? Under 800ms is the 2026 bar. Over 2 seconds is failing.
3. How is type loaded? Self-hosted variable font preloaded, or third-party CDN with a flash of fallback text? The first reads engineered, the second reads 2019.
4. How does motion serve the message? Choreographed to the content, or pasted on as decoration? Lottie hero animations are the tell.
5. What does the empty page look like? Strip the hero and the gradients. If the type, spacing, and structure still reads as a brand, the stack is real. If it falls apart, it was a template. The empty states are the product piece covers the deeper version.

The anti-patterns that age a site overnight

Six patterns that are dating sites the moment they ship.

• Drag-and-drop builder soup. A page built by dragging twelve marketplace sections together looks like twelve marketplace sections. Nothing was designed against the next thing.
• Illustration packs nobody recognizes. Generic vector people on flat backgrounds from the same three libraries every other SaaS uses. Visual noise with no recall.
• Lottie animations in every section. Heavy, accessibility-hostile, and all using the same easing curves because they came from the same template marketplace.
• Page builders shipping 600KB of CSS. A site with a 600KB CSS bundle does not understand performance is a brand decision.
• The hand-coded-in-2021 trap. Hand-coded with care once, never updated. The structure is clean, the type is dated, the contrast is wrong. Maintenance is part of the stack.
• Cookie modals blocking the hero. A consent wall as the first interaction is a stack failure dressed up as compliance.

The 2026 stack audit

Score your current marketing site against these seven questions. Five or more "no" answers and you are not on the 2026 stack.

1. Does the page paint in under one second on a 4G connection?
2. Are the fonts self-hosted variable fonts preloaded above the fold?
3. Does navigation between routes feel like a state change, not a reload?
4. Is there one accent color used four times or fewer on the page?
5. Does every animation have a clear job (afford, reveal, transition)?
6. Are the product visuals real screenshots of the real product, not stock or 3D abstractions?
7. Would the page still read as on-brand with the hero stripped out?

Five or more "yes" answers means you are on the 2026 stack. Under five means the next redesign is a stack upgrade, not a visual refresh. The web design trends 2026 piece is the broader pattern map this audit lives inside, the landing page design principles breakdown is the principle layer for the page itself, and typography system design plus web design principles cover the rest.

Frequently asked questions

Is Next.js really the only credible framework for marketing sites in 2026?

For serious SaaS and brand sites, effectively yes. Astro is credible for content-heavy sites with near-zero JavaScript needs. Framer is credible for design-heavy creative-agency surfaces. Everything else ships with a ceiling that shows up the moment the site needs to behave like a product.

Should I switch off Webflow if my site already works?

Not on aesthetics alone. Switch when Webflow stops being able to do what the site needs (custom motion, route-level prefetching, view transitions, real performance budgets) or when the marketing site needs to share components with the product. If it is brochureware and converts fine, leave it.

Framer versus Webflow versus Next.js for a small brand?

Framer wins for a design-heavy template-driven aesthetic where motion and the visual system do the heavy lifting. Webflow wins when a marketing team ships updates without engineering and the site is genuinely brochureware. Next.js wins anywhere the site needs to share code, components, or content with a real product.

Build the site on the 2026 stack

The stack is not a secret. The leaders all ship the same family of decisions, and the gap between a 2026 site and a 2021 one is closeable in one focused project. Pick the framework. Pick the variable font and the mono. Pick the three motion patterns the page actually needs. Cut everything else.

If you want a marketing site built on the 2026 stack instead of a Webflow template from the last cycle, hire Brainy. We ship brand sites on Next.js, with self-hosted variable fonts, real motion, and a performance budget you could put on a slide.