kennedys0/taste-style-brutalism

Utilisez cette compétence uniquement après qu’un utilisateur l’a explicitement choisie ou qu’une configuration de projet confirmée la spécifie. Pour les nouvelles demandes d’interface utilisateur non expliquées, utilisez un sélecteur de style tel que [STYLE_SELECTOR] au lieu de décider du goût de l’utilisateur ici. Les directives existantes de marque, d’accessibilité et les overrides utilisateur prévalent sur tous les exemples ci-dessous. Ce guide de style n’autorise pas à commencer le codage de l’IU avant la sélection du style.

Pack de style : Brutalisme

Identifiant : brutalism Signature : Honnêteté structurelle brute, échafaudage de mise en page exposé, contraste monochrome sans compromis et camouflage décoratif nul.

Ceci est un pack de style, non une valeur par défaut obligatoire. Chargez-le uniquement 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, non des dépendances obligatoires. Une mise en page chaotique et brisée avec des tailles de police arbitraires ne constitue pas un Brutalisme architectural.

Bonne adéquation / compromis

• Fonctionne bien pour : Portfolios avant-gardistes, plateformes activistes, archives architecturales, publications indépendantes, institutions artistiques/culturelles et outils de développement recherchant une authenticité structurelle sans compromis.
• Attention avec : Applications grand public conventionnelles où la familiarité décorative et une esthétique douce réduisent l’hésitation initiale de l’utilisateur.
• Directions de référence :
  • Béton Brut architectural : Gris béton brut (#E8E8E8 à #DCDCDC), lignes noires pures et austères (#000000), division de grille structurelle exposée et métadonnées architecturales monospace.
  • Échafaudage monochrome austère : Fond blanc pur (#FFFFFF) avec bordures noires épaisses (2.5px solid #000000), actions en blocs noirs austères et aucune ornementation cosmétique.

Portail de fidélité matérielle Brutaliste — obligatoire

Avant de déclarer une page Brutaliste terminée, le viewport d’ouverture doit visiblement se lire comme une composition structurelle brute et honnête. Si un utilisateur a choisi ce style, un site générique qui applique simplement des défauts non stylisés ou un texte superposé chaotique est un ÉCHEC.

Une mise en œuvre Brutaliste réussie démontre tous les éléments suivants :

1. Échafaudage structurel exposé : Les lignes de grille, les séparateurs de sections et les conteneurs de contenu sont formés par des bordures noires pleines visibles (2px–3px solid #000000), célébrant le squelette structurel de la page web.
2. Zéro camouflage cosmétique : Absolument aucune ombre portée floutée et douce, aucun reflet brillant, aucun coin de bulle arrondi et aucun flou de verre translucide. Les surfaces sont planes, opaques et sans excuse directe.
3. Alignement hyper-discipliné : Malgré son honnêteté matérielle brute, l’alignement est d’une netteté parfaite. Les colonnes, les bordures et les lignes s’emboîtent de manière transparente sans aucune dérive erratique.
4. Palette de contraste élevé austère : Contraste monochrome noir-sur-blanc ou noir-sur-béton sans compromis satisfaisant au WCAG AAA (7:1+). La couleur n’est utilisée que comme signal d’alerte opérationnel (rouge pur #FF0000 ou jaune d’avertissement brut #FFD700).
5. Transitions d’état interactif immédiates : Les boutons et les éléments interactifs basculent instantanément au :hover et :active (par exemple, inversion immédiate des couleurs du noir-sur-blanc au blanc-sur-noir) sans easing retardé ni physique de ressort artificielle.

Test du premier viewport : Dans une capture d’écran de bureau, identifiez la grille structurelle des bordures exposées, les plans plats non ornementés et l’autorité monochrome austère sans lire le titre de la page. Si elle contient des cartes arrondies ou des ombres douces, retirez immédiatement le camouflage décoratif.

Exception structurelle Brutaliste explicite — les bordures de grille exposées sont requises

Override propre au Brutalisme : La mise en garde universelle anti-slop contre les bordures excessives ou le contraste agressif NE DOIT PAS être interprétée comme une interdiction des lignes de division noires épaisses (2px–3px solid) ou des échafaudages structurels exposés ici. Dans le Brutalisme architectural, les joints structurels et les matériaux honnêtes sont célébrés, non cachés derrière une peinture cosmétique.

• Traitements structurels autorisés : Bordures structurelles visibles de 2px–3px, conteneurs rectangulaires bruts, métadonnées monospace à contraste élevé et états d’inversion de couleur immédiats.
• Limite anti-slop : Ne brisez pas délibérément l’accessibilité en superposant des paragraphes corporels, en utilisant des couleurs de clash néon illisibles ou en rendant les boutons impossibles à localiser. Le Brutalisme authentique est hyper-fonctionnel, non aléatoirement cassé.
• Interprétation anti-slop : Évaluez les mises en page Brutalistes en fonction de l’intégrité structurelle, de l’utilité fonctionnelle et de la lisibilité, non en essayant d’adoucir les bords durs. Supprimer les bordures structurelles pour satisfaire une heuristique douce générique est une régression de conception.

Typographie et dactylographie

Grotesk lourds et inflexibles ou monospace techniques : Arial, Helvetica, IBM Plex Sans, IBM Plex Mono ou système sans. Titres : 44–72 px bureau / 30–44 px mobile (poids 800–900, interlignage serré 1.05–1.15). Corps de texte : 16–18 px (poids 400, interlignage 1.5). Monospace pour les métadonnées, les horodatages et les index de sections.

Direction des couleurs

• Mode clair (Papier austère) :
  • Base du canevas : Blanc papier austère (#FFFFFF) ou béton architectural (#E5E5E5).
  • Encre / bordures structurelles : Noir pur (#000000).
  • Blocs de surface : Remplissages solides à contraste élevé (#000000 ou #FFFFFF).
• Mode sombre (Inversé profond) :
  • Base du canevas : Noir profond austère (#000000).
  • Encre / bordures structurelles : Blanc pur austère (#FFFFFF).
  • Blocs de surface : Remplissages sombres solides à contraste élevé (#000000 ou #121212).
• Accent de signal opérationnel (Couleur unique uniquement) : Rouge de signal (#FF0000 / #FF3333) ou Ambre d’avertissement (#FFCC00).
• Règle d’inversion de thème : Dans le Brutalisme, le mode sombre/clair est un basculement de polarité autoritaire. En mode sombre, le canevas est #000000 et le texte/les bordures sont #FFFFFF. Les boutons s’inversent proprement au survol (clair : le bouton blanc bascule en remplissage noir + texte blanc ; sombre : le bouton noir bascule en remplissage blanc + texte noir). Le texte noir sur fond noir ou le texte blanc sur fond blanc est strictement interdit.

Mise en page et géométrie

Les coins sont strictement carrés (border-radius: 0px). Bordures structurelles : 2px–3px solid #000000. Les blocs de contenu se verrouillent les uns contre les autres ou maintiennent des écarts modulaires fermes de 16px/24px.

Surfaces, profondeur, texture

Les surfaces sont 100% planes, opaques et structurelles. Zéro ombre. Zéro dégradé. La profondeur est établie uniquement par la superposition de blocs noirs sur des cadres blancs et l’inversion immédiate des couleurs de premier plan et d’arrière-plan.

Anatomie des composants et interaction

• Bouton Brutaliste : Bordure noire épaisse (2px solid #000000), fond blanc, texte en gras en majuscules ; au survol/actif, s’inverse immédiatement en fond noir solide et texte blanc.
• Panneau structurel : Conteneur rectangulaire avec bordures hautes/basses épaisses ; séparateurs entre les sections internes.
• Étiquette de métadonnées : Étiquette monospace enfermée entre crochets : [DOC_REF: 4092].
• Contrôles de formulaire : Champs de saisie sans ornement avec bordure noire épaisse et anneau de focus noir solide à contraste élevé (outline: 3px solid #000000; outline-offset: 2px;).

Animation

Basculements d’état immédiats par défaut (0 ms) ou transitions linéaires très brèves (60–100 ms). Pas de rebond, pas de courbes d’easing, pas de parallaxe, pas de transitions décoratives.

Recette optionnelle Anime.js v4

• Décision d’animation : Basculements d’état immédiats par défaut ; Anime.js est généralement inutile pour un Brutalisme authentique.
• Durée de départ : 0 ms (immédiat) ; ajuster uniquement si un volet coulissant mécanique fonctionnel spécifique est demandé.
• À éviter : ressorts, dévoilements glissants, animations de défilement théâtral.
• Dépendance : CSS/natif par défaut. Suivre references/motion-engine.md du Taste Engine lorsqu’il est disponible ; la compétence autonome suit les principes de mouvement réduit et sans boucle décorative ci-dessus.

Rédaction de l’IU et microcopie

Directe, sans excuse et factuelle. Exemples : « INDEX », « TÉLÉCHARGER SPÉCIFICATION », « ERREUR TERMINAL : CONNEXION PERDUE », « CONFIRMER ». Évitez la copie conversationnelle familière ou le blabla marketing persuasif.

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

Jeton	Valeur par défaut mode clair	Valeur par défaut mode sombre
--taste-brutal-bg	#ffffff	#000000
--taste-brutal-ink	#000000	#ffffff
--taste-brutal-surface	#ffffff	#121212
--taste-brutal-border	2.5px solid #000000	2.5px solid #ffffff
--taste-brutal-radius	0px	0px
--taste-brutal-signal	#ff0000	#ff3333
--taste-brutal-font-heading	'Arial Black', Arial, Helvetica, sans-serif	'Arial Black', Arial, Helvetica, sans-serif
--taste-brutal-font-body	Arial, Helvetica, sans-serif	Arial, Helvetica, sans-serif
--taste-brutal-font-mono	'IBM Plex Mono', monospace	'IBM Plex Mono', monospace
--taste-brutal-motion-duration	0ms	0ms

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

Composition Hero (premier viewport complet)

Lorsqu’un portfolio/atterrissage/page d’accueil public a un hero : utilisez une composition d’en-tête+hero d’un écran visible. Basez la hauteur sur min-height: 100svh avec une solution de repli 100vh, en soustrayant l’en-tête réel uniquement lorsqu’il est dans le flux normal ; laissez le hero s’étendre pour l’accessibilité et les petits écrans mobiles. Ne l’appliquez pas aux tableaux de bord privés ou autres écrans de tâches ; les overrides directs de l’utilisateur gagnent. Direction spécifique au style : Construisez le premier viewport comme un monolithe architectural sans excuse : titre d’affichage massif enfermé dans un échafaudage structurel, blocs d’appel à l’action noirs austères et zéro remplissage cosmétique. Voir le routeur references/hero-layout.md lorsqu’il est présent. L’utilisation autonome suit les mêmes principes de réactivité et anti-slop.

Portail qualité propre au style

• À faire : Vérifier le contraste monochrome austère ; s’assurer que les bordures structurelles de 2 à 3 px sont pleines ; vérifier les coins carrés nets de 0 px ; vérifier l’inversion de polarité du mode sombre/clair afin que le texte et l’arrière-plan ne se heurtent jamais (pas de noir-sur-noir ou blanc-sur-blanc) ; s’assurer que l’accent de signal reste strictement singulier.
• À ne pas faire : N’ajoutez pas de coins arrondis, d’ombres portées douces ou de dégradés de couleurs lisses ; évitez les badges de remplissage décoratifs ou le texte marketing familier ; ne laissez pas d’encre noire ou de bordures lors du passage au canevas sombre.
• 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).
• N’injectez pas d’hypothèses spécifiques au style dans des projets non apparentés. Lors de la combinaison de styles, nommez explicitement le style principal et les fonctionnalités empruntées.

Portail anti-slop universel (autonome)

Chaque élément doit mériter sa place. Contenu avant décoration. Ne décorez pas l’incertitude. N’inventez pas de soldes, de métriques, de témoignages, d’utilisateurs, de logos, d’approbation, de statut vérifié/en direct/en ligne, d’activité factice ou de 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 étiquetées visiblement.

N’ajoutez pas de couches décoratives carte-dans-carte : une surface imbriquée doit représenter une interaction distincte ou une limite d’information. Évitez les grilles à 3 fonctionnalités générées automatiquement, les tableaux de bord à 4 statistiques, les affirmations de hero factices, les graphiques sans but, les spams de badges/chips/icônes, les illustrations décoratives sans rapport et les boucles aléatoires simplement 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-slop : pas de « Libérez votre potentiel », « Vivez le futur », « Superchargez votre workflow », affirmations « transparentes » génériques ou é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 les états réels et les prochaines étapes. Évitez l’urgence factice, les comptes inventés, le battage médiatique vague de l’IA, les émojis gratuits et les murs en majuscules inaccessibles. Adaptez le libellé à ce style et à la langue de l’utilisateur sans changer la vérité.

Intégrité du contraste de thème et de mode : Lorsqu’un utilisateur demande le mode sombre 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, le texte, les bordures, les entrées et les badges sémantiques. Ne laissez jamais de texte noir sur fond sombre, de texte blanc sur fond blanc ou des pastilles de statut illisibles à faible contraste. Tous les états doivent satisfaire au contraste WCAG AA (minimum 4.5:1 pour le texte corporel/normal, 3:1 pour les grands titres et les limites interactives).

Réactivité et animation : composition délibérée pour mobile, vérifiez les étiquettes longues, 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 l’animation pour des interactions significatives, respectez les préférences de mouvement réduit, évitez le rebond/flottement/pulsation décoratif sans état réel.

Achèvement du bloc de résultats critique/élevé : les statuts/données fabriqués, les actions cassées, les contrôles inaccessibles/coupés, le texte trompeur, les collisions de contraste de thème ou l’échec mobile significatif doivent être corrigés. Signalez ce qui a été réellement vérifié ; ne revendiquez pas des tests qui n’ont pas été exécutés.

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 réussissent les vérifications d’utilisabilité. N’imposez pas silencieusement le minimalisme.

Anti-slop : spécifique au style

Honnêteté structurelle, non jeu esthétique.

• Rejeter : Formes de pilules arrondies, accents pastel, flous d’ombre décoratifs, illustrations ludiques, cartes de modèle génériques et collisions de thème (comme du texte noir restant sur un canevas Brutaliste sombre).
• À la place : Exposez les grilles de mise en page avec des bordures structurelles épaisses, une hiérarchie typographique austère, des basculements d’état immédiats et un contraste sans ambiguïté.
• Vérification du texte : La rédaction de l’IU doit être brève, directe et fonctionnelle sans jargon marketing.
• Audit : Exécutez les vérifications universelles anti-slop de but, de vérité, de surface imbriquée, de rédaction, de réactivité, d’accessibilité et d’animation en plus du portail qualité de ce style. Ne pénalisez pas les fonctionnalités délibérées et accessibles.