Style Brutaliste

Style Brutaliste

Rien à cacher, rien à embellir. Le HTML brut est la matière première.

Quand l'utiliser

• Zines, collectifs d'artistes, labels indépendants, manifestes, sites perso de développeurs, galeries expérimentales, archives.
• Évite-le pour le e-commerce grand public, la santé, les services publics ou toute audience qui a besoin d'être rassurée.

Palette

• --bg : blanc #ffffff. --text : noir #000000. C'est tout (contraste 21:1).
• Pas de --surface ni de --muted : aucun gris intermédiaire. Pour hiérarchiser, change la taille, la graisse ou inverse noir et blanc.
• --accent optionnel, UN seul : rouge sang #ff0000, jaune warning #ffff00 ou cyan #00ffff.
• Accent en fond sous du texte noir (jaune 19:1, cyan 16:1, rouge 5:1). Jamais de texte jaune ou cyan sur blanc, et pas de rouge sur blanc sous 24 px (4:1).
• États : survol en inversion (fond noir, texte blanc) ou fond accent, focus outline: 3px solid #000 offset 2px, erreur en fond rouge texte noir.

Typographie

• Fonts système uniquement : font-family: Times, "Times New Roman", serif ou Helvetica, Arial, sans-serif. Code : "Courier New", monospace.
• Aucune webfont custom, aucun appel à Google Fonts.
• Tailles brutes, non clampées : 12, 14, 16, 24, 48, 96 px. Rien entre les deux.
• Line-height 1.2 partout, y compris body.
• Deux graisses : 400 et 700. Uppercase pour les boutons et les labels.
• text-decoration: underline sur TOUS les liens.

Layout & grille

• Grille de tableau HTML si besoin, <table> acceptable, ou CSS grid avec bordures visibles.
• Bordures noires solid de 1 à 3 px, border-collapse: collapse pour que les cases se touchent.
• Blocs qui touchent les bords : body { margin: 0 }. Padding interne de 8 ou 16 px seulement.
• Densité assumée, lignes longues tolérées, mais max-width: 80ch sur les textes de plus de 3 paragraphes.
• Un seul breakpoint à 700 px : en dessous, tout s'empile en une colonne pleine largeur.
• border-radius: 0 et box-shadow: none partout.

Composants signature

• Header : nom du site en 96 px bold, collé au bord gauche, filet 3px dessous.
• Nav : liste <ul> en ligne, chaque lien dans une case bordée, ou séparés par " / ".
• Bouton : rectangle noir, bordure 2px noire, texte blanc uppercase 14 px. Survol : background: #ff0000, sans transition.
• Carte : case bordée 2px, image brute en haut, titre en 24 px, lien souligné. Aucun radius.
• Séparateurs <hr> visibles, 2px noir.
• Formulaires natifs, aucun override CSS sur input, select, checkbox.
• Images non retravaillées, aliasing visible OK, image-rendering: pixelated pour les petites.
• Footer : texte brut, date de dernière mise à jour, lien vers le code source.

Motion

• Aucune animation gratuite. transition: none partout (0 ms).
• Les changements d'état sont instantanés : survol, focus, ouverture de menu.
• Pas de spinner : un texte "Chargement..." suffit.
• Pas de smooth scroll, pas de parallax, pas de reveal au scroll.

Tokens CSS

:root {
  --bg: #ffffff;
  --text: #000000;
  --accent: #ff0000;
  --font: Helvetica, Arial, sans-serif;
  --font-alt: Times, "Times New Roman", serif;
  --font-mono: "Courier New", monospace;
  --border: 2px solid #000;
  --lh: 1.2;
  --radius: 0;
  --shadow: none;
  --transition: none;
}

Checklist avant livraison

• Aucune webfont chargée, aucun gris dans le CSS.
• Zéro border-radius, zéro box-shadow, zéro transition.
• Tous les liens soulignés et focus visible au clavier.
• Un seul accent maximum sur tout le site.
• Le site reste utilisable avec le CSS désactivé.

À éviter

• Le "néo-brutalisme" propre : ombres dures colorées, radius 12 px, pastels. C'est un autre style.
• Webfonts "brutes" type Space Mono chargées depuis Google : reste sur le système.
• Gris clairs pour faire discret.
• Fade ou slide au survol, même de 100 ms.

Prompts de démarrage

• "Crée le site d'un zine en style brutaliste : HTML quasi brut, fonts système, bordures noires, un accent rouge."
• "Fais une page d'artiste en <table> avec liste des expos, liens soulignés et images brutes."
• "Refais mon portfolio de développeur en brutaliste, instantané, sans aucune animation ni webfont."
• "Écris un manifeste en une page, Times 24 px, blocs collés aux bords et <hr> visibles."