RAW CONCRETE FOR THE WEB ★ FORM = STRUCTURE ★ RAW CONCRETE FOR THE WEB ★ FORM = STRUCTURE ★ RAW CONCRETE FOR THE WEB ★ FORM = STRUCTURE ★ RAW CONCRETE FOR THE WEB ★ FORM = STRUCTURE ★ RAW CONCRETE FOR THE WEB ★ FORM = STRUCTURE ★ RAW CONCRETE FOR THE WEB ★ FORM = STRUCTURE ★
// A DESIGN STYLE — DOCUMENTED
BRUT
ALISM
Raw concrete for the web ★ Since 2014 ★ Zero rounded corners
0px
Border radius
3px
Min border width
0blur
Drop shadows
SCROLL TO CONTINUE

// SCENE 01 — THE QUESTION

Every screen you touch
is engineered to feel
frictionless.

Rounded corners so you don't feel the edge. Soft shadows so nothing has weight. Gradients so the flatness doesn't show. Every choice is about removing discomfort.

Brutalism is a question about what you lose when design stops being honest.

What if the edges are supposed to be felt? What if the structure is supposed to show? What if making design comfortable is the most dishonest thing you can do?

The rough edge is not a failure. It's a decision.

"We weren't making bad design.
We were refusing to pretend."

// SCENE 02 — HOW WE GOT HERE

From Concrete
to Code.

Brutalism didn't start on the web. It started in Marseille, in 1952, with a pour of raw concrete. Follow the arc.

1952

Le Corbusier leaves the formwork marks

The Unité d'Habitation opens in Marseille. Corbusier keeps the imprints of the wooden boards used to shape the concrete pour. No cladding. No plaster. The raw texture IS the surface. 'Béton brut' — raw concrete. He calls this honesty. Architecture that shows how it was made.

1963

Brutalism becomes institutional

Governments and universities commission massive concrete structures across Britain, America, and the Eastern Bloc. Boston City Hall. The Barbican. Yale's Art and Architecture Building. The style says: I am permanent, honest, and I don't care if you find me beautiful.

1980

The backlash — "eyesore"

Post-modernism arrives with ornament and color. Brutalist buildings are called prison-like, inhuman, ugly. Several are demolished. The architecture world learns a brutal lesson: honesty without warmth is alienation. This paradox will follow the aesthetic into its web reincarnation thirty years later.

2014
★ THE MOMENT

Pascal Deville names the web movement

A Swiss designer launches brutalistwebsites.com — a gallery of websites that refuse to look like websites are supposed to look. Bare HTML. Default fonts. Visible tables. No polish. He frames these as intentional aesthetic choices, not failures. The word 'brutalism' borrows from architecture and sticks instantly.

2017

Template fatigue reaches critical mass

The web is drowning in identical sites: same Lato, same hero section, same card grid, same soft shadows. Dribbble is a mood board of comfortable sameness. Designers start asking what was lost when everything became a template. The brutalist answer: rawness, personality, surprise — the things no template delivers.

2021

Gumroad goes neo-brutal — and the internet argues

Sahil Lavingia redesigns Gumroad with thick black outlines, solid offset shadows, and zero gloss. Design Twitter erupts. Half call it childish. Half call it the most confident brand move in years. Overnight, 'neo-brutalism' enters the mainstream UI conversation. The anti-template has become a template.

// SCENE 03 — THE PEOPLE

A Swiss designer.
A gallery. A name
that stuck.

Picture this: 2014. Pascal Deville, a Swiss designer, starts collecting websites that break the rules. Not by accident — intentionally. Sites that use tables as layout. Sites with default browser fonts. Sites where the HTML structure IS the visual design.

He calls the gallery 'brutalistwebsites.com' — and borrows the architectural term deliberately. Because like concrete buildings that show their pour marks, these sites show their structure.

But behind the gallery is a feeling many designers recognize: frustration. The web in 2014 is drowning in identical sites. Lato at 16px. Card grids. Hero sections with stock photography. Blue CTAs. Every client wants what every other client has.

Brutalism is the refusal. 'I know what you expect, and I'm choosing something else.' Not ignorance of the rules — mastery of them, followed by deliberate rejection.

"Expertise wearing a mask of naivety.
The rough edges are the point."

2014
The gallery launches
1000+
Sites documented
0px
Rounded corners kept

// SCENE 04 — THE DESIGN DNA

Four Signals.
All Deliberate.

Every element of brutalist design is a choice to show what most design hides. Here's what you're actually looking at.

SIGNAL 01

THICK BORDERS

Architectural structure — the load-bearing wall you weren't supposed to see

3px–5px solid black outlines on every element. Not as decoration but as the fundamental unit of the system. In most modern UI, borders are optional finishing touches. In brutalism, the border IS the design. Remove it and the whole thing collapses.

"Physical. Blunt. Like pressing a real button, not a glass one."
1px — weak
Element
3px + shadow — brutal
Element
5px + yellow — maximum
Element
SIGNAL 02

OFFSET SHADOWS

Letterpress printing, rubber stamps, hand-stamped zines

A solid drop-shadow with zero blur radius: box-shadow: 6px 6px 0 black. The shadow has a crisp hard edge. The element looks physically offset from the page — like a rubber stamp slightly misaligned, or a stacked card you could pick up. You cannot achieve this by accident. You have to want it.

"Tactile. Stackable. Like it would make a satisfying thunk if dropped."
box-shadow anatomy
BUTTON
offset: 8px 8px · blur: 0 · color: #000
The zero-blur is everything.
SIGNAL 03

GROTESQUE TYPE

Early web defaults, newspaper printing, protest signs

Heavyweight grotesque sans-serifs (Archivo Black, Helvetica 900, Arial Black) or deliberately default system fonts, set at sizes that feel too large. No kerning elegance. No optical sizing. Just letters, enormous, demanding to be read. In brutalism, typography is not about beauty — it's about presence.

"Loud. Authoritative. Slightly aggressive. Impossible to scan."
WE
MAKE
LOUD
TYPE.
Archivo Black · No kerning adjustment.
SIGNAL 04

CLASHING COLOR

Risograph printing, zines, protest graphics, Bauhaus taken too far

Colors that don't harmonize — they collide. Bright yellow next to electric blue next to raw black. Two or three colors, max, and those colors fight each other for attention. The palette is not chosen for comfort; it's chosen for signal. "I am not trying to make you comfortable. I am trying to make you notice."

"Energetic. Slightly anxious. Impossible to ignore."
BLACK
YELLOW
BLUE

// SCENE 05 — THE CANON

The Canonical
References

These are the artefacts that define the movement. Study them before you design.

2014
brutalistwebsites.com

Pascal Deville's gallery — named and defined the web movement. The canonical starting point for any brutalism research.

2021
Gumroad

Sahil Lavingia's rebrand took neo-brutalism mainstream. The site that made design Twitter argue for a week.

ongoing
Bloomberg Businessweek

Editorial design that embraced confrontational layout. Proof that brutalism works at journalistic scale.

2017
Balenciaga.com

Luxury fashion adopting brutal directness — the ultimate contradiction. When the most expensive brand refuses to be pretty.

1995–now
Craigslist

The original brutalism: unintentional, perfect, permanent. A site so honest it became a cultural institution.

// WHERE IT WORKS

Creative portfoliosDesign tools & SaaSIndie productsArt & cultureMusic & eventsAnti-corporate brands

// SCENE 06 — THE VERDICT

The web lied to you
about what design
is for.

Design is not decoration. It is decision. Every smooth corner, every soft shadow, every harmonious palette — each is a choice to prioritize comfort over honesty. Brutalism makes the opposite choice. And when it works, it works completely: a site that looks like nothing else, says what it means, and doesn't apologize for it.