Der Marketing-Site-Stack 2026

Die meisten „modernen“ Marketing-Sites hinken fünf Jahre hinterher. Webflow-Template von 2021, zwei Webfonts von Adobe, ein Lottie im Hero, ein CSS-Bundle so groß wie ein Marvel-Film. Dann lädt nebenan eine Seite von Linear oder Cursor in 200 ms, und der Abstand zeigt sich schon beim ersten Scrollen.

Der Stack von 2026 ist in zehn Sekunden erkennbar. Gleiches Framework, gleiche Schriften, gleiche Motion, gleiche visuelle Dichte. Das hier ist das Brand-Teardown, Marke für Marke, wie die besten Marketing-Sites tatsächlich gebaut sind, und das Audit, das deine nächste Site bestehen sollte.

Der Stack 2026 hat fünf Schichten

Hör auf, die Marketing-Site als ein einziges Ding zu betrachten. Die Seiten, die Designer kopieren wollen, bestehen aus fünf getrennten, übereinandergelegten Schichten. Wenn eine davon falsch ist, wirkt die ganze Site veraltet.

Die Schichten in dieser Reihenfolge: Framework und Hosting, Schriften, Motion und Interaktion, visuelles System und Performance. Jede hat 2026 einen Standard, und jeder Standard hat einen klaren Grund, warum er gewonnen hat.

Schicht 1: Framework und Hosting haben sich auf Next.js plus Vercel geeinigt

Der Framework-Krieg ist vorbei. Linear, Cursor, v0, Anthropic, OpenAI, Stripe, Vercel und Notion liefern alle Next.js auf Vercel aus. Das ist Konvergenz, kein Zufall. Die Kombi bringt statisches Rendering, Partial Prerendering, Edge-Caching, Bildoptimierung und Prefetching auf Routenebene gleich mit.

Die glaubwürdigen Alternativen sind schmal. Astro plus Vercel funktioniert für Indie-SaaS, die auf einer inhaltslastigen Site fast kein JavaScript will. Framer (der Builder der Firma selbst) besitzt das designlastige Kreativagentur- und Template-Segment der Indies. Webflow steckt noch auf vielen Seiten, aber der Anteil in ernsthaftem SaaS sinkt. Teams, die früher Webflow-Homepages ausgeliefert haben, wechseln zu Next.js plus einem CMS wie Sanity oder Contentful, weil sie an eine Decke stoßen, sobald die Marketing-Site sich wie ein Produkt verhalten muss.

Hat deine Site irgendeine produktartige Fläche (eine Hero-Section mit Live-Daten, Pricing mit Anbindung ans Billing, eine Docs-Route mit Auth), nimm Next.js. Broschürenware für ein Kreativstudio: Framer ist okay. Alles andere ist Legacy.

Schicht 2: Schriften haben sich auf eine kleine, konkrete Liste geeinigt

Schau dir die Typografie der Sites an, die du wirklich kopieren willst. Es sind immer dieselben sechs Familien in Rotation. Inter und sein Display-Geschwister, Geist und Geist Mono, Söhne, Switzer, Tobias und General Sans. Das ist die aktive Liste.

Inter ist der Standard. Linear nutzt Inter Display im Hero und Inter für den Fließtext. Vercel liefert überall Geist und Geist Mono aus, auch bei v0 und auf der Vercel-Site selbst. Anthropic setzt Söhne ein, mit einer Serifen-Submarke für Editorial. Stripe fährt Söhne in Marketing und Produkt. OpenAI liefert eine maßgeschneiderte Söhne-Variante. Notion und Framer nutzen beide Inter. Cursor setzt im Hero eine eigene Display-Schrift ein und für den Fließtext eine Arbeitstier-Sans.

Der Mono-Font-Subtrend ist spezifisch für Dev-Tools. Vercel, v0, Cursor, Linear und Anthropic nutzen alle eine Monospace in Eyebrow-Labels, Codebeispielen, Versions-Chips und winzigen Bildunterschriften. Sie signalisiert „engineered“, ohne es auszusprechen, und ist der schnellste Weg, eine SaaS-Site nach 2026 statt nach 2022 aussehen zu lassen.

Die meisten davon sind Variable Fonts, selbst gehostet auf derselben Domain wie die Site. Adobe Fonts verliert in ernsthaftem SaaS Anteile, weil die Latenzkosten real sind und direkte Lizenzen beim Preis inzwischen schlagen. Der Font-Pairing-Guide erklärt, wie du das Paar auswählst. Die Metaregel für 2026: Eine starke Variable-Familie plus eine Mono reicht völlig.

Schicht 3: Motion ist Affordance, keine Dekoration

Motion 2026 arbeitet, statt Stille zu füllen. Set Pieces sind scrollgesteuert, Seitenwechsel nutzen die View-Transitions-API, und Mikrointeraktionen leben in Framer Motion oder purem CSS.

Drei Muster dominieren. Hero-Choreografie (Linears Gradient-Bloom beim ersten Paint, Anthropics zurückhaltendes Einblenden der Schrift). Scroll-gepinnte Produkt-Reveals (Cursor pinnt ein Panel, die Seite scrollt, das Panel aktualisiert sich an Ort und Stelle). Seitenwechsel per View Transition (Vercel und v0 nutzen die View-Transitions-API, damit sich Navigation wie ein Zustandswechsel anfühlt, nicht wie ein Reload).

Lottie wird auf ernsthaften Sites still in Rente geschickt. Schwer, barrierefreiheitsfeindlich, wirkt wie 2021. Marken, die heute animieren, nutzen Framer Motion für Komponenten, GSAP oder scrollgekoppeltes CSS für Set Pieces und View Transitions für Navigation. Die Latte lautet „jede Bewegung hat einen Grund“, nicht „wir haben Animation“.

Schicht 4: Das visuelle System ist geometrisch, rasterfrei und körnig

Die visuelle Sprache der Sites von 2026 erkennt man ohne Kontext. Große geometrische Typografie als Hero-Element. Rasterfreie Mikro-Screenshots, die über die Spalte hinausbluten. OKLCH-Farbpaletten mit kontrastreichen Modi, die sich nativ anfühlen. Noisy Gradients (ein weicher Verlauf mit Filmkorn-Overlay) ersetzen flache Verläufe. Generative SVG-Hero-Muster statt Stockfotografie.

Linears Hero ist die kanonische Referenz: ein einziger Satz in übergroßer Schriftstärke, ein weicher Gradient-Bloom, ein schwebender Produkt-Screenshot mit dezenter Parallax, Akzent-Chips in einer Farbe. Stripes Homepage fährt eine eigene SVG-Komposition, die beim Scrollen animiert, mit ihrem Gradient-Generator hinter der Schrift. Anthropic liefert eine serifenbetonte Editorial-Submarke und eine sans-betonte Produktmarke, und der Kontrast zwischen beiden leistet echte Arbeit.

Der verbindende Zug ist Zurückhaltung. Eine Akzentfarbe, höchstens drei- oder viermal eingesetzt. Ein Hero-Bild, groß. Eine typografische Stimme über die ganze Site. Die Marken, die 2026 am „gestaltetsten“ wirken, haben die wenigsten visuellen Zutaten pro Seite. Der Beitrag zur visuellen Hierarchie erklärt, warum Weglassen nach Geschmack aussieht.

Schicht 5: Performance ist die letzte ästhetische Entscheidung

Die Marken, die am besten aussehen, laden am schnellsten. Dieselbe Disziplin, zweifach ausgedrückt. Eine Site, die auf 4G nicht in unter einer Sekunde rendert, ist keine Site von 2026, egal wie sie aussieht.

Das Muster ist bei den Vorreitern durchgängig. Selbst gehostete Variable Fonts, vorgeladen mit font-display: swap. Statische Generierung mit Vercel Image Optimization. Prefetching auf Routenebene. View Transitions für weiche Seitenwechsel. Keine Drittanbieter-Skripte im kritischen Pfad. Echte Core-Web-Vitals-Zahlen, die du auf eine Folie packen könntest.

Das „fühlt-sich-sofort-an“-Navigationsmuster ist der am leichtesten kopierbare Teil. Du hoverst einen Link, Next.js lädt die Route vor. Du klickst, die Seite liegt im Cache, und die View Transition glättet den Wechsel. Die Marketing-Site fühlt sich an wie ein Produkt, und genau das ist der Punkt. Der Beitrag Speed is the Brand geht tiefer.

Das Teardown, Marke für Marke

Details zählen mehr als Prinzipien. Das hier läuft bei den genannten Sites tatsächlich an der Oberfläche.

Linear. Next.js auf Vercel. Inter und Inter Display, selbst gehostet. Framer Motion für Komponenteninteraktionen, scrollgekoppeltes CSS für den Gradient-Hero. Eine Akzentfarbe, Hero-Choreografie beim ersten Paint, Sticky-CTA auf langen Seiten.

Cursor. Next.js auf Vercel. Eigene Display-Schrift für den Hero, Arbeitstier-Sans für den Fließtext, Mono für Labels. Scroll-gepinnte Produkt-Reveals sind der Signature-Move.

v0 und Vercel. Next.js, Geist und Geist Mono, View Transitions über alle Marketing-Routen. Der „Live-Preview“-Hero von v0 ist ein echtes, laufendes iframe einer generierten Seite, und das ist der stärkste Beweis, den ein Produkt liefern kann.

Anthropic. Next.js, Söhne, zurückhaltende Motion (Schrift blendet ein, keine Parallax-Tricks), Serifen-Submarke für Editorial. Tut weniger als fast jeder Konkurrent und wirkt dadurch „premiumer“.

Stripe. Next.js, Söhne, eigene SVG-Kompositionen im Hero, der Gradient-Generator hinter der Schrift und eine dokumentationsgetriebene IA, die seit einem Jahrzehnt die Fintech-Latte setzt.

OpenAI. Next.js, eine eigene Schrift nahe an Söhne, minimalistische Dichte, die eher an ein Museum erinnert als an eine SaaS-Landingpage. Fast keine CTAs im Hero, was funktioniert, weil die Marke sich das leisten kann.

Notion. Next.js auf Vercel, Inter, animierte Produktillustrationen, die die echte UI zeigen, wie sie das Echte tut. Viel echte Produktvisualisierung, wenig Stock-Metaphern.

Framer (die Firma). Auf Framer selbst gebaut, das stärkstmögliche Dogfooding. Designlastige Template-Ästhetik, dichte Seiten, viel Motion, mit einem klaren Pitch: „Wenn du eine Site wie diese willst, nimm dieses Tool.“

Gegenbeispiele sind leicht zu erkennen. Eine SaaS-Site auf einem WordPress-Theme von 2018 mit Stockillustration von „Leuten am Laptop“ wirkt vor dem ersten Scroll zehn Jahre alt. Eine Kreativagentur-Homepage mit langsamem Autoplay-Video und einem Hero mit vier CTAs wirkt wie ein Pitch Deck, das sich als Website ausgibt. Die Kategorie, nicht die Marke, ist die Lektion.

Fünf Fragen, um jeden Stack zu bewerten

Bevor du einen Stack kopierst, bewerte ihn. Fünf Fragen, in dieser Reihenfolge.

1. Wie fühlt sich Navigation an? Ein vollständiger Reload mit einem Flash of Unstyled Content heißt, der Stack liegt mindestens einen Zyklus zurück. Ein Zustandswechsel heißt, er ist aktuell.
2. Wie schnell ist der First Paint auf Mittelklasse-Mobilgeräten? Unter 800 ms ist die Latte 2026. Über 2 Sekunden ist durchgefallen.
3. Wie wird die Schrift geladen? Selbst gehostete, vorgeladene Variable Font, oder Drittanbieter-CDN mit einem Flash aus Fallback-Text? Die erste wirkt engineered, die zweite wirkt nach 2019.
4. Wie dient Motion der Botschaft? Auf den Inhalt choreografiert oder als Dekoration aufgeklebt? Lottie-Hero-Animationen verraten es sofort.
5. Wie sieht die leere Seite aus? Entferne Hero und Verläufe. Wenn Schrift, Abstände und Struktur immer noch wie eine Marke wirken, ist der Stack echt. Wenn alles zerfällt, war es ein Template. Der Beitrag Empty States are the Product behandelt die tiefere Version.

Die Anti-Patterns, die eine Site über Nacht altern lassen

Sechs Muster, die Sites in dem Moment datieren, in dem sie live gehen.

• Drag-and-Drop-Builder-Suppe. Eine Seite, die aus zwölf per Drag-and-Drop zusammengezogenen Marketplace-Sections besteht, sieht aus wie zwölf Marketplace-Sections. Nichts wurde gegen das Nächste gestaltet.
• Illustrationspakete, die niemand wiedererkennt. Generische Vektormenschen auf flachen Hintergründen aus denselben drei Bibliotheken, die jede andere SaaS auch nutzt. Visuelles Rauschen ohne Wiedererkennung.
• Lottie-Animationen in jeder Section. Schwer, barrierefreiheitsfeindlich und alle mit denselben Easing-Kurven, weil sie aus demselben Template-Marktplatz stammen.
• Page Builder, die 600 KB CSS ausliefern. Eine Site mit einem 600-KB-CSS-Bundle hat nicht verstanden, dass Performance eine Markenentscheidung ist.
• Die Handcode-von-2021-Falle. Einmal sorgfältig von Hand codiert, nie aktualisiert. Die Struktur ist sauber, die Typografie veraltet, der Kontrast falsch. Wartung gehört zum Stack.
• Cookie-Modals, die den Hero blockieren. Eine Consent-Wand als erste Interaktion ist ein Stack-Versagen im Compliance-Kostüm.

Das Stack-Audit 2026

Bewerte deine aktuelle Marketing-Site anhand dieser sieben Fragen. Bei fünf oder mehr „Nein“-Antworten bist du nicht auf dem Stack von 2026.

1. Rendert die Seite auf einer 4G-Verbindung in unter einer Sekunde?
2. Sind die Schriften selbst gehostete Variable Fonts, above the fold vorgeladen?
3. Fühlt sich Navigation zwischen Routen wie ein Zustandswechsel an, nicht wie ein Reload?
4. Gibt es eine Akzentfarbe, die höchstens viermal auf der Seite vorkommt?
5. Hat jede Animation eine klare Aufgabe (Affordance, Reveal, Transition)?
6. Sind die Produktvisuals echte Screenshots des echten Produkts, nicht Stock oder 3D-Abstraktionen?
7. Würde die Seite auch ohne Hero noch markenkonform wirken?

Fünf oder mehr „Ja“-Antworten heißt, du bist auf dem Stack von 2026. Unter fünf heißt, der nächste Redesign ist ein Stack-Upgrade, kein visueller Refresh. Der Beitrag Webdesign-Trends 2026 ist die breitere Mustersammlung, in der dieses Audit lebt, die Landingpage-Designprinzipien sind die Prinzipienebene für die Seite selbst, und Typografiesystem-Design plus Webdesign-Prinzipien decken den Rest ab.

Häufig gestellte Fragen

Ist Next.js 2026 wirklich das einzige glaubwürdige Framework für Marketing-Sites?

Für ernsthafte SaaS- und Markensites: praktisch ja. Astro ist glaubwürdig für inhaltslastige Sites mit fast keinem JavaScript-Bedarf. Framer ist glaubwürdig für designlastige Kreativagentur-Flächen. Alles andere kommt mit einer Decke, die sich zeigt, sobald die Site sich wie ein Produkt verhalten muss.

Sollte ich Webflow verlassen, wenn meine Site schon funktioniert?

Nicht allein wegen der Ästhetik. Wechsle, wenn Webflow nicht mehr kann, was die Site braucht (eigene Motion, Prefetching auf Routenebene, View Transitions, echte Performance-Budgets) oder wenn die Marketing-Site Komponenten mit dem Produkt teilen muss. Wenn es Broschürenware ist und gut konvertiert, lass es.

Framer, Webflow oder Next.js für eine kleine Marke?

Framer gewinnt bei einer designlastigen, Template-getriebenen Ästhetik, in der Motion und visuelles System die Hauptarbeit leisten. Webflow gewinnt, wenn ein Marketing-Team Updates ohne Engineering ausliefert und die Site wirklich Broschürenware ist. Next.js gewinnt überall dort, wo die Site Code, Komponenten oder Inhalte mit einem echten Produkt teilen muss.

Baue die Site auf dem Stack von 2026

Der Stack ist kein Geheimnis. Die Vorreiter liefern alle dieselbe Familie an Entscheidungen aus, und der Abstand zwischen einer Site von 2026 und einer von 2021 lässt sich in einem fokussierten Projekt schließen. Wähle das Framework. Wähle die Variable Font und die Mono. Wähle die drei Motion-Muster, die die Seite wirklich braucht. Streiche alles andere.

Wenn du eine Marketing-Site auf dem Stack von 2026 willst statt eines Webflow-Templates aus dem letzten Zyklus, hire Brainy. Wir liefern Markensites auf Next.js, mit selbst gehosteten Variable Fonts, echter Motion und einem Performance-Budget, das du auf eine Folie packen könntest.