Yeah, I can't stand these influencer-wannabe web-devs misusing terms.
béton brut means "raw concrete" in French, and in architecture that's what brutalism is. I'd say only sites that look like they use the default style of HTML with no CSS on Netscape 1.x could be called "brutalist"...
> Neobrutalism is a mix of regular brutalism in web design and more modern typography, illustration, and animation standards. Neobrutalism refuses the usual components of UX-UI design and embraces uncomfortable design elements, and it is more fearless to use distinctive color palettes.
nothing about this is neobrutalist by their own standards. There is nothing “uncomfortable” about these standard round flat shapes, and unvibrant 3/4 saturated tones, they aren’t distinct, its called Alegria[1], calling it neobrutalism is a corruption of the meaning of brutalism and comes off as distinctly uncultured.
neobrutalism should have sharp edges, very vibrant saturated colors, and virtually none of these flowery spiral shapes. (neo)brutalism is forcing a square peg in a round hole with a hammer, and leaving it like that on purpose, because the raw swedge is the aethetic.
Neo doesn't mean it can just be a completely different thing, it means its a modern take on the same thing from before but slightly evolved. Neo-Classicism still looks like Classicism. Neo Nazis are still Nazis.
If I create something called Neo-Cuisine, you'd expect the result to be edible. If I see something calling itself "Neo-Brutalist Architecture", I'd expect it to look like Brutalism, or have some hallmark of the style. e.g. raw, but a different material new to the time period).
As far as web design, there's nothing "raw" about 100s of dependencies and animated charts and rounded rects and opinionated fonts and the rest of the this pastiche in "64 components, charts and star shapes for React and Tailwind v4. Built on shadcn/ui and Base UI." This is just Corporate Memphis + dialog aesthetics[0]
It's a visual style, yet all your criticisms are about under-the-hood technicalities. The style I use for my personal projects (https://frost-e.com/design-system/) is a single css file, but looks similar. Nothing is stopping you from applying this visual style to plain HTML components.
>It's a visual style, yet all your criticisms are about under-the-hood technicalities
the very point of brutalism is to turn its material 'inside out', what defines brutalism is that it makes the material and structural elements it's made of visible. It's not a 'visual style' in the sense that it has some particular decorations, the point is to remove decorations and expose its elements.
If you want to apply that notion to web design It's not about 1 CSS file or 100 but whether the mechanics of CSS or HTML are still visible on the site, or if it's all buried under colors, animations, styling or styling. Craigslist is a pretty good example of a brutalist website.
It's a niche and not super-well defined, but definitely existing style, ie: https://neubrutalism.com/
Broadly, it's a move away from flat, low contrast Material-type UIs and also away from the 'gradients and curves' AI-era designs and back into something that's more like the early web.
Interesting. I had thought my own web site (https://bradlyfeeley.com) was neo-brutalist, so I was taken back by how different this design was from my own.
Really unfortunate how much I immediately associate this with vibe coded sites. So many models trend to this exact neobrutalist style when any semblance of Swiss design or minimalism is mentioned in the prompt. However, I really do like how the style looks on some sites, like in https://www.not-ship.com/united-nations-map/ which was on HN earlier.
I associate beige or purple extremely long landing pages with vibe coded
alongside infinite tangentially related features, because it lacks intention but the creator was stuck in a bout of AI psychosis
here, on the other hand, I’m wondering why they would even release this, as it should be a component for more intentional vibe coding. A Claude design template masqueraded as a whole framework
I wish. React + Tailwind as the commonly accepted default is too bad, it sacrifices portability for convenience. It's legacy code in the making, like jQuery and Bootstrap.
I will say I'm afraid to use this style because Gemini seems to love it so much and therefore users will make assumptions about how the website was created.
That might be true for them to know it was AI. Which yes, was how I worded it. But not necessarily good enough for it to be differentiated from everything else.
For example, in the Bootstrap days everything looked like Bootstrap and users got used to that, even if users hadn't specifically heard of the CSS framework.
I love it! I've been using my own styling for my various projects that I call "Soft NeoBrutalism" that's more colourful and lower contrast since I find most neobrutalist styles to be too stark. Sample here: https://frost-e.com/design-system/
Since mine is just a hacky vibe-coded single css file, I might switch to yours with a custom colour scheme.
I enjoy the look of these, but personally I wouldn't have thought to describe them as neobrutalist, so I'm thinking I don't know what it is.
How is brutalism defined in this context? When I think web brutalism I think Craigslist style sites and reduction of superfluous design elements.
Yeah, I can't stand these influencer-wannabe web-devs misusing terms.
béton brut means "raw concrete" in French, and in architecture that's what brutalism is. I'd say only sites that look like they use the default style of HTML with no CSS on Netscape 1.x could be called "brutalist"...
E.g. https://stallman.org
IMO the design is more "Windows 3.1 Hot Dog Stand Theme" https://blog.codinghorror.com/a-tribute-to-the-windows-31-ho... combined with MS WordArt...
FWIW, from the OP website:
> Neobrutalism is a mix of regular brutalism in web design and more modern typography, illustration, and animation standards. Neobrutalism refuses the usual components of UX-UI design and embraces uncomfortable design elements, and it is more fearless to use distinctive color palettes.
nothing about this is neobrutalist by their own standards. There is nothing “uncomfortable” about these standard round flat shapes, and unvibrant 3/4 saturated tones, they aren’t distinct, its called Alegria[1], calling it neobrutalism is a corruption of the meaning of brutalism and comes off as distinctly uncultured.
neobrutalism should have sharp edges, very vibrant saturated colors, and virtually none of these flowery spiral shapes. (neo)brutalism is forcing a square peg in a round hole with a hammer, and leaving it like that on purpose, because the raw swedge is the aethetic.
[1] https://en.wikipedia.org/wiki/Corporate_Memphis
Right, hence why it's called "Neo-brutalist" and not "brutalist". It's not just plain un-styled html.
Neo just means new. It's not an out-of-jail card if it is completely unrelated to the old/real thing.
Neo doesn't mean it can just be a completely different thing, it means its a modern take on the same thing from before but slightly evolved. Neo-Classicism still looks like Classicism. Neo Nazis are still Nazis.
If I create something called Neo-Cuisine, you'd expect the result to be edible. If I see something calling itself "Neo-Brutalist Architecture", I'd expect it to look like Brutalism, or have some hallmark of the style. e.g. raw, but a different material new to the time period).
As far as web design, there's nothing "raw" about 100s of dependencies and animated charts and rounded rects and opinionated fonts and the rest of the this pastiche in "64 components, charts and star shapes for React and Tailwind v4. Built on shadcn/ui and Base UI." This is just Corporate Memphis + dialog aesthetics[0]
[0]: https://invisible-island.net/dialog/
It's a visual style, yet all your criticisms are about under-the-hood technicalities. The style I use for my personal projects (https://frost-e.com/design-system/) is a single css file, but looks similar. Nothing is stopping you from applying this visual style to plain HTML components.
>It's a visual style, yet all your criticisms are about under-the-hood technicalities
the very point of brutalism is to turn its material 'inside out', what defines brutalism is that it makes the material and structural elements it's made of visible. It's not a 'visual style' in the sense that it has some particular decorations, the point is to remove decorations and expose its elements.
If you want to apply that notion to web design It's not about 1 CSS file or 100 but whether the mechanics of CSS or HTML are still visible on the site, or if it's all buried under colors, animations, styling or styling. Craigslist is a pretty good example of a brutalist website.
“neowhimsical” would be a more accurate description. Definitely not “brutalist”, I’m unsure if the founders of this term ever saw anything brutalist.
There's two definitions of brutalist web design. https://news.ycombinator.com/item?id=42027654#42028919
I think your definition is closer. I would instead look at Bell Kiosk as a good example of someone doing the digital equivalent of brutalism
I would call this bauhaus not neobrutalism.
Neobrutalism has been around long enough as a web style (ca. 2021?) that the name has already stuck, but you're totally right.
It's a niche and not super-well defined, but definitely existing style, ie: https://neubrutalism.com/
Broadly, it's a move away from flat, low contrast Material-type UIs and also away from the 'gradients and curves' AI-era designs and back into something that's more like the early web.
Interesting. I had thought my own web site (https://bradlyfeeley.com) was neo-brutalist, so I was taken back by how different this design was from my own.
I am not a front end dev. But one question I always had is why px and not em? I thought em as a relative distance would be better than hard coding px?
I'm a big fan of neobrutalist UIs, but I think it's easy to overdo it.
This component library and the LLM default interpretation of the style is very much "in your face."
As an example, the black scrollbar here[0] is very heavy, a component which isn't meant to be looked at, but is distracting on first glance.
Prompting an LLM to make "lightly styled" neobrutalist is much more pleasing to my eyes, but maybe I'm alone in that.
[0]https://www.neobrutalism.dev/docs
Really unfortunate how much I immediately associate this with vibe coded sites. So many models trend to this exact neobrutalist style when any semblance of Swiss design or minimalism is mentioned in the prompt. However, I really do like how the style looks on some sites, like in https://www.not-ship.com/united-nations-map/ which was on HN earlier.
I associate beige or purple extremely long landing pages with vibe coded
alongside infinite tangentially related features, because it lacks intention but the creator was stuck in a bout of AI psychosis
here, on the other hand, I’m wondering why they would even release this, as it should be a component for more intentional vibe coding. A Claude design template masqueraded as a whole framework
Is there a pure CSS or CSS + JS alternative that does not rely on React?
I wish. React + Tailwind as the commonly accepted default is too bad, it sacrifices portability for convenience. It's legacy code in the making, like jQuery and Bootstrap.
First thing I thought. Tying it to React is a shame.
This is actually "Post-Corporate Memphis". Says me.
These pages are closer to "neobrutalism" or what I would call "Cybermod" [0], I think...
<https://webb.page>
<https://garden.bradwoods.io>
[0]: <https://news.ycombinator.com/item?id=44415330>
Wouldn't web brutalism be using the browsers "native" component, as in don't style <input> elements?
Is a dark mode available? That's the bit I struggle the most with this style.
Ah, yes, the Brite Bootswatch skin.
No need to mess around further.
Looks great, thanks for sharing. Do you plan to add Dark Mode and/or Shadcn theming?
This is pretty cool however I feel it's inconsistent. Some elements have a drop shadow and some don't (Button vs Button Group).
The charts are particularly great.
I will say I'm afraid to use this style because Gemini seems to love it so much and therefore users will make assumptions about how the website was created.
Unless you're building apps for people who are also in tech, your users won't have any idea what UI styles different LLMs push.
That might be true for them to know it was AI. Which yes, was how I worded it. But not necessarily good enough for it to be differentiated from everything else.
For example, in the Bootstrap days everything looked like Bootstrap and users got used to that, even if users hadn't specifically heard of the CSS framework.
Brutalism? More like 'Back to school' vibes to be honest
Agree, this would probably be great UI for K-6 level educational apps.
looks awful (to provide a genuinely felt counter view)
I just realized this is one more thing destroyed by LLM after em-dashes.
This is like the high waisted, mom-pants of browser UI design.
trapper keeper-ism
Reminds me of Notion and old Basecamp.
This is a very easy sell for me because everything these days is doing the infuriating gray text on gray background.
I love it! I've been using my own styling for my various projects that I call "Soft NeoBrutalism" that's more colourful and lower contrast since I find most neobrutalist styles to be too stark. Sample here: https://frost-e.com/design-system/
Since mine is just a hacky vibe-coded single css file, I might switch to yours with a custom colour scheme.
nice web design !
looks great!