Bento design : la grille modulaire d Apple en webdesign

Apple a passé une décennie à raffiner sa grille modulaire. En juin 2023, à la WWDC, l’entreprise présente la page d’Apple Vision Pro avec une mise en page qui restera dans l’histoire du webdesign : des cards de tailles inégales, coins arrondis généreux, contrastes de surface, hiérarchie par taille — la boîte bento japonaise transposée à la page web. En dix-huit mois, le bento design devient le langage dominant des sections « features » des SaaS, des landing pages tech, et des présentations produit. Microsoft, Samsung, Raycast, Linear, et des centaines d’éditeurs s’y mettent. C’est probablement la tendance la plus rapide à s’installer depuis le flat design d’iOS 7.

En résumé pour les pressés :

• Définition — Bento design = grille modulaire de cards de tailles inégales, inspirée des boîtes-repas japonaises, popularisée par Apple WWDC 2023.
• Origine — Lointaine racine Microsoft Metro (2010) + bento Vision Pro Apple (juin 2023) + démocratisation CSS Subgrid (2024).
• Signaux visuels — Grille modulaire variable, coins arrondis 16-24px, contrastes de taille, palette restreinte, hiérarchie spatiale.
• Usages — Sections « features » SaaS, landing produits, présentations corporate, dashboards.
• SEO — Compatible si on respecte le reading order et la sémantique HTML correcte.
• Outils — CSS Grid + Subgrid, design tokens, Tailwind, Figma Auto Layout.

Qu’est-ce que le bento design en webdesign ?

Le bento design est une mise en page composée de blocs (cards) de tailles inégales arrangés en grille modulaire. Le nom vient des boîtes-repas japonaises (bentō), où plats principaux et accompagnements occupent des compartiments de tailles différentes selon leur importance, le tout formant une composition équilibrée. Transposé au web, le principe est identique : un bloc large pour la fonctionnalité signature, plusieurs blocs moyens pour les fonctionnalités secondaires, des petits blocs pour les détails complémentaires.

Trois principes structurent le bento design. Premièrement, la hiérarchie spatiale : un bloc grand attire plus l’œil qu’un bloc petit, indépendamment du contenu. Le designer peut donc orchestrer la lecture par la taille des cards. Deuxièmement, la modularité : tous les blocs partagent la même langue graphique (radius, ombres, palette, espacement), seuls le contenu et la taille varient. Troisièmement, l’asymétrie contrôlée : la grille n’est pas régulière comme un Material Design classique, mais elle n’est pas non plus chaotique comme un anti-design — elle a une logique implicite, presque toujours basée sur des ratios proportionnels.

Le bento design est techniquement un descendant direct de plusieurs grands-parents : la grille suisse du XXe siècle, le Material Design de Google, les widget arrangements de macOS, et plus particulièrement Microsoft Metro de 2010 qui avait introduit les tuiles asymétriques avant l’heure. Pour situer la grammaire dans le paysage des styles, voir notre guide complet des styles de webdesign.

Origine : de Microsoft Metro à Apple WWDC 2023

L’histoire du bento design comprend deux moments fondateurs séparés par treize ans. Premier moment : Microsoft Metro en 2010. Quand Microsoft présente Windows Phone 7, son interface fait apparaître les « Live Tiles », des tuiles rectangulaires de tailles variables qui affichent dynamiquement des contenus. Le système est révolutionnaire pour l’époque, mais commercialement le projet échoue : Windows Phone ne décolle pas, les Live Tiles disparaissent. Pour autant, le langage visuel est posé.

Deuxième moment, le moment fondateur web : juin 2023, WWDC, présentation d’Apple Vision Pro. La page produit utilise une mise en page bento où chaque feature occupe une card de taille proportionnelle à son importance, dans un environnement sombre avec des coins très arrondis. Visuellement, c’est immédiatement reconnu comme une référence. Dans les douze mois qui suivent, des centaines d’éditeurs SaaS et marques tech adoptent le langage : Raycast restructure ses sections features en bento, Microsoft revient à une grammaire bento sur Surface, Samsung adopte le bento pour Galaxy AI, Linear et Notion l’incorporent dans leurs sections marketing.

Le timing est par ailleurs facilité par une évolution technique majeure : CSS Subgrid devient disponible dans tous les navigateurs majeurs (Chrome, Edge, Firefox, Safari) entre 2023 et 2024. Pour la première fois, les designers peuvent construire des grilles imbriquées propres sans recourir à des hacks. Le bento design devient à la fois esthétiquement à la mode et techniquement faisable proprement — combinaison qui explique l’adoption éclair.

7 signes visuels qui identifient le bento design

Voici les sept marqueurs qui distinguent un vrai bento d’une simple grille de cards.

1. Cards de tailles inégales — Au moins trois tailles différentes (grande, moyenne, petite) coexistent dans la même grille.
2. Hiérarchie spatiale claire — Le bloc dominant occupe 30 à 50 % de la surface, les blocs secondaires 15 à 25 %, les petits 5 à 10 %.
3. Coins très arrondis (16-24px) — Border-radius généreux, signature visuelle Apple. Pas de coins carrés.
4. Palette restreinte cohérente — Souvent dark mode (charbon, gris), avec accents discrets. Les cards partagent la même langue chromatique.
5. Espacement régulier entre cards — Gap CSS constant (16, 20 ou 24px). L’espace est lisible, jamais serré.
6. Contenu varié par card — Une card peut contenir un titre, une image, une donnée chiffrée, un graphique, une vidéo, un illustratif. Le mix enrichit la lecture.
7. Ombres ou bordures subtiles — Soit ombres très douces (0 4px 12px rgba(0,0,0,0.08)), soit bordures fines (1px solid rgba(255,255,255,0.06) en dark). Jamais d’ombres dures type néo-brutalisme.

Démonstration : la home NEWP en bento

Pour matérialiser ces sept signes, nous avons restructuré notre home page en grille bento. Le résultat conserve l’identité NEWP (palette signature) mais adopte la grammaire spatiale Apple WWDC : hero principal en grande card, features secondaires en cards moyennes, métriques en petites cards.

Ce que cette démo permet de tester : la lisibilité de la hiérarchie spatiale, la respiration entre les cards, la cohérence du langage visuel inter-cards. Ce que la version actuelle simplifie : sur un site bento de production, chaque card est typiquement enrichie d’une animation au scroll (apparition séquentielle, hover de profondeur), absentes ici pour rester lisible.

Quand utiliser le bento (et quand l’éviter)

Le bento design fonctionne particulièrement bien dans certains contextes éditoriaux, et fonctionne mal dans d’autres. Voici nos repères de choix.

• Recommandé — Section « features » d’un SaaS, page produit présentant plusieurs capacités, dashboards et tableaux de bord, présentations corporate avec mix de KPIs et texte, agences créatives, portfolios studios. Tous les cas où le contenu se compose de plusieurs unités hétérogènes mais structurellement comparables.
• Possible mais pas optimal — Pages éditoriales longues, articles de blog, pages institutionnelles textuelles. Le bento force le contenu à devenir des unités, ce qui peut casser une narration linéaire.
• Déconseillé — Contenu strictement linéaire (article académique, manuel), formulaires complexes, e-commerce fiche produit unique. Forcer le bento sur ces contextes produit une lecture moins claire.

Trois questions de cadrage à se poser avant d’opter pour le bento. Premièrement : avez-vous au moins 5 à 9 unités de contenu à présenter (en dessous, la grille est pauvre ; au-dessus de 12, elle devient confuse) ? Deuxièmement : ces unités sont-elles structurellement comparables (toutes des features, toutes des métriques, toutes des produits) ? Troisièmement : pouvez-vous accepter une hiérarchie déterminée par la taille (mettre un contenu en grande card lui donne une importance que vous assumez) ? Si oui aux trois, le bento est probablement le bon choix.

Bento et SEO : compatible si on respecte le reading order

Bonne nouvelle : le bento design est nativement compatible avec un bon SEO. La grille modulaire ne nuit en rien au référencement, à condition de respecter quatre règles techniques.

1. Sémantique HTML correcte — Chaque card doit utiliser <article> ou <section> selon le sens, avec un titre hiérarchique (<h3> ou <h4>) qui décrit son contenu. Pas de <div> nus.
2. Reading order DOM ≠ visual order — CSS Grid permet de placer visuellement une card en haut à droite alors qu’elle apparaît plus tard dans le DOM. Pour le crawl Google et l’accessibilité lecteur d’écran, c’est l’ordre DOM qui prime. Privilégier l’ordre logique de lecture dans le HTML, ajuster en CSS pour le visuel.
3. Contraste suffisant card → fond — Les fonds de cards en dark mode doivent rester suffisamment distincts du fond global pour que la grille reste lisible. rgba(255,255,255,0.04) sur fond #0A0A0C peut être insuffisant ; tester avec WebAIM Contrast Checker.
4. Performance optimisée — Les images dans les cards doivent être servies en formats modernes (AVIF, WebP), avec loading="lazy" pour les cards sous le fold. Les animations d’apparition doivent respecter prefers-reduced-motion.

Avec ces quatre règles, un site bento atteint des Core Web Vitals comparables à un site classique. Sur certains projets que nous avons audités, le bento a même amélioré les CWV par rapport à l’ancienne version : la modularité a obligé à des images mieux dimensionnées et à un layout plus prévisible (donc CLS plus stable).

5 sites emblématiques du bento design

Voici cinq références où le bento est exécuté avec rigueur. À étudier dans cet ordre pour calibrer votre œil sur les variations possibles.

À noter qu’au-delà de ces cinq références, le bento est probablement la grammaire la plus largement adoptée dans le SaaS et la tech en 2024-2026. Les sections « What’s new », « Features », « Why us » se sont quasi systématiquement bentoisées sur tous les sites de tech qui ont fait une refonte depuis WWDC 2023.

Construire un bento en CSS Grid : la méthode NEWP

Côté implémentation, le bento moderne se construit en CSS Grid pur, sans framework. Voici notre méthode en sept paramètres essentiels.

• Grille de base — display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px;. Douze colonnes pour la flexibilité maximale, gap de 20px standard.
• Placement par grid-column — Chaque card utilise grid-column: span N où N est le nombre de colonnes occupées. Card large : span 8 ; card moyenne : span 6 ou 4 ; card petite : span 3.
• Placement par grid-row — Pour les cards qui occupent plusieurs lignes verticalement, ajouter grid-row: span N. Permet le ratio 2:1 ou 3:2 caractéristique des bento Apple.
• CSS Subgrid pour cards imbriquées — Quand une card contient elle-même des sous-éléments structurés, utiliser grid-template-rows: subgrid pour aligner sur la grille parente. Indispensable pour les cards à header + body + footer.
• Coins arrondis cohérents — border-radius: 20px sur toutes les cards. Pour les coins internes d’images, le radius doit suivre (sinon il y a un effet visuel sale).
• Padding interne — 24 à 32px de padding selon la taille de la card. Les petites cards padding réduit ; les grandes padding plus généreux.
• Responsive — Sur mobile, basculer en grid-template-columns: 1fr (une colonne) et laisser les cards s’empiler. Sur tablette, deux colonnes peuvent suffire. Bento sur petit écran ne tente pas de reproduire le bento desktop.

Pour comprendre les grammaires connexes ou alternatives, parcourez également notre fiche dark mode premium qui est l’écosystème palette le plus naturel du bento moderne, notre fiche Material Design qui a préparé le terrain de la grille de cards, et notre fiche minimalisme contemporain dont la rigueur d’espace blanc complète naturellement le bento.

FAQ — Bento design webdesign

Qu’est-ce que le bento design en webdesign ?

Le bento design est une mise en page modulaire composée de cards de tailles inégales arrangées en grille, inspirée des boîtes-repas japonaises. Popularisée par Apple à la WWDC 2023 sur la page d’Apple Vision Pro, elle est devenue depuis 2024 la grammaire dominante des sections « features » des SaaS et landings tech. La hiérarchie de lecture se fait par la taille des cards, le langage visuel est unifié, l’asymétrie est contrôlée.

Comment créer un bento layout en CSS ?

Méthode standard : CSS Grid avec grid-template-columns: repeat(12, 1fr) et gap: 20px. Chaque card utilise grid-column: span N pour définir sa largeur (4, 6, 8 selon les besoins) et optionnellement grid-row: span N pour la hauteur. Pour les cards qui contiennent elles-mêmes une grille interne (header + body + footer alignés), utiliser CSS Subgrid avec grid-template-rows: subgrid. Pas de framework spécifique nécessaire.

Bento design et SEO : compatible ?

Oui, à quatre conditions : utiliser de la sémantique HTML correcte (chaque card = article ou section avec titre hiérarchique), respecter le reading order DOM logique (CSS Grid permet le visual order différent, mais le DOM doit rester lisible séquentiellement pour les crawlers), garantir un contraste suffisant entre cards et fond, et optimiser les images (formats modernes, lazy loading). À ces conditions, les Core Web Vitals d’un bento sont équivalents à ceux d’un site classique.

CSS Subgrid est-il supporté partout en 2026 ?

Oui, depuis fin 2023. Subgrid est supporté par Chrome (117+), Edge (117+), Firefox (71+), Safari (16+). Pour les utilisateurs sur des navigateurs très anciens (Internet Explorer ou Safari < 16), prévoir un fallback simple en CSS Grid classique. En 2026, la couverture de la population web supportant Subgrid dépasse 95 % selon caniuse.com.

Bento vs Material Design : différence ?

Material Design (Google, 2014) est un système de design complet incluant philosophie, animations, composants, et grille. Sa grille est régulière, basée sur une élévation. Le bento design est une mise en page spécifique, indépendante d’un système de design. Sa grille est volontairement irrégulière. On peut faire du bento dans un environnement Material Design (les cards Material se prêtent au bento), mais les deux ne sont pas équivalents : Material est un écosystème, bento est une grammaire de layout.

Faut-il toujours utiliser le bento en dark mode ?

Non, mais c’est l’écosystème le plus naturel. Apple WWDC 2023 a posé la référence en dark, et la majorité des sites bento qui ont suivi sont en dark. En clair, le bento fonctionne aussi (apple.com a des sections bento en clair, Microsoft Surface en clair), mais il demande plus de rigueur sur les contrastes des fonds de cards (ombres très douces ou bordures très fines pour structurer).

Combien de cards maximum dans un bento ?

Recommandation pratique : 5 à 9 cards par section bento. En dessous de 5, la grille devient pauvre et n’a pas besoin d’être bento. Au-dessus de 12, la lecture devient confuse et la hiérarchie spatiale perd son efficacité. Pour un site avec beaucoup d’éléments à présenter, mieux vaut plusieurs sections bento séparées que une seule géante. Apple Vision Pro respecte typiquement ce ratio : 6-8 cards par section.

Conclusion : la nouvelle grammaire de présentation des produits tech

Le bento design est probablement la tendance la plus rapidement et durablement adoptée du webdesign récent. Sa force tient à une triple rencontre : un besoin produit (présenter de multiples fonctionnalités sans hiérarchie textuelle plate), une faisabilité technique (CSS Subgrid démocratisé en 2023-2024), et une référence culturelle puissante (Apple WWDC 2023). Pour les sections « features » d’un SaaS, les présentations corporate avec plusieurs unités de valeur, ou les sites produits à proposition multiple, c’est devenu en moins de deux ans le standard de fait.

Pour aller plus loin sur des styles voisins. Le bento se marie excellemment avec le dark mode premium (la combo signature des sites tech 2024-2026), le Material Design (qui a inspiré la grille modulaire) et le minimalisme contemporain (pour l’espacement entre les cases).

Vous avez un projet ? Notre équipe étudie chaque brief avec une grille rigoureuse. Choisissez le scénario adapté à vos enjeux :

• Créer un nouveau site internet → — projet from scratch, du brief au lancement, intégrant le bento design et le layout adaptés à votre marque
• Refondre un site existant → — repenser identité visuelle, architecture et performance d’un site qui ne convertit plus