Géométrie
Contours épais
Cartes, boutons, champs et images portent un trait sombre uniforme et visible.
Tendance nommée par l’industrie
Des blocs saturés, des contours noirs épais et des ombres nettes sans flou.
Aussi appelé: neo-brutalism, neubrutalism, neo brutalist UI
Définition et périmètre
Le Neobrutalism est un langage graphique volontairement dessiné. Il combine aplats saturés, contours sombres uniformes, ombres dures décalées et typographie massive pour donner aux éléments l’allure d’autocollants imprimés.
Périmètre: Ce style n’est pas du HTML laissé brut. Son apparence est fortement composée. Le Web Brutalism strict reste la catégorie adaptée aux matériaux natifs et à la structure exposée.
Les quatre signaux distinctifs doivent rester visibles sans dépendre du nom du style.
Géométrie
Cartes, boutons, champs et images portent un trait sombre uniforme et visible.
Profondeur
L’ombre est une forme pleine décalée sans aucun flou.
Couleur
Jaune, rose, vert ou cyan sont posés en aplats francs sur un fond clair.
Typographie
Les titres sont larges, gras et courts, tandis que le texte courant reste simple.
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 Neobrutalism dans ton agent ## Objectif Crée cette interface en Neobrutalism avec des aplats saturés, un trait sombre uniforme de 2 à 3 px, des ombres pleines décalées sans flou et des titres massifs. Garde le texte courant simple et très contrasté. ## 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 - Contours épais — Cartes, boutons, champs et images portent un trait sombre uniforme et visible. - Ombres dures décalées — L’ombre est une forme pleine décalée sans aucun flou. - Aplats saturés — Jaune, rose, vert ou cyan sont posés en aplats francs sur un fond clair. - Typographie massive — Les titres sont larges, gras et courts, tandis que le texte courant reste simple. ## É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é - Vérifier le contraste du texte sur chaque aplat saturé. - Ajouter un focus distinct des bordures épaisses déjà présentes. - Ne pas utiliser l’ombre décalée comme seul signal d’un état pressé ou désactivé. ## Non-objectifs - Multiplier les couleurs, motifs et contours jusqu’à rendre la lecture chaotique. - Appeler brutaliste une page seulement parce qu’elle utilise une police grasse. ## Critères d’acceptation - Une marque expressive qui accepte une hiérarchie forte et une forte présence graphique. - Une landing page ou un outil créatif avec peu de niveaux d’interface simultanés.
sha256:73d6648670acc255df0345fd81d56aaf8cd65a682558ca7b4eb63d278ece52aa
debugging
# Déboguer Neobrutalism 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 le système en harmonisant l’épaisseur des contours, le décalage des ombres et les états pressés. Réduis le nombre de couleurs et assure un focus visible qui ne se confond pas avec les bordures. ## Vérification finale - Vérifier le contraste du texte sur chaque aplat saturé. - Ajouter un focus distinct des bordures épaisses déjà présentes. - Ne pas utiliser l’ombre décalée comme seul signal d’un état pressé ou désactivé.
sha256:a585b6ff8bb4c139bf6442499a037ae52bdff30016fc1f8b30c0d4bb9064481f
Digest du Pack: sha256:888e98c239194abf6e0916fda1177b58387b434e94ea4e9edcb8b52837f5ad21