Brutalism Design: Ugly on Purpose, Readable by Design
Brutalist websites look broken on purpose. Break one yourself, then learn the 5 rules that keep raw design usable and when it works for a client.
Brutalist web design is a raw style that shows a page's structure on purpose: default fonts, thick borders, hard shadows and blue links. It works when five rules keep it readable, which this page covers with a demo you can break.
Brutalism design is a raw web style that shows a page's structure on purpose: default fonts, thick borders, hard shadows and almost no decoration, so the content does all the talking.
Break this page
This is RAW.SHOP, a tiny brutalist shop. Tap any block to break it. Then try to find the price.
You can still find the price and the button. That's the trick: brutalism is loud, but the content stays obvious.
Where it came from
- 1950s–70s Brutalist architecture uses raw, exposed concrete (béton brut). Honest materials, no disguise.
- 1990s The early web is accidentally brutalist: default HTML, grey backgrounds, blue links.
- 2014 Pascal Deville starts brutalistwebsites.com and gives the look a name.
- 2020s Neo-brutalism arrives: bright colours, black outlines and hard shadows, ready for real products.
The 5 rules
1. Show the structure
Borders, grids and boxes stay visible. Don't hide the skeleton, celebrate it.
2. Use system or default fonts
Times, Arial, monospace. Brutalism isn't about a fancy typeface. It's about what the type says.
3. Hard shadows, zero blur
Depth comes from offset black shadows, never soft drop shadows.
Hard shadow ✓
Soft shadow ✗
4. Links look like links
Blue and underlined. Nobody has to guess what's clickable: like this.
5. Raw, not unreadable
Ugly is allowed. Unreadable isn't. Keep contrast high and the hierarchy clear.
High contrast, clear text ✓
Noisy and unreadable ✗
Do vs don't
Make one thing obvious per screen: the headline, the price, the button. Let the rawness frame it.
Use "brutalism" as an excuse for broken layouts, tiny grey text or buttons that don't look like buttons.
5 sites to study
- Brutalist Websites: the archive that named the movement. Hundreds of examples, from art projects to shops.
- Brutalist Web Design: a short manifesto arguing brutalism is about usability, not ugliness.
- Gumroad: neo-brutalism done for a real product. Bright, bold and very clear.
- Hacker News: barely any styling, and huge daily traffic. Content wins.
- Craigslist: accidental brutalism that has survived decades of "redesign it" advice.
When to use it for a client
Use it when the brand wants to stand out and feel honest: indie products, creative studios, fashion drops, tech tools, zines and portfolios.
Skip it when the audience needs reassurance more than attitude: banks, healthcare, luxury and most B2B. A neo-brutalist accent (outlines and hard shadows on cards) can still work there.
What this means for your brand
Whether a style suits a brand is a design decision first. pSkyro Labs makes that call in UI/UX design and in branding work. More in the series: glassmorphism and pixel art.
Try it yourself
Brutalism strips a site back to its bones. If the bones are good, that's all you need.
FAQ
What is brutalism in web design?
Brutalist web design is a raw, unpolished style that shows the structure of a page on purpose: default fonts, thick borders, hard shadows, blue underlined links and almost no decoration. It puts content first.
Where does the name brutalism come from?
From brutalist architecture of the 1950s to 1970s, named after béton brut, French for raw concrete. Like those buildings, brutalist websites show their materials instead of hiding them.
What is neo-brutalism?
Neo-brutalism (or neubrutalism) is the friendlier, product-ready version: bright flat colours, thick black outlines and hard offset shadows, but with tidy layouts and clear hierarchy.
Is brutalism bad for UX?
Not when it's done well. Brutalism ignores decoration, not usability. Keep strong contrast, clear headings and obvious buttons, and it can be faster and easier to use than a polished site.