neo-brutalism-ui

UI Néobrutaliste

Une interface gagne la confiance en montrant ouvertement sa structure et en étant bruyante à ce sujet, car chaque bordure et ombre est un fait énoncé.

Champs de couleur plats et vifs avec des bordures noires épaisses et des ombres portées dures et non floues. Ce style a émergé de sites de produits comme Gumroad et de kits de la communauté Figma en tant que réponse délibérée à la douceur corporate.

Période : 2020–présent · Ère : Contemporain & Spatial · Domaine : Design Graphique & UI · Aussi appelé : Neubrutalism, Neobrutalism, Interface Web Brutaliste

Quand charger ce skill

Chargez-le lorsque l'utilisateur demande : "neo-brutalism", "neubrutalism", "neobrutalist", "brutalist ui", "bordures noires épaisses", "ombre dure", "ombre décalée", "style gumroad", "couleurs vives et plates", "style sticker".

Ce skill est adapté pour : les produits de l'économie créatrice, les pages d'atterrissage SaaS indépendantes, les sites d'outils pour développeurs, les portfolios, les sites d'événements et de festivals.

Ne pas l'utiliser lorsque :

• La marque doit signaler le luxe discret, les soins médicaux ou la sécurité bancaire.
• L'interface est un outil d'entreprise dense, car les bordures de 3px et les ombres de 4px consomment de l'espace sur chaque ligne.
• Le public attend un aspect natif de la plateforme, comme un écran de paramètres OS.

Directives système

Lors de la génération de layouts UI ou graphiques dans le style UI Néobrutaliste, vous DEVEZ :

1. Dessiner une bordure #000000 pleine de 2px à 4px autour de chaque carte, bouton, champ de saisie et image.
2. Appliquer une ombre dure avec zéro flou, décalée de 4px 4px, par exemple 4px 4px 0 0 #000000, sur chaque élément en relief.
3. Remplir les surfaces avec des couleurs saturées et plates à 100 % d'opacité, et utiliser deux à quatre teintes vives sur une seule page.
4. Au survol, déplacer l'élément du décalage de l'ombre et réduire l'ombre à 0, de sorte qu'il semble s'enfoncer dans la page.
5. Utiliser uniquement des rayons de 0px à 8px, et utiliser la même valeur sur tous les éléments d'une page.
6. Définir les titres dans une police grotesque ou monospace lourde avec un poids de 700 ou plus, dans des tailles de 48px à 96px.
7. Garder le texte en noir sur les champs de couleur, et atteindre au moins un contraste de 7:1 sur chaque remplissage.

Barrières de protection

Chaque ligne ci-dessous brise le style. Vérifiez votre sortie par rapport à cette liste avant de la renvoyer.

• JAMAIS : Ombres portées floues avec un rayon de flou supérieur à 0px.
• JAMAIS : Dégradés gris subtils ou reflets brillants sur les surfaces.
• JAMAIS : Remplissages pastel et faiblement saturés avec du texte gris.
• JAMAIS : Bordures fines de 1px ou bordures d'une couleur autre que le noir.
• JAMAIS : Rayons de coins mixtes sur une même page, comme 4px sur les cartes et 24px sur les boutons.
• JAMAIS : Panneaux translucides ou avec un flou d'arrière-plan.
• JAMAIS : Poids de police fins inférieurs à 500 pour les titres.

Profil vectoriel

Axe	Score	1 signifie	5 signifie
Ornementation	■■■□□ 3/5	minimal pur	maximaliste
Dimensionnalité	■■□□□ 2/5	strictement 2D	3D / spatial complet
Rigidité de la grille	■■■□□ 3/5	chaotique / organique	grille mathématique stricte
Réalisme skeuomorphique	■□□□□ 1/5	numérique abstrait	matériau photoréaliste
Expressivité typographique	■■■■□ 4/5	neutre / invisible	expérimental / illustratif

Maintenez ces scores. Si une demande déplace un axe de 2 points ou plus, vous avez quitté le style : allez voir "Recours de lignée".

Logique spatiale et de grille

• Mécanismes de grille : Une grille de 12 colonnes avec des gouttières de 24px à 32px et des cartes qui se placent dans des blocs de 2, 3 ou 4 colonnes ; l'ombre décalée ajoute 4px à 8px de largeur visuelle.
• Ratio d'espace blanc : 25 à 40 % de la surface est ouverte ; l'échelle d'espacement est 8, 16, 24, 32, 48 et 64px, et une carte a un remplissage de 24px.
• Règles d'alignement : Texte aligné à gauche ; les blocs reposent sur les bords de la grille avec une légère inclinaison de 1 à 2 degrés autorisée uniquement pour les stickers et les badges ; les sections sont coupées par des règles noires de 3px sur toute la largeur.
• Géométrie des conteneurs : Rectangles avec un rayon de 0px à 8px, une bordure noire de 3px et une ombre 4px 4px 0 0 #000000 ; les pilules utilisent un rayon de 999px uniquement pour les étiquettes.

Typographie

• Classifications : grotesque sans · monospace · slab serif
• Crénage : Les tailles d'affichage prennent -0,03em ; le corps reste à 0 ; les étiquettes en majuscules prennent +0,05em.
• Interlignage : Affichage 1,0 à 1,1 ; corps 1,5 ; étiquettes 1,2.
• Règles de hiérarchie :
  • Utiliser le poids 700 ou 800 pour les titres et 400 ou 500 pour le corps ; éviter les poids légers.
  • Définir les titres de 48px à 96px et le corps de 16px à 18px, un ratio d'environ 3:1 ou plus.
  • Définir les boutons et les étiquettes en gras majuscule à 14px avec un crénage de +0,05em.
  • Placer le mot clé d'un titre sur un bloc de surbrillance de couleur avec une bordure noire de 3px.

Associations de polices

Affichage	Corps	Note
Space Grotesk	DM Sans	Titres grotesques fantaisistes sur un visage de texte simple.
Archivo Black	Work Sans	Titres lourds de style affiche pour les grands titres.
Bricolage Grotesque	Inter	Affichage condensé et à contraste élevé avec un corps neutre.
Space Mono	Space Grotesk	Étiquettes monospace pour une voix technique et brute.

Couleur et éclairage

• Structure de la palette : Contours noirs, page blanc cassé chaud ou jaune et deux à quatre teintes vives et plates telles que le rose, le bleu et le vert, chacune à 100 % d'opacité et utilisée dans de grands blocs.
• Règles de contraste : Le texte noir sur chaque remplissage vif atteint au moins 7:1, par exemple 15:1 sur Jaune Citron et 7:1 sur Bleu Électrique ; le texte blanc est autorisé uniquement sur les remplissages noirs ; la bordure noire de 3px donne à chaque contrôle un bord de 21:1.
• Traitement de surface : Champs opaques plats à 100 % d'opacité sans dégradé, sans texture et sans transparence ; un motif de points ou de grille facultatif à 8 % de noir sur le fond de la page.
• Lumière et ombre : Aucune source de lumière n'est simulée ; une ombre décalée dure de 4px 4px 0 0 #000000 tombe en bas à droite avec zéro flou, et elle fonctionne comme une extension de contour.

Palette

Nom	Hex	Rôle
Encre	#000000	bordures, ombres et texte
Crème	#FFF8E7	fond de page
Citron	#FFE14D	surbrillance et remplissage principal
Rose vif	#FF5DA2	remplissage d'accentuation
Bleu électrique	#4D7CFF	accent secondaire
Menthe	#6EE7B7	remplissage de succès et d'étiquette
Blanc	#FFFFFF	surface de la carte

Matérialité et texture

• Simulation de surface : Aucune ; la surface est du papier plat découpé ou du stock d'autocollants avec un contour noir et une ombre dure, et elle n'imite aucun matériau réel.
• Règles de bordure : Bordures #000000 pleines de 2px sur les petits contrôles, 3px sur les cartes et 4px sur les blocs de héros ; la couleur de la bordure ne change jamais entre les états.
• Flou et élévation : Le flou est de 0px partout ; l'élévation est le décalage de l'ombre : 2px 2px sur les étiquettes, 4px 4px sur les cartes et les boutons, 8px 8px sur les modales, tout en #000000.

Ornementation et iconographie

• Iconographie : Icônes en gras avec un trait de 2,5px à 3px et des extrémités carrées ou rondes à 24px, en noir, souvent à l'intérieur d'un cercle coloré avec une bordure de 2px.
• Illustration : Illustration plate dans la palette vive avec des contours noirs épais, plus des autocollants, des étoiles et des flèches ; les marques dessinées à la main sont les bienvenues.
• Éléments décoratifs : autocollants et badges · bandes de texte défilant · rayons d'étoiles · fonds de grille à points · flèches et gribouillis de soulignement

Mouvement et interactivité

• Né sur écran : oui
• Physique de transition : Les éléments se déplacent exactement du décalage de l'ombre au survol et à l'appui, de sorte que l'ombre semble s'effondrer ; le mouvement est court, de sensation linéaire et sans dépassement.
• Easing : cubic-bezier(0.2, 0, 0, 1)
• Durée (ms) : 120
• Survol et actif : Le survol déplace l'élément de 4px vers la droite et de 4px vers le bas et définit l'ombre sur 0 0 0 0 ; l'état actif maintient cette position ; le focus ajoute un contour #4D7CFF plein de 3px décalé de 2px.

Code et base de jetons

Définissez data-style="neo-brutalism-ui" sur l'élément racine et collez les jetons. Le fichier tokens.css contient les mêmes jetons et un ensemble de règles de référence.

[data-style="neo-brutalism-ui"] {
  --color-bg: #FFF8E7;
  --color-surface: #FFFFFF;
  --color-text: #000000;
  --color-muted: #3A3A3A;
  --color-primary: #FFE14D;
  --color-accent: #FF5DA2;
  --color-border: #000000;
  --font-sans: "DM Sans", "Work Sans", system-ui, sans-serif;
  --font-display: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --border-radius: 4px;
  --border-width: 3px;
  --shadow-elevation: 4px 4px 0 0 #000000;
  --backdrop-filter: none;
  --space-unit: 8px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration: 120ms;
  --shadow-large: 8px 8px 0 0 #000000;
  --accent-blue: #4D7CFF;
  --color-on-bg: #000000;
  --color-on-surface: #000000;
  --color-on-primary: #000000;
  --color-on-accent: #000000;
  --color-muted-on-bg: #3A3A3A;
  --color-muted-on-surface: #3A3A3A;
  --color-link: #000000;
  --color-link-on-surface: #000000;
  --display-weight: 700;
  --subhead-weight: 700;
  --body-weight: 500;
  --strong-weight: 700;
  --label-weight: 700;
  --display-tracking: -0.03em;
  --display-leading: 0.95;
  --display-case: none;
  --body-leading: 1.5;
  --body-size: 17px;
  --icon-stroke: 2.5;
}

Modèles Tailwind :

Élément	Classes
page	bg-[#FFF8E7] text-black font-sans antialiased p-6 md:p-12
carte	rounded bg-white p-6 border-[3px] border-black shadow-[4px_4px_0_0_#000000]
bouton	rounded border-[3px] border-black bg-[#FFE14D] px-6 py-3 text-sm font-bold uppercase tracking-[0.05em] text-black shadow-[4px_4px_0_0_#000000] transition-all duration-[120ms] hover:translate-x-1 hover:translate-y-1 hover:shadow-none
saisie	rounded border-[3px] border-black bg-white px-4 py-3 text-black shadow-[4px_4px_0_0_#000000] outline-none focus:outline-[3px] focus:outline-offset-2 focus:outline-[#4D7CFF]
titre	font-extrabold text-5xl md:text-7xl leading-none tracking-[-0.03em] text-black
étiquette	inline-block rounded-full border-2 border-black bg-[#6EE7B7] px-3 py-1 text-xs font-bold uppercase shadow-[2px_2px_0_0_#000000]

Pack visuel

Les images et icônes de ce style sont des fichiers. Utilisez-les tels quels, ou lisez-les comme une spécification et dessinez les vôtres dans le même langage.

Fichier	Contenu
pack/hero.svg	Plaque de héros, 800 par 600. Une image abstraite dans le langage visuel du style.
pack/pattern.svg	Carreau de motif, 80 par 80. Il se répète dans les deux directions.
pack/icons.svg	Sprite d'icônes : accueil, recherche, cœur, étoile, cloche, utilisateur, courrier, calendrier, image, éclair, lecture, coche, fermer, curseurs.

• Icônes : contour, trait 2,5 sur un champ de 24 px, extrémités carrées, joints en onglet, conteneur : carré. Utilisation : <svg class="icon"><use href="pack/icons.svg#home"/></svg>. Une icône prend currentColor.
• Famille d'icônes : le sprite est extrait de Phosphor (Gras) par Phosphor Icons, licence MIT. Raison : Un trait épais avec un poids émoussé qui correspond aux bordures épaisses. C'est un substitut open source pour une démo. Pour un produit, utilisez la bibliothèque d'icônes de la marque et choisissez la famille selon les règles ci-dessous.
• Type d'affichage : poids 700, crénage -0,03 em, interlignage 0,95, casse : aucune.
• Poids : affichage 700, sous-titre 700, corps 500, gras dans le texte 700, étiquettes et boutons 700. Le style utilise 2 poids (500, 700) et aucun autre. L'affichage est 200 plus lourd que le corps. L'accent est le poids : un mot plus lourd est l'accent, donc les écarts entre les poids sont clairs.
• Type de corps : 17 px, interlignage 1,5.
• Page : héros divisé, aligné à gauche, densité compacte, inclinaison d'accentuation -1°.
• Couleur du texte : --color-text est pour le champ de lecture principal uniquement. Sur chaque champ, utilisez son jeton : --color-on-bg, --color-on-surface, --color-on-primary, --color-on-accent.

Comment choisir un pack d'icônes

Un pack d'icônes est une police de caractères pour les images. Choisissez-le avec le même soin que la police de texte. Ces règles s'appliquent à un ensemble open source et à une bibliothèque sous licence.

1. Le trait correspond à la hampe. Placez une icône à côté du texte du corps à la taille du texte. La ligne de l'icône et la hampe d'une lettre ont le même poids.
2. Les embouts et les coins suivent le jeton de rayon. Les embouts droits et les joints en onglet vont avec un rayon de zéro. Les embouts ronds et les joints ronds vont avec un rayon doux.
3. Le mode de remplissage suit la technologie de l'époque. Les époques d'impression coupent les formes solides. Les époques d'écran avec profondeur remplissent et ombragent la forme. Les interfaces produit actuelles dessinent un contour.
4. Les métaphores ne sont pas plus jeunes que le style. Chaque image est un objet que l'époque connaissait. Une icône avec une métaphore ultérieure brise la période.
5. Une famille, une grille. Toutes les icônes proviennent d'une seule famille et d'une seule variante, dessinées sur un seul champ. Ne mélangez pas les familles sur une seule surface.
6. La famille couvre le produit. Listez chaque concept dont le produit a besoin avant de vous engager. Une famille qui n'a pas d'icône pour l'un d'eux est la mauvaise famille.
7. La couleur est un jeton. Une icône prend currentColor. Un deuxième ton provient d'un jeton, pas du fichier.
8. La licence autorise l'utilisation. Lisez la licence de l'ensemble. Donnez du crédit là où la licence le demande. Un produit avec une marque utilise sa bibliothèque sous licence et applique les mêmes règles pour choisir la famille.

Recours de lignée

Lorsque l'utilisateur demande une variation, n'improvisez pas. Évoluez vers le voisin nommé ici et chargez son skill.

• Si l'utilisateur demande plus calme : évoluez vers flat-design (Design Plat). Réduisez la bordure à 1 px, supprimez l'ombre décalée et atténuez les remplissages à 60 % de saturation ; conservez les champs plats et la grille.

• Si l'utilisateur demande plus ordonné : évoluez vers swiss-international (Style International Suisse). Réduisez la palette au noir, blanc et un rouge, définissez un rayon de 0 px et un texte aligné à gauche sur une grille de 12 colonnes ; conservez les règles de 2 px.

• Si l'utilisateur demande plus semblable à une application : évoluez vers bento-grid-ui (UI Grille Bento). Disposez le contenu dans une grille rectangulaire de cellules de tailles mixtes avec un espace de 16 px ; conservez la bordure de 3 px et l'ombre dure.

• Si l'utilisateur demande plus poli : évoluez vers material-design (Material Design). Passez à un rayon de 8 px, une bordure de 1 px et une ombre douce de 0 2 px 4px rgba(0, 0, 0, 0.2) ; conservez un accent vif.

• Vient de (allez ici pour une version plus orthodoxe) : flat-design

• Rejette (le pôle opposé ; ne mélangez pas) : corporate-memphis