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
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. ## Non-objectifs - 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.
sha256:947cd552f7c82638b8511bd74575ea0cb29fdfbbc546e2bc66c7d7708f040106
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.
sha256:115cba02206a2bb4102d9c49e2ff7ee285fb7a13bdd2ed0701e75a9529386a75
Digest du Pack: sha256:2430437ed0fe64097faab366a5136e6e8698740da8172e10290a4c904c7ec99a