Aller au contenu
SkillCodex
Mis à jour le
Version
v1.3.0
Sources
2 sources
Statut
Publié

Classification terminologique · Tendance nommée par l’industrie

Neobrutalism

Des blocs saturés, des contours noirs épais et des ombres nettes sans flou.

Aussi appelé : neo-brutalism, neubrutalism, neo brutalist UI

Aplats saturés, contour uniforme et ombre dure.

Comprendre

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.

Reconnaître

Les quatre signaux distinctifs doivent rester visibles sans dépendre du nom du style.

Géométrie

Contours épais

Cartes, boutons, champs et images portent un trait sombre uniforme et visible.

Profondeur

Ombres dures décalées

L’ombre est une forme pleine décalée sans aucun flou.

Couleur

Aplats saturés

Jaune, rose, vert ou cyan sont posés en aplats francs sur un fond clair.

Typographie

Typographie massive

Les titres sont larges, gras et courts, tandis que le texte courant reste simple.

ADN du style

Ce que le style exige, ce qui l’accompagne d’habitude, ce qui peut changer sans en sortir, et ce qui le trahit.

Rapport hebdomadaire

Sessions actives

12 480+8,2 % vs semaine dernière

Dans les clous

Ouvrir la galerie de styles
Même carte, rendue en Neobrutalism.

Définit le style

  • Un trait sombre uniforme et visible sur les cartes, boutons, champs et images.
  • Une ombre pleine décalée, sans aucun flou.
  • Des aplats saturés posés franchement sur un fond clair.

Soutient le style

  • Des titres larges, gras et courts, avec un texte courant simple.
  • Des coins droits ou à peine arrondis.
  • Des étiquettes encadrées qui ressemblent à des autocollants imprimés.

Peut varier

  • La palette d’aplats : jaune, rose, vert ou cyan.
  • L’épaisseur du trait et le décalage de l’ombre, tant qu’ils restent constants dans l’écran.
  • La famille typographique, pourvu que les titres restent massifs.

À éviter

  • Défaut d’accessibilitéUn focus qui se confond avec les bordures épaisses déjà présentes.
  • Défaut d’accessibilitéL’ombre décalée comme seul signal d’un état pressé ou désactivé.
  • CaricatureDes couleurs, motifs et contours multipliés jusqu’à rendre la lecture chaotique.
  • ContradictionUne ombre floue ou un dégradé doux qui ramène vers le flat ou le verre.

Proches cousins

Des styles qui partagent un signal sans partager la règle.

Même carte, quatre styles

Choisir

Bon contexte

  • 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.

Mauvais usage

  • Multiplier les couleurs, motifs et contours jusqu’à rendre la lecture chaotique.
  • Appeler brutaliste une page seulement parce qu’elle utilise une police grasse.

Comparer

Différence décisive avec le voisin le plus proche

Briefs prêts à utiliser

Choisis l’intention qui correspond à ton travail, puis copie ce brief statique dans ton agent.

Créer

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é.

Modifier

Conserve les composants et la hiérarchie existants. Remplace les ombres floues par des décalages nets, applique une seule règle de contour et limite la palette à quelques aplats cohérents.

Réparer

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.

Comprendre → Reconnaître → Choisir → Comparer

Pack pour ton agent

Instructions pré-écrites à coller dans ton agent. Copier n’exécute rien.

Implémenter correctement

Donne une direction Neobrutalism cohérente

# 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é.

## Quand ne pas utiliser
- 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.

## 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.
  • Prérequis · Tokens, composants et contraintes de marque existants
Pourquoi ça marche
  • Le style est cadré par ses signaux et ses surfaces, pas par une simple référence visuelle.
  • Les états et les fallbacks protègent l’usage quand le mouvement ou une API manque.
  • Les critères d’accessibilité et de performance empêchent l’esthétique de devenir une dette.

À essayer ensuite

Audite Neobrutalism dans le produit

# Auditer Neobrutalism sur la surface réelle

## Objectif
Contrôle que Neobrutalism 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:0a4651295fb55bd63f1d0396c599d4632ef4847610a0f4c634dc51ff0cb96fc1

Diagnostiquer un problème

Corrige les écarts de Neobrutalism

# 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é.

## 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.
  • Prérequis · Tokens, composants et contraintes de marque existants
Pourquoi ça marche
  • Le diagnostic compare des signaux observables au lieu de juger le goût.
  • La couche visuelle est isolée pour préserver la structure et les interactions.
  • La correction reste reliée aux fallbacks, au contraste et aux états interactifs.

À essayer ensuite

Stabilise Neobrutalism dans le design system

# Prévenir les dérives de Neobrutalism

## 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:40050ff045d86d5ed2ccb9a5a3e8d7dd6729665352c5b236d91e3027d9651e5d

Fiche complète, enregistrement et provenance

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.

Digest du Pack: sha256:3eebffdab026fd713a8939ea53a5d6ee14ae598b82321b24acdfaf1eab46a3cd

Accessibilité et vérification

  1. 1Vérifier le contraste du texte sur chaque aplat saturé.
  2. 2Ajouter un focus distinct des bordures épaisses déjà présentes.
  3. 3Ne pas utiliser l’ombre décalée comme seul signal d’un état pressé ou désactivé.

Sources

Révision du contenu
1.3.0
Sources consultées le
2026-07-20
Digest du catalogue source
sha256:e2e112ed9b0cabe7c6e72351765c2d7c1d0d309274926a8b1efe2aa9aa4f66b6
sha256-utf8-canonical-json-lf/v1
Ouvrir le catalogue source versionné