Le bento grid, ce nouveau hero qui sent le slop d'IA

Ouvrez dans vos onglets les pages d'accueil des dix dernières startups devtools en Série A. Comptez les heros qui sont une grille de tuiles arrondies : une cellule large en haut, deux ou trois cellules presque carrées en dessous, chaque coin rayonné à 1rem, chaque surface un léger dégradé posé sur du verre dépoli. Vous perdrez le compte vers la septième. Cette grille porte un nom, désormais. C'est le bento.

Avant, ça voulait dire quelque chose de précis. Aujourd'hui, ça veut surtout dire qu'une IA a assemblé ça, ou qu'un humain n'a jamais regardé autre chose que des trucs assemblés par une IA.

D'où ça vient vraiment

Apple n'a pas inventé le bento grid, mais c'est grâce à Apple que votre designer connaît le mot. Les slides de la keynote WWDC de juin 2022 présentaient les arguments produit dans des boîtes inégales : une grosse pour la capacité phare, des satellites plus petits pour les specs secondaires. La presse design s'est aussitôt jetée sur la métaphore de la boîte à repas japonaise : des compartiments de tailles différentes, chacun contenant une seule chose, l'ensemble se lisant comme un repas équilibré. Dès les pages marketing de l'iPhone 15 et les grilles de fonctionnalités de macOS, le bento était devenu la langue maison d'Apple pour dire "voici un paquet dense de features et nous avons dirigé artistiquement chaque cellule".

C'est cette dernière partie que tout le monde a laissée tomber. Les bentos d'Apple sont dirigés artistiquement. Chaque cellule a son illustration sur mesure, son rendu personnalisé, son cadrage réglé à la main. La grille est un cadre pour le savoir-faire, pas un substitut. L'asymétrie est porteuse : la grosse cellule est grosse parce que cette fonctionnalité compte davantage, la photo déborde d'une manière précise parce que quelqu'un a décidé qu'elle le ferait.

Puis ça s'est fait abstraire en primitive de mise en page, et le savoir-faire est parti par le fond.

Le trajet jusqu'au réglage par défaut

Le chemin de la keynote au slop est court et traçable.

D'Apple à la couche Dribbble. Quelques mois après la WWDC 2022, "bento grid" était un tag Dribbble avec des milliers de shots, pour la plupart des grilles vides avec des dégradés bouche-trou, zéro contenu, du pur cosplay de layout. La métaphore s'est détachée du repas pour devenir une forme.

De Dribbble à l'écosystème des templates. Les starter kits Next.js et les boutiques de templates de la galaxie Vercel ont livré le motif comme une section prête à poser. Les composants marketing de Tailwind UI proposent carrément une catégorie nommée Bento grids : voilà la source canonique, copiable-collable, où un million de sites sont allés piocher. La grille a cessé d'être quelque chose qu'on dessine pour devenir quelque chose qu'on importe.

Des templates aux générateurs. Voici le point de bascule. Quand v0, Lovable et Bolt se sont entraînés sur cette couche de templates et ont structuré leurs sorties à partir d'elle, le bento est devenu une *sortie par défaut*. Demandez à v0 une "section de fonctionnalités pour une landing page SaaS" et vous avez de bonnes chances d'obtenir un grid-cols-3 de cartes arrondies avec une cellule hero en col-span-2, chacune enveloppée dans un bg-gradient-to-br par-dessus un backdrop-blur. Personne n'a demandé de bento. Le modèle a attrapé la "section de fonctionnalités moderne" la plus probable, et la réponse la plus probable, c'est précisément ce dont le jeu d'entraînement était saturé.

C'est tout le mécanisme derrière pourquoi tous les sites générés par IA se ressemblent : le générateur renvoie le centre statistique de son corpus, et le corpus, ce sont les marketplaces de templates. Le bento fait maintenant partie de la même empreinte digitale qu'Inter, #3b82f6 et le dégradé bleu-violet.

Le motif exact

Voici le révélateur, rendu dans le code vers lequel il se compile presque toujours. Si vous avez audité plus de cinq builds d'IA, vous reconnaîtrez chaque ligne.

<section class="grid grid-cols-1 md:grid-cols-3 gap-4 max-w-6xl mx-auto px-6">
  <!-- la grosse cellule obligatoire -->
  <div class="md:col-span-2 md:row-span-2 rounded-3xl p-8
              bg-gradient-to-br from-slate-900 to-slate-800
              border border-white/10 backdrop-blur-md
              shadow-2xl">
    <h3 class="text-2xl font-semibold tracking-tight">Lightning fast</h3>
    <p class="text-slate-400 mt-2">Built for speed and scale.</p>
  </div>

  <div class="rounded-3xl p-6 bg-gradient-to-br from-slate-900 to-slate-800
              border border-white/10 backdrop-blur-md">…</div>
  <div class="rounded-3xl p-6 bg-gradient-to-br from-slate-900 to-slate-800
              border border-white/10 backdrop-blur-md">…</div>
  <div class="rounded-3xl p-6 bg-gradient-to-br from-slate-900 to-slate-800
              border border-white/10 backdrop-blur-md">…</div>
</section>

Les révélateurs qui le composent, chacun déjà un marqueur à lui seul, ensemble un aveu :

• rounded-3xl partout. 1.5rem de rayon sur chaque coin de chaque cellule. Pas rounded-xl, pas un mélange : le même coussin uniforme sur toutes les tuiles, parce que le modèle n'a aucune raison de le faire varier.
• bg-gradient-to-br from-x-900 to-x-800. Le dégradé diagonal à deux arrêts entre deux nuances voisines de la *même* rampe slate/zinc/neutral. slate-900 vaut #0f172a, slate-800 vaut #1e293b : un écart si faible qu'il produit un reflet à peine perceptible, qui se lit comme "premium" sur une vignette et comme "rien" de près. Le même réflexe documenté dans la signature du dégradé bleu-violet de Tailwind, juste désaturé pour la foule du dark mode.
• border border-white/10 + backdrop-blur-md. Glassmorphism par défaut. Il n'y a presque jamais rien *derrière* la cellule à flouter : le backdrop-blur est de la déco culte du cargo, un filtre appliqué à un fond plein où il ne fait rien d'autre que forcer le navigateur à promouvoir l'élément sur sa propre couche de composition (le peindre, flouter la couche en dessous, recomposer) pour un résultat visible nul. Tout ce tic se fait disséquer dans le glassmorphism et le révélateur du backdrop-blur.
• shadow-2xl sur la cellule hero uniquement. La grosse cellule récupère l'ombre lourde pour "ressortir". Elle flotte au-dessus d'une section plate sans aucune logique de source lumineuse.
• col-span-2 row-span-2. La seule décision structurelle de tout le bloc, et c'est toujours la cellule en haut à gauche, toujours en 2x2, parce que c'est l'exemple canonique de chaque tutoriel.
• Rythme intérieur identique. Chaque cellule : icône, titre en text-2xl font-semibold tracking-tight, accroche d'une ligne en text-slate-400. Tout l'intérêt du bento était d'avoir un contenu différencié par compartiment. Le bento d'IA a un échafaudage de contenu *identique* dans chaque boîte. C'est un repas où chaque compartiment contient le même riz.

Le révélateur de fond, c'est ce dernier. Un vrai bento mérite son asymétrie : la grosse cellule est grosse parce qu'elle accueille une capture produit, un graphique en direct, une vidéo ; les petites cellules accueillent une stat, un logo, une citation. Le bento slop agrandit une cellule puis y met le même

+

que partout ailleurs. La forme dit "ces choses ont des poids différents". Le contenu dit qu'elles sont toutes pareilles. Cette contradiction, c'est l'empreinte.

Où vous allez le repérer dans la nature

Pas de mise au pilori nominative. Les *emplacements du motif*, eux, sont d'une régularité mortelle :

• Les landing pages de demo-day des batchs YC. Cohortes du printemps 2026, thème sombre, le bento de fonctionnalités posé pile sous un titre Geist en text-6xl. Geist plus bento, c'est une combinaison assez bruyante pour dater un site dans une fenêtre de six mois, voir Geist, le nouvel Inter.
• Les SaaS wrappers d'IA. Tout ce qui est une fine couche au-dessus d'une API livre le bento comme sa section "capacités de la plateforme", parce que le générateur qui a construit le wrapper a aussi construit la page.
• Les marketplaces de templates elles-mêmes. Cherchez "bento" sur n'importe quelle boutique de templates Next.js et vous tombez sur des dizaines de kits quasi identiques. L'ouroboros : les templates nourrissent les générateurs, les générateurs normalisent le motif, le motif normalisé est repackagé en nouveaux templates.
• Les sites portfolio de développeurs qui viennent de découvrir v0. Le bento est le nouveau "j'ai un hero sombre avec un blob en dégradé" : le signal universel de quelqu'un qui livre le réglage par défaut.

Le geste de diagnostic : ouvrez les DevTools, inspectez la section et regardez la liste de classes de trois cellules voisines. Si elles sont identiques octet pour octet à l'exception du col-span, vous avez devant vous un bento généré. C'est exactement la lecture en cinq secondes décrite dans lire le CSS pour auditer un site.

Des alternatives, avec un point de vue

Le bento n'est pas interdit. Il est *épuisé en tant que défaut*. Le correctif n'est pas de bannir la grille, c'est de prendre une vraie décision de mise en page au lieu d'accepter l'autocomplétion. Voici ce vers quoi je vais, et quand.

1. La colonne unique éditoriale avec un vrai point d'ancrage

La plupart des landing pages ont une fonctionnalité qui compte et quatre qui la soutiennent. Un bento prétend qu'elles sont des pairs. Elles ne le sont pas. Ouvrez avec la principale : pleine largeur, un asset fort (une vraie capture produit, un graphique réel, une courte boucle), des blancs généreux, puis listez le reste en simples lignes typographiques. Pas de tuiles.

<section class="max-w-3xl mx-auto px-6 space-y-24">
  <figure class="space-y-6">
    <img src="/real-product-capture.png" class="w-full" alt="…" />
    <figcaption class="text-lg leading-relaxed">…</figcaption>
  </figure>

  <ul class="divide-y divide-neutral-800">
    <li class="py-6 grid grid-cols-[8rem_1fr] gap-6 items-baseline">
      <span class="font-mono text-sm uppercase tracking-widest text-neutral-500">Sync</span>
      <p>…</p>
    </li>
    <!-- a repeter -->
  </ul>
</section>

La ligne libellé-et-corps en grid-cols-[8rem_1fr] se lit comme une fiche technique ou un magazine bien composé. Impossible de la confondre avec un bento : elle n'a ni tuiles ni rayon. Elle dit que quelqu'un a choisi une hiérarchie.

2. Une asymétrie qui soit réellement asymétrique

Si vous voulez une grille, méritez l'asymétrie par le contenu, pas par col-span. Utilisez une grille cassée et décalée où les cellules ont des *formes vraiment différentes* dictées par ce qu'elles contiennent : une cellule haute pour un mockup de téléphone vertical, une cellule large pour une timeline, un petit carré pour un seul chiffre. Faites varier le rayon (rounded-sm sur la cellule de données, aucun sur la cellule image). Faites varier le traitement. À la seconde où deux cellules diffèrent par autre chose que la taille, la lecture "grille générée" s'évapore.

3. Virez carrément le conteneur

Le geste le plus sous-utilisé en 2026 : pas de cartes du tout. Les fonctionnalités en texte, bien composées, avec une couleur d'accent qui n'est pas #3b82f6 et une typo qui n'est ni Inter ni Geist. La typographie, les blancs et un seul filet bien décidé en disent plus sur le "réfléchi" que n'importe quelle dose de backdrop-blur. Le slop est dans le *réflexe de mise en conteneur* : la croyance que chaque morceau de contenu a besoin d'une boîte en verre arrondie. Résistez à ça et vous êtes déjà presque sorti d'affaire. Si vous n'avez pas d'accent en tête, comment choisir une couleur d'accent qui n'est pas le bleu Tailwind est l'étape suivante.

4. Si vous gardez le bento, cassez-le exprès

Gardez les compartiments mais violez le template à trois points précis : (a) mettez la grosse cellule en bas à droite, pas en haut à gauche, pour qu'elle se lise à rebrousse-poil de la mémoire musculaire ; (b) laissez une cellule déborder de la gouttière de la grille ou chevaucher sa voisine ; (c) donnez à chaque cellule un *type de contenu* différent, pas une taille différente du même type de contenu. Un bento avec une métrique en direct, une citation, une capture et une carte, c'est un bento. Un bento avec quatre titres, c'est une nappe de table.

Le fil rouge du passage du slop d'IA à la signature, c'est exactement ça : la sortie par défaut n'est jamais fausse, elle est juste *moyenne*, et la moyenne est désormais un signal de détection. Le bento est passé de "la grille de fonctionnalités réfléchie d'Apple" à "la forme que v0 renvoie quand il n'a rien de précis à dire" en moins de quatre ans. La grille n'a pas empiré. C'est l'intention qu'on lui a retirée.

Le test

Avant de livrer un bento, posez une seule question à chaque cellule : *ce contenu survivrait-il à être sorti de sa boîte et composé en texte brut ?* Si la réponse est "oui, rien n'est perdu", la boîte est de la déco et le bento ne fait aucun travail : vous avez une grille de slop. Si la réponse est "non, la capture, le graphique ou le chiffre a besoin du cadre", gardez la cellule.

Faites passer ce test à toute la grille. Les cellules qui le ratent ne devraient pas être des tuiles. Les cellules qui le réussissent n'avaient probablement pas besoin, au départ, de partager le rayon et le dégradé des autres.

Une boîte à bento, la vraie, est mémorable parce que chaque compartiment contient quelque chose de différent et de juste. Si la version IA se lit comme du slop, c'est qu'elle a gardé la boîte et oublié le repas.