Brutalism is the most divisive style on the web, and right now one of the most influential. Its softer offshoot, neobrutalism, is everywhere from startup landing pages to design tools. This guide is part of our guide to popular web design styles, and it explains both, with honest advice on when this bold look helps a brand and when it hurts.
What is brutalist web design?
Brutalist web design is a style that embraces raw, unpolished, structurally honest pages over smooth, decorated ones. It treats the browser's default look as a feature, not a flaw.
The name borrows from brutalist architecture, the mid-twentieth century movement that left raw concrete exposed rather than hiding it behind cladding. On the web, the term also nods to the raw HTML era of the 1990s, when pages were blue links, Times New Roman and unstyled boxes. Brutalist sites revive that bluntness on purpose: anti-template, anti-polish and proudly awkward.
Neobrutalism (new brutalism) is the softer, more commercial offspring that took over from roughly 2021 onwards. It keeps the rebellious energy, the loud colour, the heavy black outlines and the hard offset shadows, but it tames the chaos. Type is still chunky but readable. Layouts are still bold but navigable. The result is a style that designers can actually ship to paying customers. Where classic brutalism often fights the user, neobrutalism flirts with them.
Key characteristics
- Typography. Oversized, loud and often system default. Classic brutalism leans on Times New Roman, Helvetica or Courier; neobrutalism favours chunky geometric sans-serifs set huge.
- Colour. High contrast and unapologetic. Classic brutalism trends to stark black on white; neobrutalism uses bright, saturated primaries and acid pastels against white or black.
- Layout. Visible structure and raw grids. Elements overlap, sit at odd positions, or stack in blunt blocks. Nothing pretends to be seamless.
- Borders and shadows. The neobrutalist signature: thick solid black borders paired with hard, non-blurred offset drop shadows that look stamped on rather than softly floated.
- Motion. Deliberately blunt. Hovers snap rather than ease, shadows jump, colours invert. The interaction feels mechanical and honest.
Brutalism vs neobrutalism
The simplest distinction: classic brutalism prioritises the statement, neobrutalism prioritises the statement and the user together. Classic brutalism is raw, often monochrome or clashing, and treats friction as part of the message. It is closer to art and protest than to conversion-rate optimisation. Neobrutalism keeps the visual swagger, the thick outlines, the hard shadows, the bright blocks, but applies it to conventional, usable layouts: clear navigation, legible body text, obvious buttons. Think of classic brutalism as the punk record and neobrutalism as the polished single it inspired.
What it looks like in practice
Plenty of recognisable brands have leaned into raw or neobrutalist aesthetics. Gumroad is the poster child for neobrutalism: flat bright colours, heavy black outlines, hard shadows and chunky type across its marketing and product UI. Bloomberg Businessweek has long run brutalist-leaning editorial features with deliberately jarring layouts. Balenciaga uses stark, cold, near-brutalist minimalism to project luxury through severity. Figma has shipped playful neobrutalist experiments, and streetwear and music sites such as Supreme sit firmly in the raw, anti-polish camp.
To study the style properly, browse brutalistwebsites.com for the raw end of the spectrum, and Awwwards, CSS Design Awards and siteofsites.co for award-winning sites that apply brutalist ideas with craft.
Try it live
See this whole page in Neobrutalist style
A small swatch only goes so far. Restyle the entire page in this look, then switch it off any time to return to normal.
Pros and cons
Used with intent, this style is a memorability machine. Used carelessly, it is a usability liability. Be honest about both sides.
Strengths
- Instantly distinctive: in a sea of rounded, soft, identical templates, a raw or neobrutalist site stops the scroll.
- Strong personality signal: it reads as confident, independent and unafraid, which suits challenger brands.
- Fast to build and load: stripping decoration, gradients and heavy imagery can mean lean, quick pages.
- Memorable conversion lift for the right audience: bold, high-contrast buttons and blunt copy can drive action.
Trade-offs
- Accessibility risk: clashing colours, thin contrast and eccentric type can fail WCAG and exclude users.
- Usability friction: overlapping, unconventional layouts can confuse first-time visitors and hurt task completion.
- Polarising: the same rawness that delights one audience repels another, including conservative B2B buyers.
- Easy to get wrong: without restraint it tips from intentional and edgy into broken and amateurish.
When to use it, and when to avoid it
Reach for this style when standing out matters more than blending in, and the audience rewards boldness. It fits creative studios, fashion and streetwear, music and artists, indie software, design tools, agencies and culture or events brands. Neobrutalism in particular suits startups and challenger products that want personality without sacrificing conversion. For Australian businesses it can be a sharp differentiator: a Sydney creative agency, a Melbourne fashion label or a Brisbane events brand can use it to look braver than the polished, templated competition.
Skip it, or use only a light neobrutalist accent, if you serve trust-sensitive or conservative audiences: finance, health, legal, government, aged care or anyone with a broad older demographic. If your priority is frictionless conversion at scale, an accessible audience and obvious credibility, a cleaner style usually wins, and our guide to minimalist design is the natural opposite to weigh up. The honest rule: the bolder your brand can afford to be, the more of this style you can use.
How to do it well
- 1.Start with neobrutalism, not full brutalism, unless rawness is genuinely your brand. The softer variant gets you the impact with far less usability cost.
- 2.Keep contrast accessible. Test every colour pair against WCAG AA (4.5:1 for body text). Loud and legible can coexist; loud and illegible cannot.
- 3.Make interactive elements obvious. Buttons should look pressable, links should look clickable. Bold styling must not hide function.
- 4.Use a strict system. Pick two or three saturated colours, one heavy border weight and one shadow offset, then repeat them everywhere. Consistency reads as intentional.
- 5.Protect readability. Set body copy at a comfortable size and line length even when headings go enormous.
- 6.Test on real users and on mobile. Overlapping layouts and huge type can collapse on small screens, so verify task completion before launch.
Common mistakes
- Mistaking broken for brutalist. Low contrast, clashing colours and chaotic layouts that fail accessibility are not edgy, they are exclusionary. Intent is the difference.
- Inconsistent borders and shadows. Mixing border weights and shadow directions kills the stamped, deliberate look that makes neobrutalism work.
- Sacrificing the conversion path. Burying the call to action under style, or making buttons ambiguous, trades sales for aesthetics.
- Copying the trend with no reason. Applying neobrutalism to a brand it does not suit, just because it is fashionable, ages badly and confuses your audience.
Key takeaways
- Brutalist web design is a raw, deliberately unpolished style; neobrutalism is its softer, usable, commercially friendly evolution.
- The look is built on loud type, high-contrast colour, visible structure, thick black borders and hard offset shadows.
- It excels at standing out and signalling a confident, independent brand, but carries real accessibility and usability risk.
- Best for creative, fashion, music, events and challenger tech brands; risky for finance, health, legal and conservative audiences.
- Do it well by keeping contrast accessible, interactions obvious and the whole thing on a strict, consistent system.