Le stack des sites marketing en 2026

La plupart des sites marketing « modernes » ont cinq ans de retard. Un template Webflow de 2021, deux webfonts d'Adobe, une Lottie dans le hero, un bundle CSS de la taille d'un film Marvel. Puis une page Linear ou Cursor se charge en 200 ms à côté, et l'écart saute aux yeux dès le premier scroll.

Le stack 2026 se reconnaît en dix secondes. Même framework, mêmes polices, même motion, même densité visuelle. Voici le décryptage marque par marque de la façon dont les meilleurs sites marketing sont vraiment construits, et l'audit que votre prochain site doit réussir.

Le stack 2026 se compose de cinq couches

Arrêtez de penser le site marketing comme une seule chose. Les pages que les designers veulent copier sont cinq couches distinctes empilées. Ratez-en une seule et tout le site fait daté.

Les couches, dans l'ordre : framework et hébergement, polices, motion et interaction, système visuel, et performance. Chacune a un choix par défaut en 2026, et chaque choix par défaut a une raison claire d'avoir gagné.

Couche 1 : framework et hébergement ont convergé vers Next.js plus Vercel

La guerre des frameworks est finie. Linear, Cursor, v0, Anthropic, OpenAI, Stripe, Vercel et Notion déploient tous du Next.js sur Vercel. C'est de la convergence, pas une coïncidence. Ce combo offre rendu statique, prérendu partiel, cache en edge, optimisation d'images et préchargement au niveau des routes, clé en main.

Les alternatives crédibles sont étroites. Astro plus Vercel fonctionne pour les SaaS indés qui veulent quasi zéro JavaScript sur un site riche en contenu. Framer (le builder de la boîte elle-même) règne sur les agences créatives très design et le segment indé piloté par templates. Webflow est encore sur beaucoup de pages, mais sa part dans le SaaS sérieux s'érode. Les équipes qui livraient des homepages Webflow passent à Next.js plus un CMS Sanity ou Contentful, parce qu'elles butent sur un plafond dès que le site marketing doit se comporter comme un produit.

Si votre site a la moindre surface façon produit (une hero section avec des données en direct, une tarification branchée sur la facturation, une route de docs avec authentification), livrez du Next.js. Pour de la plaquette d'un studio créatif, Framer suffit. Tout le reste est du legacy.

Couche 2 : les polices ont convergé vers un petit roster précis

Regardez la typographie des sites que vous voulez vraiment copier. Ce sont les mêmes six familles en rotation. Inter et son cousin display, Geist et Geist Mono, Söhne, Switzer, Tobias et General Sans. Voilà le roster actif.

Inter est le choix par défaut. Linear utilise Inter Display dans le hero et Inter pour le corps. Vercel livre Geist et Geist Mono partout, y compris sur v0 et sur le site de Vercel lui-même. Anthropic utilise Söhne avec une sous-marque serif pour l'éditorial. Stripe utilise Söhne sur le marketing comme sur le produit. OpenAI livre une variante sur mesure de Söhne. Notion et Framer utilisent tous deux Inter. Cursor utilise une police display sur mesure dans le hero et une sans-serif de travail pour le corps.

La sous-tendance de la police mono est propre aux outils pour développeurs. Vercel, v0, Cursor, Linear et Anthropic utilisent tous une monospace dans les labels d'intro, les exemples de code, les pastilles de version et les minuscules légendes. Elle signale « conçu avec rigueur » sans le dire, et c'est le moyen le plus rapide de faire passer un site SaaS pour du 2026 plutôt que du 2022.

La plupart sont des polices variables auto-hébergées sur le même domaine que le site. Adobe Fonts perd du terrain dans le SaaS sérieux parce que le coût en latence est réel et que les licences directes le battent désormais sur le prix. Le guide d'association de polices explique comment choisir la paire. La méta-règle de 2026 : une bonne famille variable plus une mono, c'est largement assez.

Couche 3 : la motion est l'affordance, pas la décoration

En 2026, la motion travaille, elle ne comble pas le silence. Les moments forts sont pilotés par le scroll, les changements de page utilisent l'API View Transitions, et les micro-interactions vivent dans Framer Motion ou en CSS pur.

Trois motifs dominent. La chorégraphie du hero (l'éclosion de dégradé de Linear au premier rendu, le fondu typographique retenu d'Anthropic). Les révélations produit épinglées au scroll (Cursor épingle un panneau, la page défile, le panneau se met à jour sur place). Les changements de page par view transition (Vercel et v0 utilisent l'API View Transitions pour que la navigation ressemble à un changement d'état, pas à un rechargement).

Lottie part en retraite discrète sur les sites sérieux. Lourd, hostile à l'accessibilité, ça sent 2021. Les marques qui animent aujourd'hui utilisent Framer Motion pour les composants, GSAP ou du CSS lié au scroll pour les moments forts, View Transitions pour la navigation. Le critère est « chaque mouvement a une raison », pas « on a de l'animation ».

Couche 4 : le système visuel est géométrique, hors grille et bruité

Le langage visuel des sites de 2026 se reconnaît sans contexte. De grandes typographies géométriques comme élément de hero. Des micro-captures d'écran hors grille qui débordent de la colonne. Des palettes de couleurs en OKLCH avec des modes à fort contraste qui semblent natifs. Des dégradés bruités (un dégradé lisse avec un grain de pellicule en surcouche) qui remplacent les dégradés plats. Des motifs de hero en SVG génératif à la place de la photo de stock.

Le hero de Linear est la référence canonique : une seule phrase en graisse surdimensionnée, une douce éclosion de dégradé, une capture produit qui flotte avec un léger parallaxe, des pastilles d'accent dans une seule couleur. La homepage de Stripe fait tourner une composition SVG sur mesure qui s'anime au scroll, avec leur générateur de dégradés derrière le texte. Anthropic livre une sous-marque éditoriale à dominante serif et une marque produit à dominante sans-serif, et le contraste entre les deux fait un vrai travail.

Le geste unificateur, c'est la retenue. Une couleur d'accent utilisée trois ou quatre fois maximum. Une image de hero, grande. Une seule voix typographique sur tout le site. Les marques qui paraissent les plus « designées » en 2026 sont celles qui ont le moins d'ingrédients visuels par page. L'analyse sur la hiérarchie visuelle explique pourquoi la soustraction se lit comme du goût.

Couche 5 : la performance est la décision esthétique finale

Les marques qui ont le meilleur look se chargent le plus vite. Même discipline exprimée de deux façons. Un site qui ne s'affiche pas en moins d'une seconde en 4G n'est pas un site de 2026, peu importe son look.

Le schéma est constant chez les leaders. Polices variables auto-hébergées, préchargées avec font-display: swap. Génération statique avec Vercel Image Optimization. Préchargement au niveau des routes. View Transitions pour des changements de page en douceur. Aucun script tiers dans le chemin critique. De vrais chiffres de Core Web Vitals que vous pourriez mettre sur une slide.

La navigation « instantanée » est l'élément le plus copiable. Vous survolez un lien, Next.js précharge la route. Vous cliquez, la page est en cache, et la View Transition adoucit le changement. Le site marketing se comporte comme un produit, et c'est le but. L'article la vitesse est la marque va plus loin.

Le décryptage marque par marque

Les détails comptent plus que les principes. Voici ce que fait réellement tourner, en surface, chacun des sites cités.

Linear. Next.js sur Vercel. Inter et Inter Display, auto-hébergées. Framer Motion pour les interactions de composants, CSS lié au scroll pour le hero en dégradé. Une seule couleur d'accent, chorégraphie du hero au premier rendu, CTA collant sur les longues pages.

Cursor. Next.js sur Vercel. Police display sur mesure pour le hero, sans-serif de travail pour le corps, mono pour les labels. Les révélations produit épinglées au scroll sont le geste signature.

v0 et Vercel. Next.js, Geist et Geist Mono, View Transitions sur toutes les routes marketing. Le hero « live preview » de v0 est une vraie iframe en fonctionnement d'une page générée, ce qui est la preuve la plus forte qu'un produit puisse montrer.

Anthropic. Next.js, Söhne, motion retenue (fondus typographiques, pas de tours de passe-passe en parallaxe), sous-marque serif pour l'éditorial. En faire moins que presque tous ses pairs et paraître plus « premium » grâce à ça.

Stripe. Next.js, Söhne, compositions SVG sur mesure dans le hero, le générateur de dégradés derrière le texte, et une IA pilotée par la documentation qui fixe la barre de la fintech depuis dix ans.

OpenAI. Next.js, police sur mesure proche de Söhne, densité minimaliste plus proche d'un musée que d'une landing page SaaS. Presque aucun CTA dans le hero, ce qui marche parce que la marque peut se le permettre.

Notion. Next.js sur Vercel, Inter, illustrations produit animées montrant la vraie interface faire la vraie chose. Chargé en vrais visuels produit, léger en métaphores de stock.

Framer (la société). Construit sur Framer lui-même, le dogfooding ultime. Esthétique de template très design, pages denses, riches en motion, avec un pitch clair : « si vous voulez un site comme celui-ci, utilisez cet outil ».

Les contre-exemples sont faciles à repérer. Un site SaaS encore sur un thème WordPress de 2018 avec une illustration de stock de « gens qui utilisent un laptop » paraît avoir dix ans avant le premier scroll. Une homepage d'agence créative avec une vidéo en autoplay lente et un hero à quatre CTA ressemble à un pitch deck qui se fait passer pour un site web. La leçon vient de la catégorie, pas de la marque.

Cinq questions pour évaluer n'importe quel stack

Avant de copier un stack, évaluez-le. Cinq questions, dans cet ordre.

1. Quel effet fait la navigation ? Un rechargement complet avec un flash de contenu non stylé signifie que le stack a au moins un cycle de retard. Un changement d'état signifie qu'il est à jour.
2. Quelle est la vitesse du premier rendu sur un mobile milieu de gamme ? Moins de 800 ms, c'est la barre de 2026. Plus de 2 secondes, c'est un échec.
3. Comment la typo est-elle chargée ? Police variable auto-hébergée et préchargée, ou CDN tiers avec un flash de texte de secours ? La première fait sérieux, la seconde fait 2019.
4. Comment la motion sert-elle le message ? Chorégraphiée selon le contenu, ou collée comme décoration ? Les animations Lottie dans le hero sont le signe qui ne trompe pas.
5. À quoi ressemble la page vide ? Retirez le hero et les dégradés. Si la typo, l'espacement et la structure se lisent encore comme une marque, le stack est réel. Si tout s'effondre, c'était un template. L'article les états vides sont le produit en donne la version approfondie.

Les anti-patterns qui vieillissent un site du jour au lendemain

Six motifs qui datent un site dès sa mise en ligne.

• La soupe de builder en drag-and-drop. Une page construite en glissant douze sections de marketplace ensemble ressemble à douze sections de marketplace. Rien n'a été conçu en fonction du suivant.
• Les packs d'illustrations que personne ne reconnaît. Des personnages vectoriels génériques sur fond plat, issus des trois mêmes bibliothèques que tous les autres SaaS. Du bruit visuel sans mémorisation.
• Des animations Lottie dans chaque section. Lourdes, hostiles à l'accessibilité, et toutes avec les mêmes courbes d'easing parce qu'elles viennent de la même marketplace de templates.
• Des page builders qui livrent 600 Ko de CSS. Un site avec un bundle CSS de 600 Ko n'a pas compris que la performance est une décision de marque.
• Le piège du codé à la main en 2021. Codé à la main avec soin une fois, jamais mis à jour. La structure est propre, la typo est datée, le contraste est faux. La maintenance fait partie du stack.
• Des modales de cookies qui bloquent le hero. Un mur de consentement comme première interaction est un échec de stack déguisé en conformité.

L'audit du stack 2026

Notez votre site marketing actuel avec ces sept questions. Cinq réponses « non » ou plus, et vous n'êtes pas sur le stack 2026.

1. La page s'affiche-t-elle en moins d'une seconde sur une connexion 4G ?
2. Les polices sont-elles des polices variables auto-hébergées et préchargées au-dessus de la ligne de flottaison ?
3. La navigation entre les routes ressemble-t-elle à un changement d'état, pas à un rechargement ?
4. Y a-t-il une seule couleur d'accent utilisée quatre fois ou moins sur la page ?
5. Chaque animation a-t-elle un rôle clair (affordance, révélation, transition) ?
6. Les visuels produit sont-ils de vraies captures d'écran du vrai produit, pas du stock ni des abstractions 3D ?
7. La page se lirait-elle encore comme fidèle à la marque sans son hero ?

Cinq réponses « oui » ou plus, et vous êtes sur le stack 2026. Moins de cinq, et la prochaine refonte est une mise à niveau du stack, pas un rafraîchissement visuel. L'article tendances du web design 2026 est la carte plus large des motifs dans laquelle s'inscrit cet audit, l'analyse des principes de design de landing page est la couche de principes pour la page elle-même, et conception de systèmes typographiques ainsi que principes du web design couvrent le reste.

Questions fréquentes

Next.js est-il vraiment le seul framework crédible pour les sites marketing en 2026 ?

Pour les SaaS sérieux et les sites de marque, en pratique oui. Astro est crédible pour les sites riches en contenu avec quasi zéro besoin de JavaScript. Framer est crédible pour les surfaces d'agences créatives très design. Tout le reste arrive avec un plafond qui se révèle dès que le site doit se comporter comme un produit.

Dois-je quitter Webflow si mon site fonctionne déjà ?

Pas pour des raisons purement esthétiques. Changez quand Webflow n'arrive plus à faire ce dont le site a besoin (motion sur mesure, préchargement au niveau des routes, view transitions, vrais budgets de performance) ou quand le site marketing doit partager des composants avec le produit. Si c'est de la plaquette et que ça convertit bien, laissez-le.

Framer, Webflow ou Next.js pour une petite marque ?

Framer gagne pour une esthétique très design pilotée par templates, où la motion et le système visuel font le gros du travail. Webflow gagne quand une équipe marketing publie des mises à jour sans ingénierie et que le site est vraiment de la plaquette. Next.js gagne partout où le site doit partager du code, des composants ou du contenu avec un vrai produit.

Construisez le site sur le stack 2026

Le stack n'est pas un secret. Les leaders livrent tous la même famille de décisions, et l'écart entre un site de 2026 et un site de 2021 se comble en un seul projet bien ciblé. Choisissez le framework. Choisissez la police variable et la mono. Choisissez les trois motifs de motion dont la page a vraiment besoin. Coupez tout le reste.

Si vous voulez un site marketing construit sur le stack 2026 plutôt qu'un template Webflow du cycle précédent, engagez Brainy. Nous livrons des sites de marque sur Next.js, avec des polices variables auto-hébergées, une vraie motion, et un budget de performance que vous pourriez mettre sur une slide.