What Is Web Brutalism?
Web brutalism is a design approach that embraces raw, unfinished, and deliberately stripped-back aesthetics. Inspired by the Brutalist architecture movement of the 1950s-70s — think exposed concrete, massive forms, and unapologetic structural honesty — web brutalism rejects polish, convention, and the idea that websites need to look 'nice' to be effective.
Brutalist websites often feature default system fonts, minimal or no CSS styling, raw HTML structures, stark color choices (often just black and white), and a general refusal to follow established design patterns.
Key Principles
1. Structural Honesty
Show the bones. Don't hide the underlying structure behind layers of styling. If it's a link, it looks like a default link. If it's a heading, it's just a heading. The HTML is the design.
2. Anti-Convention
Brutalism deliberately breaks expected patterns. Unconventional navigation, unexpected layouts, and visual choices that challenge user assumptions. It's a statement against homogeneity.
3. Content Over Chrome
The content is the star. All visual decoration is either stripped away or made intentionally confrontational. There's nothing between the user and the information.
4. Performance by Default
An underappreciated benefit: brutalist sites are often incredibly fast. Minimal CSS, no JavaScript frameworks, no heavy images — just content delivered at the speed of HTML.
History & Origins
Architectural Brutalism emerged in post-war Europe as architects like Le Corbusier and Alison & Peter Smithson embraced raw concrete ('béton brut') and honest materials. The movement was about function, affordability, and rejecting decorative facades. Web brutalism translated this philosophy to the internet starting in the mid-2010s, championed by sites like brutalistwebsites.com, which catalogued the growing movement.
Modern UI Applications & Examples
- Craigslist — Perhaps the most famous accidentally brutalist website. Functional, fast, ugly, and used by millions daily.
- Bloomberg — Bloomberg's website has experimented with deliberately brutalist layouts that challenge corporate design norms.
- Yale School of Art — The student-edited site is a chaotic, ever-changing brutalist collage that's become legendary in the design world.
- Hacker News — Minimal styling, dense information, system fonts. Brutalism as utility.
When to Use It
Brutalism works for art projects, experimental portfolios, statements of creative identity, developer tools, and situations where speed and content clarity outweigh visual comfort. It's also effective for brands that want to signal authenticity and independence.
When Not To
Most commercial products, e-commerce sites, and anything targeting mainstream audiences. Brutalism can confuse, frustrate, or alienate users who expect conventional navigation and visual hierarchy. Accessibility is also a significant concern — many brutalist sites fail WCAG standards.
How to Apply It
- Start with semantic HTML and minimal CSS
- Use system font stacks instead of custom fonts
- Embrace default browser styles for links, lists, and forms
- Limit your palette to black, white, and one accent color
- Let content density speak for itself — no padding-heavy card layouts
/* Brutalist base */
body {
font-family: monospace;
max-width: 70ch;
margin: 2rem auto;
padding: 0 1rem;
background: #fff;
color: #000;
}
a {
color: blue;
text-decoration: underline;
}
a:visited {
color: purple;
}
Related Styles
See also: Neobrutalism, Minimalism in Web Design, Cyberpunk UI