Le web a longtemps couru après la même esthétique : dégradés pastel, ombres floues, coins très arrondis, illustrations vaguement identiques d'un site SaaS à l'autre. Joli. Et parfaitement interchangeable. On a fait un autre choix — assumer l'arête, le contraste, la matière. Voici pourquoi, et pourquoi ça vieillit bien.
Le brutalisme, c'est de l'honnêteté visuelle
On assume des bordures nettes (border-2), des ombres dures et décalées plutôt que des halos diffus, une typo qui prend de la place, et des aplats de couleur francs. Notre orange, c'est notre orange — pas un dégradé timide.
Le terme vient de l'architecture (le béton brut des années 50-70) : montrer la structure plutôt que la masquer. Sur le web, c'est pareil — on ne cache pas le squelette sous une couche de gloss. Un bouton ressemble à un bouton, un lien se voit, une carte a une vraie épaisseur.
Ce n'est pas « moche pour faire genre ». C'est un design qui dit clairement où on clique, ce qui est important, et qui ne se cache pas derrière des effets. La forme suit la fonction, pas la mode.
Les ingrédients
Concrètement, le parti pris tient en quelques règles simples — faciles à coder, faciles à maintenir. L'ombre n'est pas un flou : c'est un décalage net, sans transparence. La bordure est franche. La couleur est un aplat.
/* L'ombre dure : décalée, nette, sans flou */
.hard { box-shadow: 7px 7px 0 #14110F; }
.dark .hard { box-shadow: 7px 7px 0 #000; }
/* On assume l'arête plutôt qu'un halo diffus */
.card {
border: 2px solid #14110F; /* border-2 */
border-radius: .75rem; /* coins francs */
background: #FF5310; /* notre orange, pas un dégradé */
}Et on résume le contraste de philosophie en un tableau :
| Élément | Soft / générique | Assumé / brutaliste |
|---|---|---|
| Ombres | halo flou diffus | décalée & nette (box-shadow 7px 7px 0) |
| Bordures | absentes ou 1px gris pâle | 2px franches (border-2) |
| Coins | très arrondis, « blobs » | francs ou modérés |
| Couleur | dégradés pastel | aplats, orange assumé #FF5310 |
| Typographie | discrète, neutre | affirmée (font-display) |
| Ressenti | lisse, interchangeable | identifiable, mémorable |
Ça vieillit mieux
Les tendances « soft » se périment vite : ce qui paraissait moderne en 2021 fait daté en 2026. Les formes franches, le contraste, la hiérarchie typographique forte — ça reste lisible et affirmé dans le temps. C'est moins « tendance », donc moins vite démodé.
Une partie de la raison est mécanique : moins on s'appuie sur l'effet du moment (le néomorphisme d'hier, le glassmorphism d'avant-hier), moins on a de raisons de tout refaire l'an prochain. Le contraste et la hiérarchie, eux, ne se démodent pas — ce sont des fondamentaux, pas des modes.
Lisibilité d'abord
Le brutalisme bien fait, c'est aussi de l'accessibilité : contrastes élevés, cibles cliquables nettes, focus visibles. Le style sert la clarté, il ne lui nuit pas.
Des contrastes élevés aident les personnes daltoniennes comme les écrans en plein soleil ; des cibles franches aident au doigt comme à la souris ; des focus visibles aident la navigation au clavier. La forme franche pousse dans le même sens que le RGAA et les WCAG — la forme assumée est souvent la forme accessible.
Le piège : assumé n'est pas négligé
Attention quand même : brutalisme ne veut pas dire bâclé. L'arête doit être intentionnelle, pas un défaut. Les espacements restent rigoureux, la grille tient, la hiérarchie est pensée. Une ombre dure partout perd tout son effet : on la réserve à ce qui compte — cartes, boutons clés — pas à chaque div.
Et on garde le dark mode lisible : une ombre noire sur fond sombre disparaît, donc on l'ajuste (chez nous, .dark .hard passe en noir pur sur des fonds plus clairs). Le parti pris esthétique ne dispense jamais du travail de finition.
Ressembler à soi-même
Au fond, le brutalisme web est un choix d'identité. Dans un océan de sites qui se ressemblent, ressembler à soi-même est un avantage. On préfère un site qu'on reconnaît au premier coup d'œil à un site « propre » qu'on oublie aussitôt.
Un site doit ressembler à quelque chose. Le pire choix, c'est de ressembler à tous les autres.