Zinc-950 : le hero sombre est devenu le défaut de l'IA en 2026

Ouvrez dix landing pages de SaaS en Série A lancées ces six derniers mois. Huit d'entre elles s'affichent sur le même écran : un fond situé quelque part entre #09090b et #0a0a0a, un titre blanc en 5xl à 7xl au tracking serré, un sous-titre dans un gris désaturé, une couleur d'accent qui rougeoie derrière le H1 comme un soleil lointain, et un bouton Get started cerné d'une bordure en dégradé discret. Le hero est sombre. Le hero est *toujours* sombre, désormais.

Il y a deux ans, le défaut généré par l'IA, c'était le dégradé bleu-violet sur blanc, cette signature Tailwind from-blue-500 to-purple-600 dont j'ai déjà parlé. Ce tic est devenu si notoire que les générateurs, les prompts et les fondateurs qui se copient les uns les autres ont tous migré. Le nouveau refuge, c'est le near-black. Le dark mode se lit comme « entreprise d'infra sérieuse », il masque une multitude de péchés de mise en page, et, surtout, c'est ce que tous les modèles produisent quand vous demandez « un hero SaaS clean et moderne ». Le slop n'a pas disparu. Il a juste changé de longueur d'onde.

La palette exacte sur laquelle tombe chaque générateur

Demandez à Claude, v0, Lovable ou Bolt un hero SaaS sombre, et vous récupérez un éventail de valeurs étonnamment étroit. Pas du « sombre » dans l'absolu : ces tokens Tailwind précis, dans cet agencement précis.

/* La stack dark-default de 2026 */
background:      #09090b;  /* zinc-950, le canvas */
surface:         #18181b;  /* zinc-900, cartes, nav */
border:          #27272a;  /* zinc-800, bordures filiformes */
heading:         #fafafa;  /* zinc-50 , jamais du #fff pur */
body:            #a1a1aa;  /* zinc-400, le sous-titre */
muted:           #71717a;  /* zinc-500, légendes, footer */
accent:          #6366f1;  /* indigo-500, la seule touche */

C'est tout. Voilà toute la logique chromatique de la page. La raison pour laquelle c'est *zinc* précisément, et pas slate, gray, neutral ou stone, alors que Tailwind livre les cinq, mérite qu'on s'y arrête. Zinc a une légère sous-couche bleu froid : zinc-950, c'est #09090b, où le canal bleu 0b dépasse de peu le rouge et le vert 09. Ça paraît plus « designé » que le neutral plat (#0a0a0a, parfaitement équilibré) et moins ténébreux que le slate (#020617, très bleu). C'est devenu la base par défaut de shadcn/ui, et comme shadcn est la monoculture du design, zinc a été embarqué dans la foulée.

Ce n'est pas une supposition sur le goût. C'est un défaut littéralement sélectionné à votre place. Lancez le scaffold et regardez.

$ npx shadcn@latest init
✔ Which color would you like to use as the base color?
  › Neutral
    Gray
  ❯ Zinc          # en tête de liste, présurligné
    Stone
    Slate

Appuyez sur Entrée et votre components.json affichera "baseColor": "zinc" pour toujours. Des millions de repos trimballent désormais cette ligne que personne n'a choisie. Le défaut s'est propagé par mémoire musculaire, pas par décision.

L'accent tourne un peu : indigo #6366f1, violet #8b5cf6, emerald #10b981, ou un cyan #22d3ee, mais le geste est identique : exactement une teinte saturée contre le zinc, posée sur le bouton principal, les hovers de liens et un glow. Les designers appellent ça le « one-accent dark », et c'est un système réellement solide. Le problème n'est pas le système. Le problème, c'est que 80 % des pages font tourner le système *identique* avec les tokens *identiques*.

Pourquoi les machines vont chercher le near-black

Il y a quatre raisons mécaniques, et aucune n'est « parce que c'est ce qui est le plus beau ».

1. Le dark mode pardonne les espacements ratés. Sur une page blanche, chaque élément mal aligné, chaque gap incohérent, chaque ombre légèrement décalée hurle. Les fonds clairs n'ont nulle part où se cacher. Sur #09090b, le contraste fait tellement de travail à lui seul qu'une incohérence de padding maladroite (18px contre 24px) disparaît dans le vide. Les générateurs produisent des mises en page structurellement médiocres ; le dark mode est le camouflage de cette médiocrité. Le modèle a en somme appris que les sorties sombres récoltent moins de « ça a l'air cassé » en retour.

2. Les données d'entraînement ont penché vers le sombre. Linear, Vercel, Resend, Clerk, Railway, Supabase : les landing pages qui ont été capturées, postées sur Dribbble et tweetées comme « objectifs de design » sur 2024-2025 étaient massivement sombres. Nourrissez un modèle de dix mille exemples de « belle landing page SaaS » où la plupart des mieux notées sont near-black, et « belle landing page SaaS » *devient* near-black dans les poids. Vous n'obtenez pas du goût. Vous obtenez le centre statistique de l'économie de la capture d'écran.

3. Le texte blanc sur fond sombre passe WCAG sans effort. #fafafa sur #09090b, c'est un ratio de contraste de 19:1 : vous ne pouvez pas échouer à un audit d'accessibilité. Sur blanc, choisir un texte courant accessible mais pas agressif est une vraie décision (#374151 ? #4b5563 ?). Sur sombre, le texte courant zinc-400 sur zinc-950 atterrit à 7,76:1, largement au-dessus du seuil AA, et se lit comme « doux » sans que le designer y réfléchisse. Le chemin de moindre résistance est aussi le chemin conforme.

4. Un seul accent est la façon la moins chère de paraître intentionnel. Un unique néon contre le gris *se lit* comme une décision de design, même quand aucune décision n'a été prise. Le générateur n'a pas à construire une palette, à gérer une couleur secondaire, ni à équilibrer le chaud contre le froid. Il choisit un indigo, le saupoudre sur le CTA, et la page a l'air « pensée ». C'est l'équivalent visuel d'un ton assuré qui masque le fait de n'avoir rien à dire.

Si vous voulez sentir à quel point c'est mécanique, lancez vous-même le prompt et faites le diff des sorties. Même bg-zinc-950, même sous-titre text-zinc-400, même nav bg-gradient-to-b from-zinc-900, même glow shadow-[0_0_120px] shadow-indigo-500/20. J'ai catalogué cette convergence parmi les 73 patterns : le dark-default est désormais le pattern zéro.

Les cinq aveux d'un hero sombre généré

Quand j'audite un site en 30 secondes, les heros sombres se trahissent vite.

• Le glow radial derrière le H1. Un radial-gradient ou une tache floue positionnée en absolu, presque toujours en indigo-500/20 ou purple-600/30, plantée pile au centre derrière le titre. C'est l'équivalent en dark mode du dégradé bleu-violet : un geste « rends-le premium » par défaut, appliqué sans raison.
• Du text-zinc-400 pour chaque mot qui n'est pas un titre. Sous-titre, descriptions de features, footer : tout dans le même gris. Les vrais designers font varier la graisse et la couleur du texte courant selon la hiérarchie. Les générateurs choisissent un seul gris atténué et l'appliquent partout.
• La discrète bordure haute qui est en fait un dégradé. border-t border-white/10 plus une ligne filiforme bg-gradient-to-r from-transparent via-white/20 to-transparent. Vercel l'a fait le premier, et magnifiquement ; maintenant c'est sur chaque barre de nav.
• Une nav sticky en backdrop-blur-md par-dessus zinc-950/80. Le header en verre translucide, un tic du backdrop-blur que j'ai démonté à part entière. Très bien pris isolément, une empreinte digitale à grande échelle.
• Geist ou Inter, tracking-tight, 7xl. Le titre est en font-geist ou Inter, tracking-tight (ou tracking-tighter), text-7xl font-semibold. J'ai défendu l'idée que Geist est le nouveau fingerprint Inter : associé au zinc-950, c'est une signature de page générée quasi certaine.

Repérez-en trois sur cinq et vous regardez presque à coup sûr de la sortie, pas du design.

Le sombre, c'est bien. Le sombre généré, c'est le problème.

Soyons précis : il n'y a rien de mal à une landing page sombre. Le hero sombre de Linear est l'une des meilleures landing pages d'internet. Le souci, c'est que « hero SaaS sombre » s'est effondré en un seul template, et livrer ce template-là dit à chaque visiteur qui a vu quatre autres onglets aujourd'hui que vous êtes allé chercher le défaut. Voici comment garder le sombre et perdre l'empreinte.

1. Décalez-vous du zinc-950 de quelques degrés

Le changement au plus fort levier. #09090b est le tic. Poussez votre base vers une teinte que le générateur de personne ne prend par défaut.

/* Défaut généré */
--bg: #09090b;        /* zinc-950, reconnu instantanément */

/* Near-black chaud, façon imprimé, pas façon infra */
--bg: #0c0a09;        /* stone-950, un soupçon de chaleur */
--bg: #100e0c;        /* charcoal chaud sur mesure */

/* Encre pure, plus profond, plus bleu, moins "Tailwind" */
--bg: #06070a;        /* noir presque marine */

/* Noir cassé teinté de vert, distinctif, rare */
--bg: #0a0c0a;

Un charcoal chaud en #100e0c se lit de façon complètement différente du zinc froid : affiche en letterpress, pas clone de Vercel, et ça coûte une seule valeur hex sur mesure. La surcharge tient sur une ligne ; si vous êtes sous shadcn, vous ne quittez même pas globals.css.

:root {
  --background: 24 22% 6%;   /* charcoal chaud, HSL, au lieu du 240 10% 4% de zinc */
}

Réglez-la une fois et ne retapez plus jamais zinc-950.

2. Faites en sorte que le texte courant *ne soit pas* un seul gris plat

Remplacez le text-zinc-400 monotone par une petite échelle délibérée. Faites varier la luminosité *et* la chaleur selon le rôle.

--text-strong:  #f5f3f0;  /* blanc chaud, pas #fafafa */
--text-body:    #b8b2a8;  /* gris chaud pour les paragraphes */
--text-muted:   #6b665e;  /* légendes, métadonnées */

Des gris chauds sur un noir chaud créent une cohésion que le zinc froid-sur-froid n'atteint jamais, et la différence se voit dans la première demi-seconde. Inter et zinc relèvent du même réflexe paresseux, l'un pour la typo, l'autre pour la couleur, et le même effort tue les deux.

3. Tuez le glow radial ou méritez-le

S'il y a un glow derrière votre H1 et qu'il est en indigo-500/20, supprimez-le. Si vous voulez de la lumière dans le hero, rendez-la directionnelle et physique : une seule source hors axe, un éclat conique à arête nette, un dégradé texturé au grain, pas le flou « premium » centré par défaut. Mieux : remplacez le glow ambiant par un objet réel. Un rendu en wireframe, une capture du produit inclinée à 12° avec une vraie ombre, une vraie data visualisation. Le glow, c'est de la décoration qui tient lieu de contenu. Le contenu gagne.

4. Choisissez un accent qui n'est pas sur l'étagère Tailwind

Indigo #6366f1, violet #8b5cf6 et emerald #10b981 sont les trois accents par défaut parce que ce sont les nuances -500 de Tailwind. Sortez de l'étagère.

/* Accents hors défaut qui claquent quand même sur sombre */
--accent: #ff6b35;   /* orange brûlé, chaud, rare sur sombre */
--accent: #d4ff3f;   /* lime acide, agressif, mémorable */
--accent: #f5d0c5;   /* pêche poudrée, doux, éditorial */
--accent: #5eead4;   /* teal, la teinte de l'indigo décalée d'environ 15° hors nuancier */

Même un simple nudge de l'indigo #6366f1 vers un #5b6cff ou #7c5cff sur mesure casse la reconnaissance au pixel près. Un orange brûlé #ff6b35 sur un charcoal chaud, c'est une page que personne n'a déjà vue quatre fois aujourd'hui. Si vous voulez une vraie méthode pour choisir, j'ai écrit un article entier sur le choix d'un accent qui n'est pas le bleu Tailwind.

5. Ajoutez une chose que le générateur ne produirait jamais

C'est le geste qui sépare le design de la sortie. Un générateur produit la moyenne. Alors ajoutez le hors-moyenne : un morceau d'asymétrie, une décision typographique, une texture. Composez le titre dans une serif (Fraunces, Instrument Serif) contre le sombre : instantanément éditorial, instantanément pas-shadcn. Ajoutez un vrai grain de film via un overlay SVG feTurbulence à 4 % d'opacité. Cassez la grille : laissez la copie du hero dépasser de la marge gauche et le visuel déborder du bord droit. Allez chercher un accent en mix-blend-mode: difference que le modèle n'a aucune raison de produire. Une seule décision authentique vaut plus que dix défauts polis.

/* Overlay de grain, la texture que les générateurs n'ajoutent jamais */
.grain::after {
  content: "";
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,...feTurbulence...");
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
}

Le pattern plus large

Le dark-default, c'est la même maladie que le dégradé bleu-violet, le texte courant en Inter, la carte rounded-2xl, la nav backdrop-blur : un générateur qui trouve un optimum local, et tout le web qui s'y entasse jusqu'à ce que l'optimum devienne un cliché. Le remède n'est jamais « arrêtez d'utiliser le dark mode ». C'est le même remède que depuis toujours : prenez au moins une décision que le modèle ne prendrait pas.

Le near-black est réellement un canvas puissant. #09090b sorti tel quel de la config Tailwind est un aveu : vous avez laissé la machine décider. Les quinze minutes qu'il faut pour décaler votre base hors du zinc, bâtir une échelle de gris chauds en trois paliers, troquer l'accent contre une nuance hors défaut et ajouter une vraie texture, voilà tout l'écart entre « ça a l'air généré par IA » et « ça a l'air designé ». Cet écart est la seule chose qu'un visiteur avec cinq onglets ouverts remarque vraiment, et en 2026, chaque visiteur a cinq onglets ouverts.

Le hero est sombre. Très bien. Faites-en juste *votre* sombre.