kennedys0/esthétique-entreprise-données

Utilisez cette compétence uniquement après qu'un utilisateur a explicitement choisi ou qu'une configuration de projet confirmée l'a spécifiée. Pour les nouvelles demandes d'UI non expliquées, utilisez un sélecteur de style tel que style: <sélection> au lieu de décider du goût de l'utilisateur ici. Les overrides de marque, d'accessibilité et d'utilisateur existants priment sur tous les exemples ci-dessous. Le guide de style suivant n'est pas une autorisation pour commencer le codage UI avant la sélection du style.

Pack de style : Entreprise / Axé données

ID : enterprise
Signature : Cockpits opérationnels denses en informations, alignement des données tabulaires, indicateurs d'état sémantiques, productivité au clavier et architecture de workflow fiable.

Ceci est un pack de style, pas une valeur par défaut obligatoire. Ne le chargez qu'après une sélection explicite ou un style de projet applicable confirmé. Les instructions du projet peuvent remplacer les choix individuels. Préservez l'accessibilité, l'utilité et les contraintes de marque. Les polices sont des suggestions, pas des dépendances requises. Un modèle de carte client avec 3 faux chiffres KPI et un diagramme circulaire décoratif ne se qualifie pas comme Entreprise Axé données.

Bonnes adéquations / Compromis

• Fonctionne bien pour : Plateformes B2B SaaS, consoles d'administration opérationnelles, moniteurs d'infrastructure cloud, portails fintech et de trading, backends logistiques et de chaîne d'approvisionnement, et outils de productivité intensifs en données.
• Soyez prudent avec : Pages d'atterrissage marketing grand public où le rythme narratif et l'image de marque visuelle émotionnelle priment sur le balayage tabulaire dense.
• Directions de référence :
  • Console Cloud Moderne (style Linear / Stripe / Vercel) : Fondation ardoise-neutre nette (#0F1117 foncé ou #F9FAFB clair), lignes de tableau compactes de 36px, chiffres tabulaires (font-variant-numeric: tabular-nums), séparateurs fins discrets (#E5E7EB ou #262933), et indicateurs d'état sémantiques.
  • Poste de travail à haute densité : Poste de travail blanc propre avec lignes compactes de 32px, barres de filtre de recherche avec raccourcis clavier (⌘K), en-têtes de tableau fixes, et volets maître-détail responsives.

Porte de qualité des données d'entreprise — obligatoire

Avant de déclarer une page d'entreprise complète, le viewport d'ouverture doit se lire visiblement comme un cockpit de données fonctionnel, dense et professionnel. Si un utilisateur a choisi ce style, un modèle client surdimensionné comportant des cartes métriques décoratives et zéro structure tabulaire scannable est un ÉCHEC direct.

Une implémentation réussie d'entreprise axée données démontre tous les éléments suivants :

1. Architecture tabulaire dense en informations : Les enregistrements et entités principaux sont présentés dans des tableaux de données structurés et scannables ou des listes maître-détail compactes avec des hauteurs de ligne cohérentes (32px–40px) et des en-têtes de colonne explicites.
2. Chiffres tabulaires et alignement à droite : Tous les nombres, montants financiers, métriques et horodatages imposent font-variant-numeric: tabular-nums. Les colonnes numériques s'alignent strictement à droite ; les colonnes de texte s'alignent à gauche.
3. Indicateurs d'état sémantiques avec contraste lisible : Les indicateurs d'état (Sain, Dégradé, Échoué, En attente) utilisent des pastilles sémantiques calibrées avec un texte foncé accessible sur des fonds teintés doux (ex. Succès : fond #ECFDF5 avec texte #065F46, passant WCAG AA 4.5:1).
4. Fonctionnalités de productivité et raccourcis : Les barres de recherche comportent des indices de déclenchement clavier (⌘K ou /), les en-têtes de tableau comportent des indicateurs de tri (▲/▼), et les barres d'action par lots apparaissent lors de la sélection d'enregistrements.
5. État complet véridique : Les tableaux incluent de vraies barres de pagination (affichant Affichage de 1 à 25 sur 1 420 éléments), une gestion responsive du défilement horizontal, et des états vides/chargement/erreur dédiés.

Test du premier viewport : Dans une capture d'écran de bureau, identifiez le tableau de données dense, les en-têtes triables, la barre de filtre et les chiffres tabulaires sans lire le titre de la page. Si cela ressemble à une page marketing grand public avec de grandes cartes vides, reconstruisez-la en une vue opérationnelle fonctionnelle.

Exception explicite de densité entreprise — les tableaux de données sont requis

Override spécifique à l'entreprise : La mise en garde universelle anti-déchets contre l'encombrement des tableaux de bord ou les multiples boîtes métriques NE DOIT PAS être interprétée comme une obligation de masquer les tableaux de données, les barres d'outils de filtre ou les indicateurs d'état ici. Dans les logiciels d'entreprise authentiques (Stripe, Datadog, AWS, Bloomberg), les données denses et scannables sont l'exigence d'interface principale.

• Traitements d'entreprise autorisés : Tableaux de données compacts (lignes 32px–40px), grilles de métadonnées multi-colonnes, barres d'outils de filtre, barres de recherche avec badges de raccourcis clavier, barres d'action par lots, et pastilles d'état sémantiques.
• Limite anti-déchets : N'inventez jamais de métriques de revenus fictives, de mini-sparklines décoratives sans échelles d'axe, ou de diagrammes circulaires animés qui ne transmettent aucune donnée opérationnelle. Les champs de données réels, les états vides et les indicateurs d'état réels sont obligatoires.
• Interprétation anti-déchets : Évaluez les mises en page d'entreprise par scannabilité, densité d'informations et efficacité des tâches, et non en essayant de supprimer les contrôles opérationnels nécessaires. La densité tabulaire qui accélère le travail est un design authentique.

Typographie et style d'écriture

Sans UI neutre, hautement lisible : Inter, Source Sans 3, SF Pro, ou sans système. Monospace pour les identifiants et les hachages : JetBrains Mono ou monospace système. Corps et cellules de tableau : 13–14 px (hauteur de ligne 1.45) ; en-têtes de colonne : 12 px en majuscules (poids 600, suivi 0.05em) ; métriques : 20–28 px avec chiffres tabulaires.

Direction des couleurs

• Mode clair (Console Cloud Moderne) :
  • Base du canevas : Ardoise neutre douce (#F9FAFB).
  • Surface / Tableau : Blanc pur (#FFFFFF).
  • Encre primaire / Typographie : Ardoise foncée (#111827).
  • Texte secondaire / atténué : Ardoise équilibrée (#6B7280).
  • Bordures fines : #E5E7EB.
  • Surbrillance de ligne au survol : #F8FAFC.
• Mode foncé (Cockpit Cloud) :
  • Base du canevas : Ardoise foncée (#0F1117).
  • Surface / Tableau : Charbon élevé (#161922).
  • Encre primaire / Typographie : Ardoise nette (#F9FAFB).
  • Texte secondaire / atténué : Gris équilibré (#9CA3AF).
  • Bordures fines : #232733.
  • Surbrillance de ligne au survol : #1F2430.
• Marque primaire : Bleu entreprise foncé (#2563EB clair / #3B82F6 foncé).
• Indicateurs d'état sémantiques (Calibrés WCAG AA pour les deux modes) :
  • Succès (Sain) : Clair : #065F46 sur #ECFDF5 (bordure #A7F3D0) ; Foncé : #34D399 sur rgba(16, 185, 129, 0.15) (bordure rgba(16, 185, 129, 0.35)).
  • Avertissement (Dégradé) : Clair : #92400E sur #FEF3C7 (bordure #FDE68A) ; Foncé : #FBBF24 sur rgba(245, 158, 11, 0.15) (bordure rgba(245, 158, 11, 0.35)).
  • Erreur (Échoué) : Clair : #991B1B sur #FEE2E2 (bordure #FECACA) ; Foncé : #F87171 sur rgba(239, 68, 68, 0.15) (bordure rgba(239, 68, 68, 0.35)).
  • Neutre (En attente / Inactif) : Clair : #374151 sur #F3F4F6 (bordure #E5E7EB) ; Foncé : #9CA3AF sur rgba(156, 163, 175, 0.12) (bordure rgba(156, 163, 175, 0.25)).
• Règle de couplage de thème : Le canevas, les tableaux, l'encre du texte et les badges sémantiques DOIVENT s'adapter ensemble. N'affichez jamais de texte en mode foncé sur des tableaux clairs ou du texte vert foncé en mode clair sur des arrière-plans de console foncés.

Mise en page et géométrie

Rythme de base de 4px avec incréments de densité de 8/12/16px ; coins subtils de rayon 4px–6px ; hauteurs de ligne de tableau cohérentes (36px par défaut, 32px compact). Les mises en page maître-détail se divisent flexiblement sur le bureau et s'empilent proprement sur mobile.

Surfaces, profondeur, texture

Les surfaces sont propres, plates et basées sur les bordures. Les ombres de profondeur sont réservées strictement aux menus flottants, infobulles et fenêtres modales (0 4px 12px rgba(0, 0, 0, 0.08)). Pas d'effets décoratifs de verre ou d'argile sur les grilles de données.

Anatomie des composants et interactions

• Tableau de données : Ligne d'en-tête fixe, surbrillance de ligne alternée ou au survol (#F8FAFC), colonnes numériques alignées à droite, texte aligné à gauche.
• Barre de filtre et de recherche : Champ de recherche intégré avec badge ⌘K, menus déroulants de filtre multi-sélection, et sélecteur de plage de dates.
• Badge d'état sémantique : Pastille ronde compacte avec point indicateur coloré et texte accessible.
• Pied de page de pagination : Plage de page actuelle, sélecteur d'éléments par page, et boutons suivant/précédent.

Animation

Transitions de feedback linéaires minimales de 100 à 140 ms. Priorisez une stabilité à toute épreuve et zéro mouvement pendant l'actualisation des données ou le filtrage de tableau.

Recette optionnelle Anime.js v4

• Décision de mouvement : Surbrillance subtile de ligne flash lors de la mise à jour des données ou transition de tiroir coulissant.
• Durée de départ : 120ms (0 = immédiat) ; ajustez à la tâche et à la préférence de l'utilisateur.
• Évitez : transitions de page décoratives, graphiques rebondissants, chargeurs rotatifs sur des requêtes rapides.
• Dépendance : CSS/natif par défaut. Suivez references/motion-engine.md du Moteur de Goût lorsqu'il est disponible ; la compétence autonome suit les principes de mouvement réduit et sans boucle décorative ci-dessus.

Rédaction UI et microcopie

Objectif, précis et orienté vérification. Exemples : « 1 420 enregistrements trouvés », « Filtrer par état », « Exporter CSV », « Dernière mise à jour il y a 2 minutes ». Évitez les slogans vagues de l'IA conversationnelle.

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

Jeton	Valeur par défaut mode clair	Valeur par défaut mode foncé
--taste-ent-bg	#f9fafb	#0f1117
--taste-ent-surface	#ffffff	#161922
--taste-ent-ink	#111827	#f9fafb
--taste-ent-muted	#6b7280	#9ca3af
--taste-ent-border	1px solid #e5e7eb	1px solid #232733
--taste-ent-radius	6px	6px
--taste-ent-row-height	36px	36px
--taste-ent-accent	#2563eb	#3b82f6
--taste-ent-font-body	Inter, -apple-system, system-ui, sans-serif	Inter, -apple-system, system-ui, sans-serif
--taste-ent-motion-duration	100ms	100ms

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

Composition héros (premier viewport complet)

Lorsqu'un portfolio/page d'accueil/landing public a un héros : utilisez une composition en-tête+héros d'un seul écran visible. Basez 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 ; laissez le héros s'agrandir pour l'accessibilité et les petits écrans mobiles. N'appliquez pas ceci aux tableaux de bord privés ou autres écrans de tâche ; les overrides directs de l'utilisateur priment. Direction spécifique au style : Ancrez la vue d'ouverture avec un résumé de cockpit fonctionnel : barre de filtre clé, aperçu des données en direct, et une action opérationnelle immédiate. Évitez l'inflation de cartes grand public et les espaces vides. Voir le routeur references/hero-layout.md lorsqu'il est présent. L'utilisation autonome suit les mêmes principes responsives et anti-déchets.

Porte de qualité spécifique au style

• À faire : Vérifiez les chiffres tabulaires (tabular-nums) et l'alignement à droite sur les données numériques ; assurez-vous que les badges sémantiques respectent le contraste WCAG AA dans les deux modes clair et foncé ; fournissez des barres de pagination et de filtre de recherche complètes ; testez les en-têtes de tableau fixes ; vérifiez le basculement mode foncé/clair pour que toutes les lignes, bordures et textes basculent par paires synchronisées.
• À ne pas faire : Ne remplacez pas les tableaux de données par des grilles de cartes grand public ; évitez les sparklines décoratives non mises à l'échelle ; n'inventez pas de chiffres métriques fictifs sans équivalent backend ; évitez les collisions de contraste de thème telles que du texte vert foncé sur des fonds foncés ou du texte foncé sur des lignes de tableau foncées.
• Confirmez 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).
• N'injectez pas d'hypothèses spécifiques au style dans des projets non liés. Lors de la combinaison de styles, nommez explicitement le style principal et les fonctionnalités empruntées.

Porte anti-déchets universelle (auto-contenue)

Chaque élément doit gagner sa place. Le contenu avant la décoration. Ne décorez pas l'incertitude. N'inventez pas de soldes, métriques, témoignages, utilisateurs, logos, approbation, état vérifié/en direct/en ligne, activité fictive ou confirmations de succès ; utilisez des états vides/chargement/erreur honnêtes à la place. Les données de démonstration ne sont acceptables que si elles sont demandées et clairement étiquetées.

N'ajoutez pas de couches décoratives carte-dans-carte : une surface imbriquée doit représenter une frontière d'interaction ou d'information distincte. Évitez les grilles à 3 fonctionnalités générées automatiquement, les tableaux de bord à 4 statistiques, les affirmations héros fictives, les graphiques sans but, le spam de badges/chips/icônes, les illustrations décoratives non liées et les boucles aléatoires juste pour remplir le viewport. Préférez 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-déchets : pas de « Libérez votre potentiel », « Vivez le futur », « Optimisez votre flux de travail », affirmations « sans couture » ou équivalents traduits génériques. Les titres doivent communiquer le contenu réel, les CTA doivent nommer l'action, et le texte vide/erreur/succès doit décrire les états réels et les prochaines étapes. Évitez l'urgence fictive, les décomptes inventés, le battage médiatique vague de l'IA, les emojis superflus et les murs inaccessibles en majuscules. Adaptez le libellé à ce style et à la langue de l'utilisateur sans changer la vérité.

Intégrité des contrastes de thème et de mode : Lorsqu'un utilisateur demande le mode foncé ou le mode 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 laissez jamais de texte noir sur fond foncé, de texte blanc sur fond blanc ou de pastilles d'état à faible contraste illisibles. Tous les états doivent respecter le contraste WCAG AA (minimum 4.5:1 pour le corps/texte normal, 3:1 pour les grands titres et les limites interactives).

Responsive et mouvement : composez délibérément pour le mobile, vérifiez les longues étiquettes, les états de focus et le contraste accessible ; pas de coupure de texte pour s'adapter à une mise en page tendance. Statique par défaut ; utilisez le mouvement pour les interactions significatives, respectez les préférences de mouvement réduit, évitez la décoration rebondissante/flottante/pulsante sans état réel.

Bloc de complétion des constatations critiques/élevées : l'état/les données fabriqués, les actions cassées, les contrôles inaccessibles/coupés, la copie trompeuse, les collisions de contraste de thème ou les défaillances mobiles importantes DOIVENT être corrigés. Signalez ce qui a été réellement vérifié ; ne prétendez pas 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 mises en page de cartes ou les traitements décoratifs sont légitimes lorsqu'ils sont des parties intentionnelles de l'esthétique sélectionnée et passent les contrôles d'utilisabilité. Ne supprimez pas des décisions de marque intentionnelles au nom de l'anti-déchets. Le test décisif est l'honnêteté, l'accessibilité et la fonction. Les ornements intentionnels qui respectent les principes ci-dessus sont les bienvenus.