kennedys0/taste-style-neo-brutalism

N'utilisez cette compétence qu'après qu'un utilisateur ait explicitement choisi ou qu'une configuration de projet confirmée le spécifie. Pour les nouvelles demandes d'UI non expliquées, utilisez un sélecteur de style tel que au lieu de décider du goût de l'utilisateur ici. Les directives de marque existantes, d'accessibilité et les préférences utilisateur prévalent sur tous les exemples ci-dessous. Le guide de style suivant n'est pas une autorisation pour commencer le codage de l'UI avant la sélection du style.

Pack de style : Neo-brutalisme

ID : neo-brutalism
Signature : Couleurs vives et audacieuses, bordures noires à fort contraste, ombres portées dures non floutées et retour tactile mécanique lors des pressions.

Ceci est un pack de style, pas un 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, pas des dépendances obligatoires. Une carte plate avec des coins arrondis et une ombre portée floutée douce n'est pas considérée comme du Neo-brutalisme.

Bonne adéquation / compromis

• Fonctionne bien pour : Outils de création, SaaS B2B ludique, portails développeurs modernes, plateformes de hackathons/événements, sites web de produits indépendants et pages marketing exigeant une personnalité indéniable.
• À utiliser avec précaution pour : Rapports financiers formels ou workflows juridiques d'entreprise, sauf s'ils sont spécifiquement conçus pour un public énergique et non traditionnel.
• Directions de référence :
  • Toile Pop Claire : Base crème croustillante ou papier chaud (#FFFDF7 / #F4F0EA) avec des traits noirs à fort contraste (#121212), des remplissages d'accent électriques (jaune vif #FFDE59, cyan punchy #4DEEEA, corail #FF5E5B), et des ombres portées nettes non floutées (5px 5px 0 #121212).
  • Contraste Pop Sombre : Toile encre profonde (#18181B) avec des bordures blanc vif (2.5px solid #FAFAFA), des accents lime/violet vifs, et des ombres portées blanches/accent (4px 4px 0 #FAFAFA).

Porte de fidélité matérielle néo-brutaliste — obligatoire

Avant de déclarer une page néo-brutaliste terminée, la zone visible initiale doit se lire visiblement comme une composition néo-brutaliste authentique. Si un utilisateur a choisi ce style, une carte générique avec un border-radius subtil et une ombre floutée standard est un ÉCHEC, même si les classes CSS contiennent neo.

Une implémentation néo-brutaliste réussie démontre tous les éléments suivants :

1. Contours solides à fort contraste : Les conteneurs principaux, les boutons actionnables, les champs de saisie et les badges comportent des bordures solides nettes (2px–3px solid #121212). Pas de traits gris subtils fins.
2. Ombres portées dures non floutées : Les surfaces projettent des ombres portées directionnelles nettes, sans flou (4px 4px 0 #121212 pour les contrôles, 6px 6px 0 #121212 à 8px 8px 0 #121212 pour les cartes). Une ombre portée floutée douce est un échec direct.
3. Effondrement mécanique par pression : Lors de :active ou du clic, les boutons interactifs s'enfoncent physiquement le long de l'axe de l'ombre (transform: translate(2px, 2px); box-shadow: 2px 2px 0 #121212;), fournissant un retour tactile mécanique indubitable.
4. Blocs de couleur intentionnels et vibrants : Une palette équilibrée à fort contraste : 1 base de toile + 1 couleur d'encre sombre + 1–2 accents saturés délibérés utilisés pour les actions principales et le regroupement sémantique.
5. Structure typographique asymétrique audacieuse : Typographie grotesque ou géométrique confiante avec des hauteurs de ligne serrées et un contraste clair entre les titres d'affichage massifs et le texte du corps lisible.

Test de la première vue : Dans une capture d'écran de bureau, identifiez les contours noirs épais, les ombres portées dures sans flou et les états de boutons tactiles sans lire le titre de la page. Si cela ressemble à une mise en page SaaS plate standard, révisez les tokens de bordure et d'ombre avant de continuer.

Exception explicite pour les ombres dures néo-brutalistes — les ombres sont autorisées à être nettes

Remplacement spécifique au néo-brutalisme : La mise en garde universelle contre la décoration excessive ou les ombres distrayantes NE DOIT PAS être interprétée comme une interdiction des ombres portées dures ou des contours noirs ici. Ce sont des propriétés habilitantes du matériau, essentielles à la physique néo-brutaliste et à la clarté visuelle.

• Traitements matériels autorisés : Ombres portées dures sans flou (4px 4px 0 #000), bordures noires de 2 à 3 px, rotations de badges (entre -2° et +2° pour les badges uniquement), et pilules de couleur à fort contraste.
• Discipline de contraste des couleurs : Tout texte placé sur des fonds d'accent vibrants (jaune, cyan, lime, corail) doit être testé sur de l'encre noire (#121212) pour dépasser WCAG AA (4,5:1). Le texte blanc pur est strictement réservé aux remplissages d'encre sombre.
• Interprétation anti-désordre : Évaluez les éléments néo-brutalistes par affordance, structure de mise en page et lisibilité, pas en comptant les ombres dures. Supprimer les ombres portées dures pour satisfaire une heuristique générique minimale est une régression de conception.

Typographie et écriture

Sans grotesque expressif et confiant : Space Grotesk, Archivo, Syne, ou sans système. Titres 36–56 px bureau / 28–40 px mobile ; poids 700–800. Texte du corps 15–17 px, poids 400–500 ; hauteur de ligne 1.45–1.55. Les index de section et les métadonnées peuvent utiliser un suivi en majuscules (letter-spacing: 0.05em). Microcopie percutante et humaine sans slogans creux.

Direction des couleurs

• Mode clair (Punchy Pop Light) :
  • Base de la toile : Blanc cassé / crème claire (#FFFDF7 ou #F7F5F0).
  • Arrière-plan de la carte : Blanc pur (#FFFFFF) ou bloc teinté clair.
  • Encre / Trait : Noir jais (#121212).
  • Ombres portées : Noir uni (4px 4px 0 #121212).
• Mode sombre (Dark Pop Contrast) :
  • Base de la toile : Toile encre profonde (#18181B).
  • Arrière-plan de la carte : Charcoal sombre surélevé (#222227) ou ardoise profonde (#27272A).
  • Encre / Trait : Blanc vif / crème (#FAFAFA).
  • Ombres portées : Blanc vif ou accent vif (4px 4px 0 #FAFAFA ou 4px 4px 0 var(--taste-neo-accent-primary)).
• Accent principal : Couleur pop vive (ex. Jaune électrique #FFE600, Corail chaud #FF5757, ou Cobalt royal #3B5BFF).
• Accent secondaire : Contraste complémentaire (ex. Menthe croquante #00F0A8 ou Lilas Pop #D8B4FE).
• Règle de couplage de thème et anti-collision : En mode sombre, les bordures et les ombres portées DOIVENT passer à la lumière/blanc ou aux accents vifs. Laisser des bordures noires et des ombres noires sur une toile sombre entraîne une perte totale de profondeur et de contraste (noir sur noir). Tout texte sur des fonds d'accent vibrants (jaune, cyan, lime, corail) doit être testé sur de l'encre noire (#121212) pour dépasser WCAG AA (4,5:1). Le texte blanc pur est strictement réservé aux remplissages d'encre sombre.

Mise en page et géométrie

Les coins sont carrés ou subtilement arrondis (0px–8px max) ; un remplissage généreux (20px–32px sur les cartes) ; des bordures solides de 2px–3px ; des ombres portées dures de 4px–8px. L'espacement utilise une grille ferme de 8px. La mise en page doit sembler ancrée, percutante et confiante.

Surfaces, profondeur, texture

Les surfaces sont propres, opaques et solides :

• Boutons (Surélevés) : background: var(--taste-neo-accent); border: 2.5px solid #121212; box-shadow: 4px 4px 0 #121212;
• Boutons (Actif/Enfoncé) : transform: translate(2px, 2px); box-shadow: 2px 2px 0 #121212;
• Cartes & Panneaux : background: #FFFFFF; border: 2.5px solid #121212; box-shadow: 6px 6px 0 #121212;
• Champs de saisie : background: #FFFFFF; border: 2.5px solid #121212; box-shadow: 3px 3px 0 #121212; (se resserre au focus).

Anatomie et interaction des composants

• Action principale (CTA) : Pilule/rectangle coloré audacieux avec ombre portée dure, trait épais et enfoncement tactile au clic.
• Action secondaire : Remplissage blanc ou transparent avec bordure noire, effet de survol inversé (background: #121212; color: #FFFFFF;).
• Contrôles de formulaire : Champ de saisie avec contour, étiquette nette, état de focus distinct avec lueur de décalage colorée ou trait approfondi.
• Badges / Tags d'état : Pilule à fort contraste avec trait de 2px, ombre portée subtile de 2px et étiquette courte et concrète.
• Cartes : Lignes de séparation nettes (border-bottom: 2px solid #121212) séparant l'en-tête, le corps et le pied de page d'action de la carte.

Animation

Transitions linéaires nettes ou ease-out de 100 à 160 ms. Déplacement direct de 1 à 2 px lors de la pression. N'utilisez jamais de ressorts longs et rebondissants, de boucles flottantes ou d'oscillations de dessin animé.

Recette optionnelle Anime.js v4

• Décision d'animation : Déplacement court et direct du bouton de 1 à 2 px avec une réponse d'ombre dure correspondante ; n'animez jamais d'ombres géantes.
• Durée de départ : 130 ms (0 = immédiat) ; ajustez à la tâche et à la préférence de l'utilisateur.
• Éviter : rebond et autocollants qui bougent sans fin.
• Dépendance : CSS/natif par défaut. Utilisez Anime.js v4 uniquement si l'interaction demandée le justifie. Suivez references/motion-engine.md du Taste Engine lorsqu'il est disponible ; la compétence autonome suit les principes de mouvement réduit et d'absence de boucle décorative ci-dessus.

Rédaction UI et microcopie

Énergique, simple et direct. Exemples : « Commencer à construire », « Obtenir le code », « Copié dans le presse-papiers ». Évitez le jargon d'entreprise ou les textes de mèmes mignons dans les outils de production.

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

Token	Mode clair par défaut	Mode sombre par défaut
--taste-neo-bg	#fffdf7	#18181b
--taste-neo-card-bg	#ffffff	#222227
--taste-neo-ink	#121212	#fafafa
--taste-neo-border	2.5px solid #121212	2.5px solid #fafafa
--taste-neo-shadow-sm	3px 3px 0 #121212	3px 3px 0 #fafafa
--taste-neo-shadow-md	5px 5px 0 #121212	5px 5px 0 #fafafa
--taste-neo-shadow-lg	8px 8px 0 #121212	8px 8px 0 #fafafa
--taste-neo-accent-primary	#ffe600	#ffe600
--taste-neo-accent-secondary	#ff5757	#ff5757
--taste-neo-radius	6px	6px
--taste-neo-font-body	Space Grotesk, Archivo, system-ui, sans-serif	Space Grotesk, Archivo, system-ui, sans-serif
--taste-neo-motion-duration	130ms	130ms

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

Composition Hero (première zone visible complète)

Lorsqu'un portfolio/une page d'accueil/un site public a un hero : utilisez une composition d'en-tête+hero sur un écran visible. Basez la hauteur sur min-height: 100svh avec recours 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 écrans mobiles courts. N'appliquez pas cela aux tableaux de bord privés ou autres écrans de tâches ; les préférences directes de l'utilisateur l'emportent. Direction spécifique au style : Rendez la zone visible complète énergique grâce à des blocs asymétriques audacieux, une typographie d'affichage bien ancrée et une action principale à fort contraste. Les bordures épaisses et les ombres portées restent intentionnelles ; n'empilez pas d'autocollants, de boîtes supplémentaires avec contour ou d'ornements tournants pour remplir l'écran. 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-désordre.

Contrôle de qualité spécifique au style

• À faire : Vérifier les ombres portées dures non floutées ; maintenir des bordures solides de 2 à 3 px ; tester le déplacement de pression tactile ; vérifier le contraste du texte par rapport aux accents saturés (encre noire sur jaune/cyan/menthe) ; vérifier la commutation mode sombre/clair afin que les bordures, les ombres portées et l'encre s'inversent correctement et ne disparaissent jamais dans des fonds sombres.
• À ne pas faire : N'ajoutez pas de flou ou d'étalement aux ombres néo-brutalistes ; évitez les pastels doux à faible contraste ; ne placez pas de texte blanc pur sur des boutons jaunes ou menthe ; ne laissez pas de bordures/ombres noires sur une toile 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 sans rapport. Lors de la combinaison de styles, nommez explicitement le style principal et les fonctionnalités empruntées.

Porte anti-désordre universelle (autonome)

Chaque élément doit gagner sa place. Le contenu avant la 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 ligne/actif, d'activité fictive ou de confirmations de succès ; utilisez plutôt des états vides/chargement/erreur honnêtes. Les données de démonstration sont acceptables uniquement 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 interaction distincte ou une limite d'information. Évitez les grilles de 3 fonctionnalités générées automatiquement, les tableaux de bord à 4 statistiques, les affirmations hero fictives, 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 la zone visible. 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ésordre : pas de « Libérez votre potentiel », « Vivez le futur », « Boostez votre flux de travail », « transparent » ou équivalents traduits. Les titres doivent communiquer le contenu réel, les CTA doivent nommer l'action, et les textes vides/erreur/succès doivent décrire les états réels et les prochaines étapes. Évitez l'urgence fictive, les nombres inventés, le battage médiatique vague sur l'IA, les emojis gratuits et les murs de majuscules inaccessibles. Adaptez 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 le mode clair (ou construit un sélecteur de thème), les couleurs d'arrière-plan et de premier plan DOIVENT s'inverser 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 de badges d'état 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 grands titres et les limites interactives).

Responsive et animation : composez pour mobile délibérément, 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 les interactions significatives, respectez les préférences de mouvement réduit, évitez la décoration rebondissante/flottante/pulsante sans un état réel.

Blocage d'achèvement des résultats critiques/élevés : le statut/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. Rapportez 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 ...