Brutalist web design is a deliberate refusal — raw system fonts instead of polished grids, jagged edges instead of tidy alignment, and primary colors clashing on purpose. It exists to stop a scrolling thumb between two sites that otherwise look the same. But treat the style as nothing more than “make it ugly” and the result isn’t bold, it’s just a broken-looking site that fails at its actual job.
1. Why looking ugly became a strategy
Most sites lean on nearly identical component libraries now, and the effect has been a quiet flattening of how the web looks. Rounded corners, a card with a shadow, generous whitespace, a hero image — the same recipe repeats until every homepage starts to blur into the last one. Inside that sameness, brutalism does the opposite on purpose, and an interface that refuses to look comfortable becomes a strong signal that a brand is willing to be experimental, or even a little confrontational.
The name itself comes from architecture. Mid-century brutalist buildings left raw poured concrete exposed instead of finishing it — literally “béton brut,” raw concrete — and that same instinct for showing structure and material without disguise carried over to the browser. A grid system smoothed into invisibility, or a shadow softened until it barely registers, has a visual effect; brutalist web design swaps that effect for the raw form of the HTML element itself, unhidden.
2. Where brutalism backfires
The problem is that this style regularly collides with usability. Low contrast, tiny type, and unpredictable navigation make real information-finding harder, and that trade-off gets separated from “visual interest” the moment a site has a real commercial job to do. Apply brutalism at full strength to a page that needs to end in a purchase or a form submission, and conversion rate is at serious risk.
In practice, brutalism tends to succeed in territory where a commercial conversion isn’t the top priority. Experimental writer portfolios, arts and culture event pages, campaign-landing pages built to broadcast a brand’s attitude — on those pages, “impression” outranks “findability,” and low contrast or an unconventional layout reads as personality rather than a defect. The moment search and comparison matter, or checkout is the core flow — e-commerce, finance — the same elements turn into obstacles instead.
3. Keeping the raw look usable
Brutalism that actually works in practice is rarely unstructured at all. Underneath the rough surface there’s almost always a consistent grid and a clear information hierarchy, in the same way a well-run interface tunes its own density to how familiar the audience already is with the product. Brutalism has to draw that same line between raw impression and real usability before it ships, or the result collapses under its own attitude.
The most common mistake is copying the surface look of a reference brutalist site while skipping the grid discipline and accessibility baseline hiding underneath it. Match only the jagged edges and the system font while quietly dropping real color-contrast ratios and clickable target sizes, and the result isn’t a distinctive site — it’s just an uncomfortable one to use.
Surface
Low contrast, deliberately clashing alignment, unornamented system fonts
Actual structure
A consistent grid, a clear hierarchy, and real color values that still clear accessibility baselines
4. Which sites it actually suits
Auditing a brutalist option starts with the page’s job, not its look. If it’s a destination-driven site where a user needs to find, compare, and decide on something, the downside of this style outweighs the upside. If the whole point is to project a brand’s attitude or its appetite for experimentation, the same friction can work in the design’s favor.
Destination-driven site
E-commerce, finance, booking — low contrast and clashing layout translate directly into lost conversions
Impression-driven site
Portfolios, campaigns, culture pages — the raw attitude itself becomes the brand message
A checklist before you apply it
Does this brand actually need to communicate an experimental, confrontational impression?
Do the pages where conversion matters — checkout, sign-up — need this style applied at all?
Does the low contrast still clear real accessibility color values, not just a visual approximation?
Unlike the surface look, is the underlying grid and information hierarchy clearly engineered?
Is this brand’s target audience the kind of user who reads this look as fresh rather than broken?
💡 Pro tip — don’t apply brutalism at full strength to pages where conversion matters, like checkout or sign-up. Even where contrast looks intentionally low, the real color values still need to clear accessibility standards.
5. Closing thoughts
Brutalist web design is one of the fastest ways to make a brand memorable when it’s used well, but applied without any judgment it becomes decoration that sacrifices usability for nothing in return. Before reaching for this style, get clear on what the ugliness is actually meant to communicate — the point was never the ugliness itself. Browsing the Brutalist Websites archive is a fast way to get a feel for how differently the style can actually be executed.
Design Daily Life · Notes on design, daily