Rendered at 09:04:36 GMT+0000 (Coordinated Universal Time) with Cloudflare Workers.
kazinator 9 hours ago [-]
This is insanely verbose just for a button with a tooltip:
import { Button } from "@/components/ui/button"
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"
export default function TooltipDemo() {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<Button variant="noShadow" />}>
Hover
</TooltipTrigger>
<TooltipContent>
<p>Add to library</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)
}
Contrast with plain old HTML form button where the title attribute gives the tooltip text:
<button type="submit" title="Add to library!">Hover</button>
Waterluvian 8 hours ago [-]
Yeah but can your tooltip render in neon brown?
kazinator 8 hours ago [-]
Not sure; it may be doable remotely with some CSS, in which case it would be a few lines of code for any number of buttons.
Waterluvian 6 hours ago [-]
Joking aside, I don’t believe you can and I’m fine with that. It’s still so much simpler and predictable.
kazinator 4 hours ago [-]
I do have a vague memory of working with tooltips intensively (the above kind with title attributes on form elements) and there not being a lot of flexibility.
sph 5 hours ago [-]
Haven’t you heard that you’re not supposed to type code anymore?
kazinator 4 hours ago [-]
You probably mean, haven't I heard that you're not supposed to look at code any more.
Mainly, looking at it is the problem. Decades old copy-paste editing techniques get around the typing.
tolerance 14 hours ago [-]
This is actually "Post-Corporate Memphis". Says me.
These pages are closer to "neobrutalism" or what I would call "Cybermod" [0], I think...
Post Corporate-Memphis makes sense. Personally it reminds me of vintage Colorforms.
Maybe also could be described as Post Layervault as I don’t recall a website using so many primary colors and flat shading before they made it cool.
ricardobeat 12 hours ago [-]
Those two websites have nothing in common.
“Neobrutalism” might be wrong in concept, but it was coined around 2023, that ship has sailed.
tolerance 10 hours ago [-]
Wow, really? Nothing? Care to share why you think so?
> “Neobrutalism” might be wrong in concept, but it was coined around 2023, that ship has sailed.
Who cares. It's 2026. All it takes to sink a sailing ship is a few determined gents in a motorboat. It's called Post-Corporate Memphis!
thejazzman 13 hours ago [-]
…and I thought I was clever when I designed https://poolometer.com to look kind a 1990s summer party / Memphis design
slig 10 hours ago [-]
Really nice design!
hanuffs 30 minutes ago [-]
[dead]
bradly 16 hours ago [-]
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.
netsharc 15 hours ago [-]
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"...
> 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"
I agree, but maybe just not on the Netscape 1.x part. Brutalism in all of it's forms has never been about traditionalism. Even if concrete wasn't a new matieral in the 50s, you can't say something like Église Notre-Dame du Haut [0] is following any sort of traditional church architecture.
Brutalism on the web to me would focus more on honesty. An honest website shows you the processes your browser is undertaking, and how that results in rendering it's purpose. Images should load in progressively, any layout tables/divs/scaffolding shouldn't be invisible, a link/button/headings should behave/look how they "natively" do in whatever browser you happen to be using (not specifically netscape 1.x). If you're writing a cookie to the current session, I want to see that state reflected on the page. If I see a process happening I don't like, I should be able to stop it.
That doesn't have to look old or be unstyled. But there's certainly a way that letting hypertext just sort of "exist" makes a website more honest. All things considered right now, I'd say honesty is a pretty non-traditional adjective for the web haha.
I instantly thought of Nielsen's personal homepage - http://useit.com - which has moved on to a little softer and corporate design - but still linger in the Internet Archive:
Completely forgetting that design in of itself is completely subjective and brutalism within a digital space is conveyed in an entirely different way to that of architecture.
Constantly reminded why I gladly left the design space, can't stand people who think design should be siloed or interpreted this way.
nzeid 15 hours ago [-]
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.
riversflow 15 hours ago [-]
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.
I don’t necessarily think it’s doing something wildly new and different, but I also don’t see how this style looks anything like what’s in that Wikipedia article.
martythemaniak 15 hours ago [-]
Right, hence why it's called "Neo-brutalist" and not "brutalist". It's not just plain un-styled html.
samastur 15 hours ago [-]
Neo just means new. It's not an out-of-jail card if it is completely unrelated to the old/real thing.
wpm 15 hours ago [-]
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.
wpm 5 hours ago [-]
The under-the-hood technicalities are part of it, but I didn't call it Corporate Memphis for nothing. What hallmarks of the Brutalist style do you think this exhibits, in-so-far as an architectural style can be applied to the web?
netsharc 12 hours ago [-]
Yum, soft hot dog stand!
Barrin92 14 hours ago [-]
>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' or an aesthetic at all but an 'ethic of construction' something was brutalist if it was honest, and exposed, what a thing was made of.
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 etc. Craigslist is a pretty good example of a brutalist website, so is this site, HN.
dicytea 11 hours ago [-]
Brutalism is absolutely a visual style. It's an architectural style artificially designed to look drab, raw and ugly.
If you look at brutalist buildings, it becomes obvious that its looks are the results of intentional design completely removed from its underlying "structural" concerns. You don't accidentally arrive there by refusing to think about aesthetics or by just being "honest".
Barrin92 10 hours ago [-]
You can't accidentally arrive at a building, that's by definition true for all architecture, it doesn't fall out of the sky. They also didn't design it to be ugly, that's your value judgement, not a property of the architecture.
What brutalists meant when they talked about honesty or the ethic of design is that the building should reflect on the outside, its construction, its social purpose, and its function. Obviously that's a visual choice, but not an aesthetic one.
And the fact that so many people, including you reach for the description of it as 'ugly' proves that point. They weren't trying to appeal to some established notion of taste, or some aesthetic school that prioritizes the appearance of a thing over its function but the opposite.
JimBlackwood 15 hours ago [-]
“neowhimsical” would be a more accurate description. Definitely not “brutalist”, I’m unsure if the founders of this term ever saw anything brutalist.
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
whalesalad 15 hours ago [-]
I would call this bauhaus not neobrutalism.
elevaet 14 hours ago [-]
Neobrutalism has been around long enough as a web style (ca. 2021?) that the name has already stuck, but you're totally right.
martythemaniak 15 hours ago [-]
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.
bradly 14 hours ago [-]
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.
Melonai 11 hours ago [-]
I know we're just talking about silly word definitions and etymology here, but just from my personal understanding, your site represents what I think neobrutalism "looks like" a lot better than the previous examples which are branded as neobrutalist. This is just my perspective of course.
Edit: I just saw another person say this, and it described the style of the sample sites so much better than "neobrutalism" that I just had to add this, these samples look so much more like Bauhaus!
rawgabbit 15 hours ago [-]
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?
rodolphoarruda 15 hours ago [-]
Is there a pure CSS or CSS + JS alternative that does not rely on React?
lioeters 14 hours ago [-]
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.
shimman 12 hours ago [-]
Yeah. Neobrutalism is mostly about the drop shadows + bright color palette. You don't really need a component library for what should be some basic CSS rules.
columk 7 hours ago [-]
Doesn't this tell you to stop using this style? It was fresh a few years ago when examples started popping up (Figma) but now Gemini churns it out and there are tons of templates and libraries that use the most common styling. It's not fun when there's a component library and everyone's site looks like it came from the same template.
Brutalist web design (which is really popular with artists, musicians and designers) is a beautiful style that leaves a lot of room for creativity, whereas this stuff is formulaic garbage.
brauhaus 16 hours ago [-]
Is a dark mode available? That's the bit I struggle the most with this style.
ricardobeat 12 hours ago [-]
Not everything should have a dark mode.
As a style that requires bright contrasting borders and heavy shadows, this is not particularly pleasant as a dark theme. See the “Hardbrut” in dark mode, posted elsewhere in this thread. The white “shadows” are an eye sore.
jumploops 14 hours ago [-]
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.
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.
cjs_ac 16 hours ago [-]
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.
elicash 14 hours ago [-]
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.
lateatdesk 8 hours ago [-]
I think I could use those charts and still give my site its own look. I get the Bootstrap comparison though.
Dark/light, accent colors but otherwise no customization.
Going after standardized ui. Css blob with builtin font, or no font.
Kotlin components as well
samastur 16 hours ago [-]
looks awful (to provide a genuinely felt counter view)
I'm normally quite unopinionated on UI styles, but there's something about this style that feels actively hostile to my ability to concentrate on the content. It's not so much that I don't like it, it's just uncomfortable visually to me.
I assume it's only me, but would be interested if others have the same problem.
mrweasel 15 hours ago [-]
Wouldn't web brutalism be using the browsers "native" component, as in don't style <input> elements?
julianlam 15 hours ago [-]
Ah, yes, the Brite Bootswatch skin.
No need to mess around further.
slig 16 hours ago [-]
Looks great, thanks for sharing. Do you plan to add Dark Mode and/or Shadcn theming?
ricardobayes 15 hours ago [-]
This is pretty cool however I feel it's inconsistent. Some elements have a drop shadow and some don't (Button vs Button Group).
Svoka 16 hours ago [-]
Brutalism? More like 'Back to school' vibes to be honest
accrual 15 hours ago [-]
Agree, this would probably be great UI for K-6 level educational apps.
stuaxo 10 hours ago [-]
This reminds me certain flash based websites 20 years ago.
wps 16 hours ago [-]
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.
yieldcrv 15 hours ago [-]
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
moreveal 11 hours ago [-]
[dead]
raincole 16 hours ago [-]
I just realized this is one more thing destroyed by LLM after em-dashes.
switchbak 15 hours ago [-]
This is like the high waisted, mom-pants of browser UI design.
jawngee 16 hours ago [-]
trapper keeper-ism
martythemaniak 16 hours ago [-]
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.
nzeid 15 hours ago [-]
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.
Mainly, looking at it is the problem. Decades old copy-paste editing techniques get around the typing.
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>
Maybe also could be described as Post Layervault as I don’t recall a website using so many primary colors and flat shading before they made it cool.
“Neobrutalism” might be wrong in concept, but it was coined around 2023, that ship has sailed.
> “Neobrutalism” might be wrong in concept, but it was coined around 2023, that ship has sailed.
Who cares. It's 2026. All it takes to sink a sailing ship is a few determined gents in a motorboat. It's called Post-Corporate Memphis!
How is brutalism defined in this context? When I think web brutalism I think Craigslist style sites and reduction of superfluous design elements.
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...
I agree, but maybe just not on the Netscape 1.x part. Brutalism in all of it's forms has never been about traditionalism. Even if concrete wasn't a new matieral in the 50s, you can't say something like Église Notre-Dame du Haut [0] is following any sort of traditional church architecture.
Brutalism on the web to me would focus more on honesty. An honest website shows you the processes your browser is undertaking, and how that results in rendering it's purpose. Images should load in progressively, any layout tables/divs/scaffolding shouldn't be invisible, a link/button/headings should behave/look how they "natively" do in whatever browser you happen to be using (not specifically netscape 1.x). If you're writing a cookie to the current session, I want to see that state reflected on the page. If I see a process happening I don't like, I should be able to stop it.
That doesn't have to look old or be unstyled. But there's certainly a way that letting hypertext just sort of "exist" makes a website more honest. All things considered right now, I'd say honesty is a pretty non-traditional adjective for the web haha.
[0] https://en.wikipedia.org/wiki/Notre-Dame_du_Haut
1996:
https://web.archive.org/web/19961227172043/http://www.useit....
2001:
https://web.archive.org/web/20010711195207/http://www.useit....
Constantly reminded why I gladly left the design space, can't stand people who think design should be siloed or interpreted this way.
> 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.
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
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/
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' or an aesthetic at all but an 'ethic of construction' something was brutalist if it was honest, and exposed, what a thing was made of.
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 etc. Craigslist is a pretty good example of a brutalist website, so is this site, HN.
If you look at brutalist buildings, it becomes obvious that its looks are the results of intentional design completely removed from its underlying "structural" concerns. You don't accidentally arrive there by refusing to think about aesthetics or by just being "honest".
What brutalists meant when they talked about honesty or the ethic of design is that the building should reflect on the outside, its construction, its social purpose, and its function. Obviously that's a visual choice, but not an aesthetic one.
And the fact that so many people, including you reach for the description of it as 'ugly' proves that point. They weren't trying to appeal to some established notion of taste, or some aesthetic school that prioritizes the appearance of a thing over its function but the opposite.
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.
Edit: I just saw another person say this, and it described the style of the sample sites so much better than "neobrutalism" that I just had to add this, these samples look so much more like Bauhaus!
Brutalist web design (which is really popular with artists, musicians and designers) is a beautiful style that leaves a lot of room for creativity, whereas this stuff is formulaic garbage.
As a style that requires bright contrasting borders and heavy shadows, this is not particularly pleasant as a dark theme. See the “Hardbrut” in dark mode, posted elsewhere in this thread. The white “shadows” are an eye sore.
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
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.
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.
Dark/light, accent colors but otherwise no customization. Going after standardized ui. Css blob with builtin font, or no font. Kotlin components as well
I'm normally quite unopinionated on UI styles, but there's something about this style that feels actively hostile to my ability to concentrate on the content. It's not so much that I don't like it, it's just uncomfortable visually to me.
I assume it's only me, but would be interested if others have the same problem.
No need to mess around further.
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
Since mine is just a hacky vibe-coded single css file, I might switch to yours with a custom colour scheme.
This is a very easy sell for me because everything these days is doing the infuriating gray text on gray background.