Kit UI Bento (sections code et fichier pour Figma)

Ce kit s’adresse aux designers UI et aux intégrateurs qui construisent une page d’accueil ou une page produit en grille bento et veulent partir de sections déjà calées. Chaque section existe en HTML avec Tailwind CSS v4, en composant Astro à props typées et dans un fichier pour Figma, sur les mêmes design tokens, en clair et en sombre. La grille de chaque section suit sa propre largeur : les sections ont été vérifiées à 375, 768 et 1 440 px de large, sans défilement horizontal, là où une grille bento casse le plus souvent.

• 8 sections : en-tête (hero), fonctionnalités, chiffres, galerie, témoignages, tarifs, questions fréquentes et appel à l’action, soit 35 tuiles au total.
• 12 composants, 28 variantes : tuile (6 variantes), bouton (5), puce (5), message d’alerte (3), avatar (2), et une variante pour le champ de saisie, le sélecteur segmenté, le badge d’icône, la touche clavier, les étoiles de note, la liste à coches et le lien fléché.
• Une planche d’états : 12 états de bouton et 4 états de champ, pour voir sans rien coder les états comme le survol, le focus ou la désactivation.
• 7 icônes utilisées par les sections.
• 2 thèmes, clair et sombre : clair par défaut, sombre si le système le demande, et l’attribut data-theme sur la balise html force l’un ou l’autre.
• 9 pages HTML : une page de démonstration qui réunit tout le kit, et une page par section.
• 8 sections Astro et 2 composants partagés (l’en-tête de section et les icônes), avec un fichier LISEZMOI-astro.txt qui explique l’installation.
• 4 photos de remplissage pour la galerie, en WebP, chacune en deux tailles.
• Un fichier pour Figma (chiffres du fichier lui-même, distincts de ceux du code) : 150 variables (119 primitives et 31 sémantiques en modes clair et sombre), 19 styles de texte, 2 styles d’effet, 9 jeux de composants pour 41 variantes, 12 composants simples, et 2 écrans d’exemple qui reprennent les 8 sections, l’un en clair, l’autre en sombre.

Les textes et les valeurs affichés dans les sections (titres, tarifs, notes, témoignages) sont un contenu de démonstration en anglais : vous les remplacez par les vôtres, dans le HTML ou par les props des composants Astro.

Fichiers du kit :

html/index.html
html/sections/   (8 sections : hero, features, stats, gallery, testimonials, pricing, faq, cta)
html/css/kit.css
html/css/tokens.css
tailwind/theme.css
tailwind/bento.css
astro/           (8 sections, Icon.astro, SectionHead.astro, LISEZMOI-astro.txt)
assets/          (4 photos de la galerie, WebP)
figma/bento-ui-kit-1.0.0.fig

Fabrication et IA

Le code du kit (sections HTML, composants Astro, thème Tailwind) et le fichier pour Figma ont été produits avec un assistant d’IA, puis relus et contrôlés : aucune erreur axe-core en clair comme en sombre, contrastes vérifiés sur 24 paires dans chaque thème, et tous les espacements sur l’échelle de 4 px. Les 4 photos de la galerie de démonstration ont été générées par IA avec le modèle krea-2 de Krea, puis recadrées.

• HTML et CSS compilé, sans CDN : html/index.html et les pages de html/sections/ s’ouvrent dans un navigateur, sans installation ni étape de build. html/css/kit.css contient le CSS compilé du kit.
• CSS custom properties, clair et sombre : html/css/tokens.css porte les couleurs, espacements, rayons, ombres et styles de texte en variables CSS. Ce sont les tokens du starter DTCG de Beryl Design, complétés par quelques valeurs propres au kit.
• Tailwind CSS v4 (thème et entrée) : tailwind/theme.css remplace la palette, les espacements, les rayons et la typographie par défaut par les tokens du kit, et tailwind/bento.css est le fichier d’entrée à importer une seule fois. Le kit n’utilise aucune valeur arbitraire : une valeur qui manque se crée d’abord comme token.
• Composants Astro à props typées (TypeScript) : chaque section expose son interface Props, et chaque prop est facultative. Il faut un projet Astro avec Tailwind CSS v4 ; les étapes sont dans LISEZMOI-astro.txt.
• Fichier .fig (figma/bento-ui-kit-1.0.0.fig) : un fichier pour Figma avec variables, styles, composants à variantes en auto layout et écrans d’exemple, à importer dans votre espace.
• Polices : Geist et Geist Mono, sous licence SIL OFL 1.1, sont chargées par un lien et ne sont pas incluses dans le kit.

Ce qui a été contrôlé sur la démonstration : espacements sur une échelle de 4 px, contraste de 24 paires de couleurs dans chaque thème, aucune erreur d’accessibilité relevée par axe-core en clair comme en sombre.

À savoir avant l’achat :

• Le fichier pour Figma montre les sections à 1 440 px seulement, en clair et en sombre. Il ne contient pas d’écran à 375 ni à 768 px : ces largeurs sont couvertes par le code.
• Dans le fichier pour Figma, les rangées de la grille bento ont une hauteur fixe. Si vous allongez un texte, agrandissez la rangée à la main.
• Dans un projet Astro, copiez les photos de assets/ dans public/ pour les afficher dans la galerie, comme l’indique LISEZMOI-astro.txt. Sans photo, la galerie affiche un visuel dessiné en CSS.
• Les 4 photos de la galerie ont été générées par IA (modèle krea-2) pour ce kit. Elles ne montrent ni texte, ni logo, ni visage.

Le kit est vendu avec la licence commerciale : vous pouvez utiliser les sections, les composants et le fichier dans vos projets personnels et professionnels, y compris pour vos clients et dans les sites ou applications que vous vendez, mais pas revendre ni redistribuer les fichiers du kit, même modifiés, comme kit ou comme modèle.

• Bento design : la tendance UI, guide et exemples
• L’art du design web : bento, Metro UI, grid et masonry

1.0.0 (10 novembre 2026) : première version.