Typographie
Matériaux du navigateur
Polices système, liens franchement soulignés et contrôles proches de leur rendu natif restent visibles.
SkillCodexOuvrir les favoris et l’historique
Mesure d'audience
Avec ton accord, Google Analytics mesure l'usage du site pour nous aider à l'améliorer. Ton choix est mémorisé sur cet appareil et reste modifiable via « Cookies » en pied de page.
Label contesté
Une page dense qui laisse visibles les matériaux par défaut du navigateur.
Aussi appelé : brutalist web design, raw web
Définition et périmètre
Le Web Brutalism strict traite la structure HTML, les liens soulignés, la typographie système et les bordures simples comme une finition. Sa force vient de la franchise, de la vitesse et de la priorité donnée au document.
Périmètre : Le label reste contesté. Ici, il décrit l’usage volontaire de matériaux web bruts. Le style graphique à couleurs saturées, contours épais et ombres dures est classé comme Neobrutalism.
Les quatre signaux distinctifs doivent rester visibles sans dépendre du nom du style.
Typographie
Polices système, liens franchement soulignés et contrôles proches de leur rendu natif restent visibles.
Composition
Titres, listes, tableaux et séparateurs portent directement la mise en page.
Profondeur
Pas d’ombre floue, de gradient décoratif, de faux matériau ou de volume simulé.
Composition
L’information reste compacte et immédiatement navigable, sans espace théâtral.
Différence décisive avec le voisin le plus proche
Comprendre → Reconnaître → Choisir → Comparer
Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.
implementation
# Implémenter Web Brutalism dans ton agent ## Objectif Crée une page en Web Brutalism strict avec HTML sémantique, typographie système, liens soulignés et structure documentaire visible. Garde le CSS minimal et retire ombres, gradients, rayons décoratifs et fausses matières. ## Prérequis - Inspecte les composants, tokens et contraintes de marque existants. - Confirme que ce style convient à la surface et au contenu. - Préserve la structure, la sémantique et les interactions existantes. ## Comportement et surfaces - Matériaux du navigateur — Polices système, liens franchement soulignés et contrôles proches de leur rendu natif restent visibles. - Structure documentaire — Titres, listes, tableaux et séparateurs portent directement la mise en page. - Aucun rendu décoratif — Pas d’ombre floue, de gradient décoratif, de faux matériau ou de volume simulé. - Densité utile — L’information reste compacte et immédiatement navigable, sans espace théâtral. ## États - Couvre les états par défaut, survol, focus, actif, désactivé, chargement et erreur qui existent déjà. - Fournis un état statique lorsque la réduction de mouvement est demandée. ## Accessibilité - Conserver les soulignements, les états visités et les contours de focus des liens. - Maintenir des tailles de texte et des cibles tactiles lisibles malgré la densité. - Utiliser de vrais titres, listes et en-têtes de tableau pour refléter la structure visible. ## Quand ne pas utiliser - Casser volontairement l’accessibilité pour donner une impression de page ancienne. - Ajouter couleurs criardes, bordures épaisses et ombres décalées, ce qui bascule vers le Neobrutalism. ## Critères d’acceptation - Un document, un index ou une archive où vitesse et densité priment sur l’habillage. - Une identité qui revendique les matériaux natifs du web et une structure transparente. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
À essayer ensuite
# Auditer Web Brutalism sur la surface réelle ## Objectif Contrôle que Web Brutalism reste cohérent, accessible et mesuré sur les composants réellement concernés. ## Contrôles - Compare les états interactifs et les fallbacks. - Contrôle contraste, focus et réduction de mouvement. - Signale les effets visuels qui dégradent la hiérarchie ou les performances. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
sha256:bbb77aeaafe26e678c1c5b40954b7611f6b3c16a511691d020c505a63f44372d
debugging
# Déboguer Web Brutalism dans ton agent ## Symptôme observé [DÉCRIS ICI LE SYMPTÔME] ## Contrôles observables - Compare la surface aux signaux visuels documentés. - Vérifie contraste, focus, réduction de mouvement et fallback. - Isole la couche visuelle sans modifier la structure fonctionnelle. ## Causes possibles - Le style masque la hiérarchie ou réduit le contraste. - L’effet est appliqué à trop de surfaces ou dépend d’une API absente. - Un état interactif n’est plus perceptible. ## Corrections bornées Répare cette page en restaurant la lisibilité, les tailles de cible, les titres hiérarchiques et les en-têtes de tableau. La brutalité visuelle ne justifie ni une structure cassée ni des contrôles ambigus. ## Vérification finale - Conserver les soulignements, les états visités et les contours de focus des liens. - Maintenir des tailles de texte et des cibles tactiles lisibles malgré la densité. - Utiliser de vrais titres, listes et en-têtes de tableau pour refléter la structure visible. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
À essayer ensuite
# Prévenir les dérives de Web Brutalism ## Objectif Transforme la correction visuelle en règle réutilisable et en contrôle ciblé sans figer toute l’interface. ## Contrôles - Isole les tokens ou variantes responsables. - Ajoute une preuve ciblée pour les états concernés. - Compare avec les styles proches avant d’élargir la règle. ## Garde-fous - Montre d’abord les changements envisagés avant toute action externe. - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite. - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu. ## Format de sortie - Résultat obtenu ou verdict. - Fichiers ou actions concernés. - Vérifications exécutées et preuves observables. - Blocages ou limites restantes.
sha256:305921bafa9473253f48e978f63e0b573b764cd8819dc6ea0411b5af8102b112
Digest du Pack: sha256:768c4bd2eaaf8c6cf287fef189195eb489188ea119b33162ea069c06350a62ee