kennedys0/taste-style-bento

N'utiliser cette compétence qu'après qu'un utilisateur l'ait explicitement choisie ou qu'une configuration de projet confirmée la spécifie. Pour les nouvelles demandes d'interface utilisateur non expliquées, utiliser un sélecteur de style tel que kennedys0/taste-style-selector au lieu de décider du goût de l'utilisateur ici. La marque existante, l'accessibilité et les préférences utilisateur prévalent sur tous les exemples ci-dessous. Ce guide de style n'est pas une autorisation pour commencer le codage de l'interface utilisateur avant la sélection du style.

Pack de style : Bento Grid

ID : bento Signature : Composition de cartes modulaire asymétrique avec une hiérarchie de poids visuel stricte, une anatomie interne variée des tuiles, et un rythme spatial unifié.

Ceci est un pack de style, pas une valeur par défaut obligatoire. Ne le charger qu'après une sélection explicite ou un style de projet applicable confirmé. Les instructions du projet peuvent remplacer les choix individuels. Préserver l'accessibilité, l'utilité et les contraintes de marque. Les polices sont des suggestions, pas des dépendances requises. Une grille uniforme 3x2 de cartes de fonctionnalités identiques ne correspond pas à une Bento Grid.

Bonnes correspondances / compromis

• Fonctionne bien pour : Aperçus de produits, pages d'accueil de portfolio, découverte de fonctionnalités pour développeurs, résumés de tableaux de bord, et vitrines d'écosystèmes matériels/logiciels.
• Attention avec : Données tabulaires linéaires à volume élevé ou flux transactionnels étape par étape où l'asymétrie de la grille distrait de la progression séquentielle.
• Directions de référence :
  • Bento Sombre Mat Moderne : Fond ardoise/obsidienne (#0B0D10) avec cartes graphite subtilement surélevées (#15191E), bordures translucides 1px (rgba(255, 255, 255, 0.08)), et une couleur d'accent vibrante.
  • Bento Clair Architectural Propre : Toile blanc cassé nette (#F8F9FA) avec carreaux de porcelaine blanc pur, séparateurs fins (rgba(0, 0, 0, 0.06)), et typographie charbon foncé.

Porte de fidélité de la grille Bento — obligatoire

Avant de déclarer une page de grille bento terminée, la fenêtre d'ouverture doit visuellement se lire comme une composition modulaire asymétrique et organisée. Si un utilisateur a choisi ce style, une grille uniforme de cartes identiques (icône + titre + paragraphe) est un ÉCHEC direct, car elle représente un modèle générique de mauvaise qualité.

Une implémentation réussie de la grille bento démontre tous les éléments suivants :

1. Poids Visuel Asymétrique Clair : La grille présente une hiérarchie focale distincte : exactement 1 tuile héroïque dominante (couvrant 2x2 ou 2x1 colonnes) qui communique le message principal, 1–2 tuiles secondaires moyennes, et 2–3 tuiles tertiaires compactes.
2. Anatomie Interne Variée des Tuiles : Chaque tuile possède une disposition interne unique adaptée à son contenu spécifique. La tuile 1 pourrait présenter un bloc de code interactif ; la tuile 2 un widget à bascule actif ; la tuile 3 un aperçu visuel ou un diagramme ; la tuile 4 un relevé de métriques en direct. Les dispositions identiques répétées entre les tuiles échouent.
3. Rythme Spatial Unifié et Alignement des Gouttières : Les bordures des tuiles s'alignent strictement le long d'une grille CSS cohérente (par exemple 3 ou 4 colonnes) avec des gouttières uniformes (16px–24px) et une courbure des coins correspondante (20px–28px).
4. Restructuration Mobile Délibérée : Sur les fenêtres mobiles, la bento multi-colonnes se réduit en une seule colonne logique, priorisée par le contenu, sans couper le contenu ni provoquer de débordements horizontaux gênants.
5. Hiérarchie Interne Lisible : Chaque tuile a un titre clair et succinct (18px–24px) et un contenu à contraste élevé, évitant les murs de petits textes compressés dans de petites boîtes.

Test de première fenêtre : Dans une capture d'écran de bureau, identifier la tuile héroïque dominante, les présentations internes variées des tuiles, et l'alignement unifié de la grille sans lire le titre de la page. Si toutes les tuiles se ressemblent, reconcevoir la hiérarchie de la grille.

Exception explicite de disposition Bento — les tuiles asymétriques sont encouragées

Remplacement spécifique Bento : La mise en garde universelle contre la mauvaise qualité concernant les cartes excessives ou l'encombrement du tableau de bord NE DOIT PAS être interprétée comme une interdiction des dispositions multi-tuiles ici. Une grille bento authentique est fondamentalement modulaire et compartimentée, fonctionnant comme une boîte à bento japonaise où chaque compartiment sert un plat distinct.

• Traitements de disposition autorisés : Étendues de colonnes/lignes de grille asymétriques (grid-column: span 2; grid-row: span 2;), surélévations subtiles au survol des cartes, mini-contrôles interactifs intégrés (bascules, onglets de code), et lueurs de bord ambiantes sur les tuiles actives.
• Limite anti-mauvaise qualité : Pas d'imbrication de carte dans une carte à l'intérieur d'une tuile bento. Une tuile est déjà un conteneur d'informations ; utiliser la hiérarchie typographique, les séparateurs et l'espacement pour la structure interne plutôt que d'imbriquer une autre carte à l'intérieur.
• Interprétation anti-mauvaise qualité : Évaluer les dispositions bento par la variété du contenu, la densité d'informations et la hiérarchie de lecture, pas en comptant les cartes. Les grilles de fonctionnalités uniformes sont de la mauvaise qualité ; les compositions bento asymétriques organisées sont un design authentique.

Typographie et style d'écriture

Sans-serif contemporaine et raffinée : DM Sans, Manrope, Inter, ou sans-serif du système. Titres héroïques principaux : 28–44 px (poids 700) ; titres de tuiles : 18–22 px (poids 600) ; corps : 14–15 px ; légendes/balises : 12–13 px. Garder le texte du corps bref et facile à parcourir.

Direction des couleurs

• Mode Sombre (Mat Moderne par Défaut) :
  • Base de la Toile : Ardoise obsidienne profonde (#0B0D10).
  • Arrière-plan des Tuiles : Ardoise surélevée (#15191E).
  • Typographie Principale : Porcelaine nette (#F4F4F6).
  • Texte Secondaire / Atténué : Gris froid équilibré (#9CA3AF — passe WCAG AA 4.5:1).
  • Bordure Fine : Trait blanc translucide (rgba(255, 255, 255, 0.08)).
• Mode Clair (Architecture Propre) :
  • Base de la Toile : Blanc cassé net (#F8F9FA).
  • Arrière-plan des Tuiles : Porcelaine blanche pure (#FFFFFF).
  • Typographie Principale : Encre charbon foncée (#111827).
  • Texte Secondaire / Atténué : Gris ardoise (#6B7280 — passe WCAG AA 4.5:1).
  • Bordure Fine : Trait foncé translucide (rgba(0, 0, 0, 0.08)).
• Accent de Marque : Couleur signature à contraste élevé (par exemple Violet Électrique #8B5CF6, Cyan #06B6D4, ou Émeraude #10B981) répondant au contraste minimum 3:1 contre les remplissages de tuiles sombres et claires.
• Couplage de Thème & Règle Anti-Collision : La toile, les surfaces des tuiles, la typographie et les bordures DOIVENT s'adapter par paires synchronisées. Lors du passage en mode sombre, le texte doit devenir clair ; lors du passage en mode clair, le texte doit devenir foncé. Ne jamais autoriser le texte foncé (#111827) sur des tuiles sombres ou le texte blanc (#FFFFFF) sur des tuiles claires.

Disposition et géométrie

Grille CSS : grid-template-columns: repeat(3, 1fr) ou repeat(4, 1fr) ; espaces : 16px–24px. Rayons de carte : 20px–28px. Toutes les bordures de tuiles doivent s'aligner au ras des pistes de grille horizontales et verticales.

Surfaces, profondeur, texture

• Tuile Bento : Fond solide avec trait fin subtil (1px solid var(--taste-bento-border)) et ombre portée ambiante douce (0 8px 24px rgba(0, 0, 0, 0.12)).
• Interaction au Survol : Surélévation subtile (transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18)).

Anatomie des composants et interaction

• Tuile Héroïque (2x2 ou 2x1) : Proposition de valeur principale, visuel riche ou aperçu de code en direct, CTA proéminent.
• Tuile d'Action Interactive : Bascule intégrée, filtre rapide ou bloc de commande copiable.
• Tuile Métrique / Statut : Nombre tabulaire propre avec étiquette concrète et données réelles.
• Tuile Vitrine : Capture d'écran haute fidélité, aperçu d'actif ou diagramme architectural.

Mouvement

140–220 ms sortie douce lissée. Surélévation de tuile restreinte au survol. Aucune animation concurrente distrayante sur plusieurs tuiles simultanément.

Recette optionnelle Anime.js v4

• Décision de mouvement : Entrée de tuile décalée subtile ou surélévation de survol lissée.
• Durée de départ : 180 ms (0 = immédiat) ; ajuster à la tâche et à la préférence utilisateur.
• Éviter : retournement de tuile, mise à l'échelle erratique, distractions de boucle flottante.
• Dépendance : CSS/natif par défaut. Utiliser Anime.js v4 uniquement si l'interaction demandée le justifie. Suivre references/motion-engine.md du Moteur de Goût quand disponible ; la compétence autonome suit les principes de mouvement réduit et sans boucle décorative ci-dessus.

Rédaction UI et microcopie

Directe, percutante et informative. Exemples : "Déploiement instantané", "Zéro configuration", "Latence de 48 ms". Éviter les mots à la mode vagues comme "Synergie de nouvelle génération".

Jetons de démarrage (suggestions, pas un thème complet)

Jeton	Valeur par défaut mode sombre	Valeur par défaut mode clair
--taste-bento-bg	#0b0d10	#f8f9fa
--taste-bento-surface	#15191e	#ffffff
--taste-bento-text	#f4f4f6	#111827
--taste-bento-text-muted	#9ca3af	#6b7280
--taste-bento-border	1px solid rgba(255, 255, 255, 0.08)	1px solid rgba(0, 0, 0, 0.08)
--taste-bento-radius	24px	24px
--taste-bento-gap	20px	20px
--taste-bento-shadow	0 8px 24px rgba(0, 0, 0, 0.25)	0 8px 24px rgba(0, 0, 0, 0.06)
--taste-bento-accent	#8b5cf6	#7c3aed
--taste-bento-font-body	DM Sans, Manrope, system-ui, sans-serif	DM Sans, Manrope, system-ui, sans-serif
--taste-bento-motion-duration	180ms	180ms

Les jetons représentent une direction et ne sont pas garantis copier-coller pour chaque palette/plateforme. Définir --taste-bento-* au niveau du projet, garantir le contraste des couleurs, et adapter via les jetons de thème plutôt que de disperser des valeurs littérales.

Composition héroïque (première fenêtre complète)

Lorsqu'un portfolio/page d'accueil/landing page public a un héros : utiliser une composition en-tête+héros d'un écran visible. Baser la hauteur sur min-height: 100svh avec un repli 100vh, en soustrayant l'en-tête réel uniquement lorsqu'il est dans le flux normal ; laisser le héros s'étendre pour l'accessibilité et les écrans mobiles courts. Ne pas appliquer ceci aux tableaux de bord privés ou autres écrans de tâche ; les remplacements directs de l'utilisateur l'emportent. Direction spécifique au style : Organiser la section du haut comme une grille bento héroïque où l'histoire principale du produit occupe la tuile 2x2 principale et les preuves à l'appui l'entourent. Ne pas forcer 8 petites cartes dans la première fenêtre simplement pour remplir la hauteur. Voir le routeur references/hero-layout.md quand présent. L'utilisation autonome suit les mêmes principes de réactivité et anti-mauvaise qualité.

Contrôle qualité spécifique au style

• À faire : Vérifier la dominance visuelle claire de la tuile héroïque ; s'assurer que chaque tuile a une disposition interne distincte ; vérifier la réduction de la grille sur mobile ; maintenir un espacement cohérent des gouttières ; vérifier le contraste du changement de mode sombre/clair : s'assurer que la toile, les surfaces des tuiles, la typographie et les bordures changent par paires couplées et passent WCAG AA (au moins 4.5:1).
• À ne pas faire : Ne pas générer de modèles identiques et répétitifs de 3 ou 4 cartes ; éviter l'imbrication de cartes dans les tuiles ; éviter les graphiques miniatures illisibles ou les étiquettes de métriques factices ; ne pas permettre de collisions de thème comme du texte foncé sur des tuiles sombres, du texte blanc sur des tuiles claires, ou des bordures invisibles.
• Confirmer la cohérence bureau et mobile ; le focus clavier visible (:focus-visible) ; les états de chargement, vide, désactivé, erreur et succès ; le comportement de mouvement réduit (prefers-reduced-motion).
• Ne pas injecter d'hypothèses spécifiques au style dans des projets non liés. Lors de la combinaison de styles, nommer explicitement le style principal et les fonctionnalités empruntées.

Porte anti-mauvaise qualité universelle (autonome)

Chaque élément doit mériter sa place. Contenu avant décoration. Ne pas décorer l'incertitude. Ne pas inventer de soldes, métriques, témoignages, utilisateurs, logos, approbation, statut vérifié/en ligne/actif, ou confirmations de succès ; utiliser à la place des états vides/chargement/erreur honnêtes. Les données de démonstration ne sont acceptables que si demandées et clairement étiquetées.

Ne pas ajouter de couches décoratives carte dans une carte : une surface imbriquée doit représenter une limite d'interaction ou d'information distincte. Éviter les grilles 3 fonctionnalités générées automatiquement, les tableaux de bord 4 statistiques, les affirmations héroïques factices, les graphiques sans but, la surcharge de badges/chips/icônes, les illustrations décoratives non liées, et les boucles aléatoires simplement pour remplir la fenêtre. Préférer le regroupement avec la typographie, l'espacement, l'alignement et les séparateurs. Les pairs égaux ont besoin d'un équilibre visuel intentionnel.

Rédaction anti-mauvaise qualité : pas de "Libérez votre potentiel", "Découvrez le futur", "Boostez votre flux de travail", "sans couture" génériques, ou d'équivalents traduits. Les titres doivent communiquer le contenu réel, les CTA doivent nommer l'action, et le texte vide/erreur/succès doit décrire des états réels et les prochaines étapes. Éviter l'urgence factice, les comptes inventés, le battage médiatique vague de l'IA, les emojis gratuits, et les murs de majuscules inaccessibles. Adapter le libellé à ce style et à la langue de l'utilisateur sans changer la vérité.

Intégrité du contraste du thème et du mode : Lorsqu'un utilisateur demande le mode sombre ou clair (ou construit un sélecteur de thème), les couleurs d'arrière-plan et de premier plan DOIVENT basculer par paires synchronisées sur toutes les surfaces, textes, bordures, entrées et badges sémantiques. Ne jamais laisser de texte noir sur fond sombre, de texte blanc sur fond blanc, ou de pastilles de statut illisibles à faible contraste. Tous les états doivent répondre au contraste WCAG AA (minimum 4.5:1 pour le texte normal/corps, 3:1 pour les gros titres et les limites interactives).

Réactif et mouvement : composer délibérément pour mobile, vérifier les longues étiquettes, les états de focus et le contraste accessible ; pas de coupure de texte pour s'adapter à une disposition tendance. Statique par défaut ; utiliser le mouvement pour des interactions significatives, respecter les préférences de mouvement réduit, éviter la décoration rebond/flottante/pulsante sans état réel.

Blocage des résultats critiques/élevés : statut/données fabriqués, actions cassées, contrôles inaccessibles/coupés, texte trompeur, collisions de contraste de thème ou échec mobile significatif doivent être corrigés. Signaler ce qui a été réellement vérifié ; ne pas prétendre avoir effectué des tests qui n'ont pas eu lieu.

Pas un veto esthétique : les couleurs expressives, les ombres, les dégradés, les dispositions de cartes ou les traitements décoratifs sont légitimes lorsqu'ils font partie intentionnelle de l'esthétique sélectionnée et passent les contrôles d'utilisabilité. Ne pas imposer silencieusement le minimalisme.

Anti-mauvaise qualité : spécifique au style

Composition organisée, pas des grilles de cartes générées automatiquement.

• Rejeter : Grilles uniformes de cartes identiques, cartes imbriquées dans des cartes, métriques factices sans unités, icônes de remplacement sans signification claire, tuiles vides ajoutées uniquement pour équilibrer une grille CSS, et collisions de couleurs mode sombre/clair où le texte reste illisible contre la surface de la tuile.
• Au lieu de cela : Concevoir chaque tuile autour de fonctionnalités distinctes réelles ou d'actions utilisateur avec des poids asymétriques et des titres faciles à parcourir.
• Vérification de la copie : Chaque titre de tuile doit communiquer une réelle fonction ou action. Les titres doivent être spécifiques, les sous-titres informatifs. Pas d'espace réservé générique. Adapter le ton à l'audience et au contexte du projet.

Test de régression anti-mauvaise qualité

• La grille est-elle asymétrique (dominance héroïque 2x2/2x1, secondaire, tertiaire) et non une répétition uniforme ?
• Chaque tuile a-t-elle une disposition interne distincte (pas de blocs de code/textes/visuels dupliqués) ?
• L'alignement des gouttières est-il cohérent et les rayons des coins correspondent-ils ?
• La disposition se réduit-elle proprement sur mobile (colonne unique, pas de chevauchement de contenu) ?
• Le mode sombre et le mode clair sont-ils implémentés avec des paires de contraste passant WCAG AA ?
• Y a-t-il des collisions de thème (texte foncé sur fond foncé, clair sur clair) ?
• Le mouvement est-il restreint, sans animation décorative sans interaction utilisateur ?
• Chaque élément a-t-il un but clair ? Aucune tuile décorative sans fonction réelle ?
• Les métriques sont-elles réelles ou étiquetées comme démo ? Pas de données fabriquées ?
• La copie est-elle spécifique et honnête (pas de battage médiatique générique) ?

Tout échec doit arrêter la génération et déclencher une révision de conception. La révision doit suivre ce pack de style et les contraintes du projet.

Considérations d'accessibilité

• Contraste : Vérifier que tous les textes normaux passent 4.5:1 et les grands textes 3:1 (WCAG AA) dans les deux thèmes.
• Navigation au clavier : Tous les éléments interactifs doivent être accessibles et avoir des indicateurs de focus visibles (:focus-visible).
• Mouvement réduit : Respecter prefers-reduced-motion: reduce en désactivant les animations non essentielles.
• Structure sémantique : Utiliser des points de repère HTML appropriés (<header>, <main>, <nav>, <section>) et des niveaux de titres logiques (<h1>-<h6>).
• Texte alternatif : Toutes les images et icônes non décoratives doivent avoir du texte alternatif significatif.
• Redimensionnement du texte : La disposition doit résister au zoom jusqu'à 200% sans perte de contenu ou de fonctionnalité.

Remarques de mise en œuvre

• CSS : Utiliser display: grid avec des propriétés CSS Grid explicites. Éviter flexbox pour la disposition de la grille elle-même (les tuiles individuelles peuvent utiliser flexbox en interne).
• HTML : Utiliser <article> ou <section> pour chaque tuile avec des en-têtes <h2> ou <h3> selon le contexte.
• JavaScript : Garder l'interactivité légère ; préférer le CSS pour le survol et le focus. Utiliser JS pour les bascules, les onglets ou les données dynamiques selon les besoins.
• Performance : Limiter les ombres et les dégradés pour éviter les refusions de peinture. Utiliser will-change: transform avec parcimonie.

Résumé du pack de style Bento Grid

Appliquer ce pack de style uniquement sur sélection explicite. Il fournit une approche structurée pour créer des grilles bento visuellement équilibrées et informatives, avec une emphase sur l'asymétrie, la variété du contenu et la fiabilité hiérarchique. Le guide anti-mauvaise qualité garantit que la mise en œuvre reste intentionnelle et significative, pas une simple collection de cartes.