Bento Grid UI

Que fait Bento Grid UI ?

Une page est plus facile à parcourir quand chaque idée se trouve dans son propre compartiment et que les compartiments forment une grille régulière et serrée.

Une grille rectangulaire de cellules arrondies de tailles variées, chacune contenant une idée, avec des espaces égaux et réduits entre elles. Les pages de fonctionnalités Apple en ont fait la mise en page par défaut des produits à partir de 2022.

Période : 2022–présent · Ère : Contemporaine & Spatiale · Domaine : Design graphique & UI · Aussi appelé : Bento Layout, Bento Box Grid, Grille de cartes modulaires

Quand charger ce skill

Chargez-le lorsque l'utilisateur demande : "bento", "bento grid", "bento box layout", "card grid", "feature grid", "modular cards", "apple-style features", "tiled layout", "dashboard tiles".

Adapté pour : pages de fonctionnalités produit, landing pages SaaS, portfolios personnels, tableaux de bord d'applications, pages de notes de version.

Ne l'utilisez pas lorsque :

• Le contenu est un texte long, car les cellules d'au plus 30 mots fragmentent un argument.
• Les éléments ont un ordre strict ou un classement que le lecteur doit suivre de haut en bas.
• Le contenu est irrégulier ou clairsemé, car une grille avec moins de 5 cellules laisse des trous visibles.

Directives système

Lors de la génération de mises en page UI ou graphiques en Bento Grid UI, vous DEVEZ :

1. Diviser la page en une grille de 4 ou 12 colonnes et laisser chaque cellule couvrir 1, 2 ou 3 colonnes et 1 ou 2 lignes.
2. Conserver un espacement uniforme de 12 px à 16 px entre toutes les cellules, et ne jamais mélanger les tailles d'espacement.
3. Donner à chaque cellule un rayon de 20 px à 28 px et utiliser le même rayon sur toutes les cellules d'une page.
4. Mettre un seul message dans chaque cellule : un titre d'au plus 8 mots, un visuel ou un chiffre.
5. Faire en sorte que la cellule vedette soit de taille 2 par 2 et remplir les autres cellules en 1 par 1 ou 2 par 1, afin que les tailles indiquent l'ordre d'importance.
6. Remplir les cellules avec 2 à 4 nuances d'une même famille, plus une ou deux cellules dans la couleur d'accent.
7. Aligner le contenu des cellules avec le même remplissage intérieur de 24 px, et ancrer le texte en haut à gauche ou en bas à gauche.

Garde-fous

Chaque ligne ci-dessous brise le style. Vérifiez votre résultat par rapport à la liste avant de le renvoyer.

• JAMAIS : Des espacements de tailles différentes entre les cellules d'une même grille.
• JAMAIS : Des trous vides dans la grille qui brisent le rectangle.
• JAMAIS : Des cellules avec des rayons de coin différents sur une même page.
• JAMAIS : Plusieurs messages ou appels à l'action dans une seule cellule.
• JAMAIS : Plus de 8 cellules dans le premier viewport.
• JAMAIS : Des bordures épaisses ou des ombres dures qui combatent le carrelage.
• JAMAIS : Des paragraphes de plus de 30 mots à l'intérieur d'une cellule.

Profil vectoriel

Axe	Score	1 signifie	5 signifie
Ornementation	■■□□□ 2/5	minimal pur	maximaliste
Dimensionalité	■■□□□ 2/5	strictement 2D	3D / spatial complet
Rigidité de la grille	■■■■■ 5/5	chaotique / organique	grille mathématique stricte
Réalisme skeuomorphique	■■□□□ 2/5	numérique abstrait	matériau photoréaliste
Expressivité typographique	■■■□□ 3/5	neutre / invisible	expérimentale / illustrative

Conservez ces scores. Si une demande déplace un axe de 2 points ou plus, vous avez quitté le style : allez vers "Fallbacks de lignée".

Logique spatiale et de grille

• Mécanique de grille : Une grille de 4 colonnes sur desktop avec des espacements de 16 px et des lignes de 200 px à 280 px ; les cellules couvrent 1 à 3 colonnes et 1 à 2 lignes, et la grille se réduit à 1 ou 2 colonnes en dessous de 768 px.
• Ratio d'espace blanc : Les espacements occupent 5 à 8 % de la surface ; l'espace ouvert se déplace à l'intérieur des cellules, où le padding est de 24 px à 32 px ; l'échelle d'espacement est de 8, 12, 16, 24, 32 et 64 px.
• Règles d'alignement : Les bords des cellules s'alignent sur la grille sur les deux axes ; le texte à l'intérieur d'une cellule est aligné à gauche et ancré en haut ou en bas ; l'ensemble du bloc bento est centré dans un conteneur de 1120 px à 1280 px.
• Géométrie du conteneur : Les cellules sont des rectangles arrondis avec un rayon de 24 px et sans marge extérieure ; les rapports d'aspect des cellules sont 1:1, 2:1 et 1:2, et les visuels à l'intérieur sont rognés au même rayon.

Typographie

• Classifications : sans-serif néo-grotesque · sans-serif géométrique
• Tracking : Les tailles d'affichage prennent -0.03em ; le corps reste à 0 ; les petites légendes prennent +0.01em.
• Interlignage : Affichage 1.05 à 1.15 ; corps 1.45 ; légendes 1.3.
• Règles de hiérarchie :
  • Définir le titre de la cellule vedette en 40 px à 56 px, les autres titres en 20 px à 28 px et les légendes en 14 px.
  • Utiliser le poids 600 pour les titres et 400 pour les légendes ; utiliser une couleur atténuée à 4.5:1 pour les lignes secondaires.
  • Limiter un titre à 8 mots et une légende à 20 mots, car la cellule a peu d'espace.
  • Associer un grand nombre à 64 px ou plus avec une légende de 14 px pour chaque indicateur clé.

Associations de polices

Affichage	Corps	Remarque
Inter Tight	Inter	Tailles d'affichage serrées pour les titres courts de cellules.
Geist	Geist	Une seule famille aux poids 400, 500 et 600.
Plus Jakarta Sans	Inter	Un visage d'affichage plus chaleureux pour les produits grand public.

Couleur et éclairage

• Structure de la palette : Une page neutre, des cellules dans deux à quatre nuances d'une même famille à faible saturation, et une ou deux cellules d'accent qui couvrent environ 15 % de la grille.
• Règles de contraste : Encre sur Cellule donne environ 17:1 et Graphite sur Cellule donne environ 5:1 ; texte blanc sur Bleu d'accent donne environ 4.7:1, ce qui passe WCAG AA pour le texte du corps ; maintenez chaque paire de cellules à 4.5:1 ou mieux.
• Traitement de surface : Remplis plats ou quasi-plats ; les cellules peuvent contenir une photographie, un rendu de produit ou un dégradé de deux nuances proches, et une cellule ne mélange jamais plus d'un type de surface.
• Lumière et ombre : Principalement aucune ; une ombre facultative 0 1px 2px rgba(0, 0, 0, 0.06) ou une bordure de 1 px rgba(0, 0, 0, 0.06) sépare les cellules blanches de la page.

Palette

Nom	Hex	Rôle
Page	#F5F5F7	fond de page
Cellule	#FFFFFF	remplissage par défaut de la cellule
Teinte de cellule	#E8E8ED	remplissage secondaire de la cellule
Encre	#1D1D1F	texte
Graphite	#6E6E73	texte secondaire
Bleu d'accent	#0071E3	cellule d'accent et liens
Nuit	#000000	remplissage de cellule foncé

Matérialité et texture

• Simulation de surface : Aucune ; les cellules se lisent comme des compartiments d'une boîte à lunch laquée, mais la surface est une couleur plate ou une image et n'imite aucun matériau.
• Règles de bordure : Pas de bordure par défaut ; une bordure de 1 px solid rgba(0, 0, 0, 0.06) apparaît là où une cellule blanche repose sur une page blanche ; le mode sombre utilise 1px rgba(255, 255, 255, 0.1).
• Flou et élévation : Le flou est de 0 px par défaut ; l'élévation est limitée à une ombre de 0 1px 2px sur la page et une ombre de 0 12px 32px rgba(0, 0, 0, 0.12) au survol.

Ornementation et iconographie

• Iconographie : Icônes simples avec un trait de 1.5 px à 2 px et des extrémités rondes à 24 px à 32 px, en Encre ou en blanc sur les cellules d'accent ; au plus une icône par cellule.
• Illustration : Renders de produits, captures d'écran UI et grands nombres, rognés au rayon de la cellule ; des dégradés abstraits remplissent les cellules vides.
• Éléments décoratifs : cellule vedette en 2 par 2 · chiffres métriques surdimensionnés · captures d'écran UI · badges (pill tags) · cellules de dégradé

Mouvement et interactivité

• Né à l'écran : oui
• Physique de transition : Les cellules entrent avec un décalage de 40 ms à 60 ms, en fondu et en montant de 12 px ; au survol, une cellule passe à l'échelle 1.02 et son ombre s'assombrit ; les voisins ne bougent pas.
• Easing : cubic-bezier(0.25, 0.1, 0.25, 1)
• Durée (ms) : 350
• Survol et actif : Le survol met la cellule à l'échelle 1.02 et ajoute une ombre 0 12px 32px rgba(0, 0, 0, 0.12) ; l'actif met à l'échelle 0.98 ; le focus ajoute un anneau Bleu d'accent de 2 px décalé de 2 px.

Guide de code et tokens

Définissez data-style="bento-grid-ui" sur l'élément racine et collez les tokens. Le fichier tokens.css contient les mêmes tokens et un ensemble de règles de référence.

[data-style="bento-grid-ui"] {
  --color-bg: #F5F5F7;
  --color-surface: #FFFFFF;
  --color-text: #1D1D1F;
  --color-muted: #6E6E73;
  --color-primary: #1D1D1F;
  --color-accent: #0071E3;
  --color-border: rgba(0, 0, 0, 0.06);
  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --border-radius: 24px;
  --border-width: 1px;
  --shadow-elevation: 0 1px 2px rgba(0, 0, 0, 0.06);
  --backdrop-filter: none;
  --space-unit: 8px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration: 350ms;
  --grid-gap: 16px;
  --cell-padding: 24px;
  --color-on-bg: #1D1D1F;
  --color-on-surface: #1D1D1F;
  --color-on-primary: #F5F5F7;
  --color-on-accent: #FFFFFF;
  --color-muted-on-bg: #6E6E73;
  --color-muted-on-surface: #6E6E73;
  --color-link: #1D1D1F;
  --color-link-on-surface: #0071E3;
  --display-weight: 600;
  --subhead-weight: 500;
  --body-weight: 400;
  --strong-weight: 600;
  --label-weight: 500;
  --display-tracking: -0.03em;
  --display-leading: 1.05;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 16px;
  --icon-stroke: 1.75;
}

Modèles Tailwind :

Élément	Classes
page	bg-[#F5F5F7] text-[#1D1D1F] font-sans antialiased p-4 md:p-8
grille	mx-auto grid max-w-6xl grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 auto-rows-[240px]
carte	rounded-3xl border border-black/[0.06] bg-white p-6 shadow-[0_1px_2px_rgba(0,0,0,0.06)] transition duration-[350ms] hover:scale-[1.02] hover:shadow-[0_12px_32px_rgba(0,0,0,0.12)]
carte vedette	rounded-3xl bg-[#0071E3] p-8 text-white sm:col-span-2 sm:row-span-2
titre	font-semibold text-2xl leading-[1.1] tracking-[-0.03em]

Pack visuel

Les images et icônes de ce style sont des fichiers. Utilisez-les tels quels, ou lisez-les comme une spécification et dessinez les vôtres dans le même langage.

Fichier	Contenu
pack/hero.svg	Plaque héroïque, 800 par 600. Une image abstraite dans le langage visuel du style.
pack/pattern.svg	Carreau de motif, 80 par 80. Il se répète dans les deux directions.
pack/icons.svg	Sprite d'icônes : accueil, recherche, cœur, étoile, cloche, utilisateur, mail, calendrier, image, éclair, lecture, vérification, fermeture, curseurs.

• Icônes : contour, trait 1.75 sur un champ de 24 px, extrémités rondes, jointures rondes, conteneur : arrondi. Utilisation : <svg class="icon"><use href="pack/icons.svg#home"/></svg>. Une icône prend currentColor.
• Famille d'icônes : le sprite est extrait de Lucide (Regular) par Lucide Contributors, licence ISC. Raison : Une ligne ronde simple à un poids : discret dans une cellule, par défaut des interfaces produit actuelles. C'est un substitut open-source pour une démonstration. Pour un produit, utilisez la bibliothèque d'icônes de la marque et choisissez la famille selon les règles ci-dessous.
• Police d'affichage : poids 600, tracking -0.03em, interlignage 1.05, casse : aucune.
• Poids : affichage 600, sous-titre 500, corps 400, gras dans le texte 600, étiquettes et boutons 500. Le style utilise 3 poids (400, 500, 600) et aucun autre. L'affichage est 200 plus lourd que le corps. L'accent est la taille : un mot plus grand est l'accent, donc les poids restent peu nombreux.
• Police de corps : 16 px, interlignage 1.5.
• Page : héroïque empilée, alignée à gauche, densité compacte, inclinaison de l'accent 0°.
• Couleur du texte : --color-text est pour le champ de lecture principal uniquement. Sur chaque champ, utilisez son token : --color-on-bg, --color-on-surface, --color-on-primary, --color-on-accent.

Comment choisir un pack d'icônes

Un pack d'icônes est une police de caractères pour les images. Choisissez-le avec le même soin que la police de texte. Ces règles s'appliquent à un ensemble open-source et à une bibliothèque sous licence.

1. Le trait correspond à la hampe. Placez une icône à côté du texte du corps à la taille du texte. La ligne de l'icône et la hampe d'une lettre ont le même poids.
2. Les extrémités et les coins suivent le token de rayon. Les extrémités plates et les jointures en onglet vont avec un rayon de zéro. Les extrémités rondes et les jointures rondes vont avec un rayon doux.
3. Le mode de remplissage suit la technologie de l'époque. Les époques d'impression taillent des formes solides. Les époques d'écran avec profondeur remplissent et ombragent la forme. Les interfaces produit actuelles dessinent un contour.
4. Les métaphores ne sont pas plus jeunes que le style. Chaque image est un objet que l'époque connaissait. Une icône avec une métaphore plus tardive brise la période.
5. Une famille, une grille. Toutes les icônes proviennent d'une seule famille et d'une seule variante, dessinées sur un seul champ. Ne mélangez pas les familles sur une même surface.
6. La famille couvre le produit. Listez chaque concept dont le produit a besoin avant de vous engager. Une famille qui n'a pas d'icône pour l'un d'eux est la mauvaise famille.
7. La couleur est un token. Une icône prend currentColor. Un second ton provient d'un token, pas du fichier.
8. La licence permet l'utilisation. Lisez la licence de l'ensemble. Donnez crédit là où la licence le demande. Un produit avec une marque utilise sa bibliothèque sous licence et applique les mêmes règles pour choisir la famille.

Fallbacks de lignée

Lorsque l'utilisateur demande une variation, n'improvisez pas. Mélangez-vous vers le voisin nommé ici et chargez son skill.

• Si l'utilisateur demande plus ordonné : dirigez-vous vers swiss-international (Style international suisse). Réglez le rayon à 0 px, supprimez les remplissages des cellules et divisez les cellules avec des règles de 1 px ; conservez la grille à 12 colonnes et l'échelle typographique.

• Si l'utilisateur demande plus vitreux : dirigez-vous vers glassmorphism (Glassmorphisme). Remplissez les cellules avec rgba(255, 255, 255, 0.18) et backdrop-filter blur(20px) sur une page dégradée ; conservez les espacements et le rayon.

• Si l'utilisateur demande plus audacieux : dirigez-vous vers neo-brutalism-ui (Néo-brutalisme UI). Ajoutez une bordure noire de 3 px et une ombre 4px 4px 0 0 #000000, et remplissez les cellules avec des teintes plates vives ; conservez la grille et l'espacement de 16 px.

• Si l'utilisateur demande plus plat : dirigez-vous vers flat-design (Flat Design). Supprimez les ombres et les bordures, et utilisez des remplissages de cellule solides sans photographie ; conservez le rayon de 24 px et l'espacement.

• Provient de (allez ici pour une version plus orthodoxe) : flat-design, swiss-international

• Se mélange bien avec : glassmorphism, swiss-international

• Le plus proche par profil vectoriel : bauhaus, material-design, swiss-international

Cible émotionnelle

Curiosité ordonnée : le spectateur a l'impression que le produit est organisé, compact et facile à parcourir en quelques secondes.

Mots-clés

Grille · Modulaire · Cellules · Tuiles · Apple · Contemporain · UI · Layout · Produit · Fonctionnalités · Landing page · Dashboard · Portfolio · Carte · Accent · Radius · Espacement · Typographie · Sans-serif · Inter · Geist · Jakarta · Neutre · Couleur · Accentuation · Contraste · Minimal · Plat · Ombre douce · Transition · Survol · Curiosité · Organisation · Balayable