2014–present
Web Brutalism
No polish. No pretense. The raw material of the web, exposed.
Principles
Raw Honesty
Material Design polishes every surface. Swiss International makes the designer invisible. Web Brutalism makes the medium visible. HTML is not hidden behind design — it is the design.
This is not laziness. It is a philosophical position: the web has its own native materials (text, links, borders, system fonts) and they are sufficient. To add polish is to add dishonesty.
System Fonts
No Google Fonts. No custom typefaces. The browser's default fonts — Times New Roman, Courier, Georgia, Arial. These are not ugly. They are honest. They load instantly. They work everywhere. They make no promises they cannot keep.
Every custom font is a lie: 'I am special. I am different. I am worth waiting for.' System fonts say: 'I am here. I work. That is enough.'
No Transitions
Hover effects, fade-ins, smooth scrolling — all are cosmetic. They hide the truth: that a click is instant, that a page load is a replacement, that the web is a series of documents, not an app.
The `transition-speed: 0s` on this page is not a bug. It is the most radical design decision on this site. Nothing animates. Everything is immediate. The web is fast — design makes it slow.
Full Width
No `max-width`. No centered column. The content fills the viewport because the viewport is the canvas. A narrow column in the middle of a wide screen is a print metaphor. The web is not print.
Why This Style Exists
The term 'web brutalism' emerged around 2014 — borrowed from architectural Brutalism (béton brut = raw concrete). The connection: both expose their structural materials rather than covering them with finish.
It was a reaction to the homogenization of web design. By 2014, every website looked the same: hero image, centered text, hamburger menu, smooth scroll. Web Brutalism asked: what if we refused? What if the web looked like the web?
Where it appeared
- Craigslist — the accidental brutalist masterpiece. No design. Pure function. Billions of users.
- Bloomberg Businessweek (2018 redesign) — corporate brutalism. Proving that 'ugly' can be premium
- brutalistwebsites.com — the gallery that named and catalogued the movement
- Personal websites of developers — plain HTML, no CSS frameworks, maximum content
Legacy
Web Brutalism proved that design is not always an improvement. Sometimes the raw material is better than the finished product. Sometimes Times New Roman is better than a custom font. Sometimes a blue underlined link is better than a styled button.
Its influence persists in the 'anti-design' movement, in developer personal sites, in the growing rejection of design systems as corporate homogenization.
Typography
Web Brutalism uses system fonts only. No external requests. No loading delays. No FOUT. The fonts that ship with every operating system — because they are the web's native material.
The combination of monospace headings and serif body is deliberately jarring. It says: these are different things. A heading is not a bigger paragraph. It is a label.
- Monospace for headings — Courier New. The typewriter font. Mechanical, honest, undesigned.
- Serif for body — Times New Roman. The default. The font you get when you choose nothing. That is the point.
- No web fonts — zero external requests. The page loads in milliseconds. Performance is a design value.
- Large body text — 1.1rem or larger. If the font is 'ugly,' make it big enough to be confrontational.
Color
Web Brutalism uses the web's default colors. Black text. White background. Blue links. That is the palette. It is not chosen — it is inherited. These are the colors you get when you write HTML without CSS.
Any additional color is a statement. Use it sparingly — or not at all.
- Black on white — the browser default. Maximum contrast. Maximum readability. Zero decisions.
- Blue for links — #0000FF. The original hyperlink color. Not styled, not 'branded.' A link looks like a link.
- No gray — gray is a compromise. Brutalism does not compromise. Text is black or it does not exist.
- Color as exception — if color appears, it means something urgent. A red warning. A highlighted selection. Never decorative.
Shapes
Web Brutalism has one shape: the rectangle. No border-radius. No rounded corners. No soft edges. The rectangle is HTML's native shape — every element is a box. Brutalism does not disguise this.
Borders are thick (2px) and black. They do not suggest or imply — they declare. A border says: this is the edge. Here, one thing ends and another begins.
- Zero radius — always. A rounded corner is a cosmetic decision. Brutalism makes no cosmetic decisions.
- Thick black borders — 2px solid black. Visible, structural, honest. Not decorative — architectural.
- No shadows — shadows imply depth. The web is flat. Documents are flat. Pretending otherwise is a lie.
- No ornament — obviously. Ornament is the first thing Brutalism removes.
Contrast
Brutalist contrast is absolute. Black and white. On and off. There is no gradient, no middle ground, no subtlety. This is not a design choice — it is a refusal to design.
Black and white
Not near-black (#212121) and off-white (#fafafa) like Material Design. Pure #000000 and pure #FFFFFF. The maximum possible contrast. The browser default. The non-decision.
Monospace and serif
Two completely different type families used together — not for harmony but for distinction. The clash is the point. Headings and body are different things. They should look different.
Content and nothing
There is content, and there is the absence of content. No decorative elements, no atmospheric effects, no visual 'interest.' The contrast is between something (text, borders) and nothing (white space). Binary.
Rhythm
Brutalist rhythm is the document flow. HTML elements stack vertically. Paragraphs follow paragraphs. Headings precede sections. This is not designed rhythm — it is default rhythm. The browser's layout engine is the designer.
The document stack
Elements appear in source order. No CSS Grid tricks, no flexbox reordering. What comes first in the HTML comes first on screen. The structure is the design.
The hard rule
A 2px black line between sections. Not a gradient, not a fade, not an ornament. A line. The simplest possible separator. The `
` element made visible.
No animation
Transitions take 0ms. Nothing fades, slides, or bounces. State changes are instant. This creates a staccato rhythm — click, change, click, change. The web's native tempo.
Hierarchy
Brutalist hierarchy is HTML's native hierarchy. `
` is bigger than `
` is bigger than `
`. Paragraphs are body size. Links are blue and underlined. The browser's default stylesheet is the design system.
HTML heading levels
h1, h2, h3 — each smaller than the last. The browser decides the sizes. The designer does not override them (much). This is the web's built-in hierarchy, and it works.
Bold and italic
`` and `` — the only inline emphasis. No color highlights, no background marks, no custom underlines. The HTML elements that have meant 'important' and 'emphasis' since 1993.
The blue link
Blue, underlined. The most recognizable hierarchy signal on the web. It means: this text goes somewhere. No styled buttons, no 'call to action' design. A link is a link.
Space
Brutalist space is minimal and functional. 1rem margins. 1rem padding. The browser's default spacing, barely adjusted. Space is not a design material here — it is simply the gap between elements.
Full-width layout means no wasted space on the sides. The content fills the viewport. On a wide screen, lines are long. That is acceptable — the reader can resize their window. The user controls the layout, not the designer.
Light
There is no light. No shadow, no vignette, no gradient, no atmosphere. The page is a document — flat, even, unlit. Documents do not have lighting. They have ink and paper.
This is the most extreme position on this site. Even Bauhaus and Swiss International acknowledge that a page exists in space. Brutalism denies this. The page is not a surface — it is a file.
Signature Traits
Web Brutalism is identified by its refusals — the things it will not do.
No transitions (0ms)
The most radical CSS declaration on this site: `transition-speed: 0s`. Nothing animates. Hover states appear instantly. Dialogs appear instantly. The web is a series of states, not a continuous experience. Brutalism makes this explicit.
Full viewport width
`max-width: 100%`. No centered column. The content fills whatever space the browser provides. This is the web's native behavior — every other style on this site restricts it. Brutalism does not.
System fonts only
Zero external font requests. The page loads in milliseconds because it asks for nothing. Performance is not optimized — it is inherent. The fastest website is the one that makes no requests.
The anti-design position
Every other style on this site adds something to the browser's defaults. Brutalism removes. It strips away the CSS that other styles add. What remains is the web itself — HTML rendered by a browser, as Tim Berners-Lee intended.
How This Style Breaks
Brutalism breaks when it becomes an aesthetic rather than a philosophy — when 'ugly' becomes a style choice rather than a consequence of honesty.
Designed ugliness
Deliberately making things ugly is not Brutalism — it is Memphis (deliberate wrongness as play). Brutalism is not ugly on purpose. It is ugly as a side effect of refusing to make cosmetic decisions. The ugliness is not the goal. The honesty is.
Custom 'brutalist' fonts
Loading a custom monospace font to 'look brutalist' defeats the entire point. The system font is brutalist because it is already there. The moment you make a request for a font file, you have made a design decision. Brutalism refuses design decisions.
Brutalism as brand
A luxury brand using brutalist aesthetics for 'edginess.' A tech startup using raw HTML to seem 'authentic.' The moment Brutalism serves a marketing purpose, it becomes its opposite — a polished surface pretending to be raw.
Inaccessible rawness
Brutalism is honest, not hostile. Text must still be readable. Links must still be identifiable. Structure must still be navigable. The browser's defaults are accessible — Brutalism that breaks accessibility has gone too far.