martin’s homepage
last updated: tuesday. no cookies, no tracking.
- essays on plain websites
- the file archive
- guestbook (visited)
| file | size | date |
| notes.txt | 2 KB | 07/14 |
| photos.zip | 14 MB | 07/02 |
Web Brutalism
Contested label
Practitioners disagree about scope: the strict reading is 'raw browser materials, honest structure' (by analogy to béton brut); the loose reading lumps in any deliberately ugly site. This entry takes the strict reading and files the loud bordered look under Neobrutalism.
also called brutalist web design, raw web, default HTML look
Web Brutalism treats the browser's own materials as the finished surface: default or system fonts, unstyled-looking links, visible document structure, plain borders and horizontal rules, and density over polish. Nothing pretends to be anything else — no gradients imitating glass, no shadows imitating depth. At its best it's honest and fast (Craigslist, Hacker News, early-web personal sites); at its worst the label gets stretched over anything unpolished.
Scope: Distinct from architectural Brutalism (exposed concrete and mass — the analogy's source), and from Neobrutalism (a styled, saturated, thick-border graphic look that is anything but default). The nostalgic table-and-GIF personal-site look is Vernacular Web, a separate (future) entry.
If you called it…
…you meant Web Brutalism.
What makes it this — the defining signals
- Browser-default materialsTypography
Times/system serif or monospace, default-blue underlined links, visited-purple — the stack looks unstyled even when it's deliberate.
- Exposed document structureLayout & composition
The page reads as a document: headings, lists, tables, and <hr> dividers in source order — structure IS the layout.
- Zero decorative renderingDepth & light
No shadows, gradients, rounded corners, or imitation materials; at most 1px solid borders. Flat white (or single-color) ground.
- Utility-first densityLayout & composition
Information is packed tight and loads instantly — the aesthetic argument is speed and honesty, not beauty.
Style brief — paste into your agent
Create the page using strict Web Brutalism. Defining signals: browser-default materials (Times/system serif or monospace, default-blue underlined links); exposed document structure — headings, lists, tables, horizontal rules in source order; zero decorative rendering (no shadows, gradients, or rounded corners; at most 1px solid borders on a plain ground); utility-first density that loads instantly. Keep monospace vs serif and all-caps accents flexible. Use semantic HTML with minimal CSS — default UA styles are the design; resist resets that soften them. Do not drift into Neobrutalism; the decisive difference is that nothing here is styled to look raw — saturated blocks, thick designed borders, and offset shadows would make it a graphic costume. Preserve readable text sizes, focus visibility, and honest link affordances (underlines stay).
Often confused with Neobrutalism
The same little app, rendered in both styles — only the style changes, so the difference you see IS the difference.
Welcome back
Pick up where you left off.
Web Brutalism
Welcome back
Pick up where you left off.
Web Brutalism
This is Web Brutalism because the page is genuinely built from browser defaults — system type, blue links, bare structure, no decorative rendering at all.
It would become Neobrutalism if the rawness were styled: saturated color blocks, thick uniform black borders, hard offset shadows, and chunky display type — a designed graphic language, not defaults.
Full style DNA
Typography
Times/system serif or monospace, default-blue underlined links, visited-purple — the stack looks unstyled even when it's deliberate.
Many brutalist sites swap to monospace or shouting caps for flavor; others stay pure serif. Both count.
Layout & composition
The page reads as a document: headings, lists, tables, and <hr> dividers in source order — structure IS the layout.
Information is packed tight and loads instantly — the aesthetic argument is speed and honesty, not beauty.
Depth & light
No shadows, gradients, rounded corners, or imitation materials; at most 1px solid borders. Flat white (or single-color) ground.
Color & contrast
Saturated color blocks, thick designed borders, and hard offset shadows are a costume of rawness — that's Neobrutalism.
In code — optional starting points
The brief above is framework-neutral; these are concrete handles if your stack matches.
| HTML | <h1>, <hr>, <table>, <ul> with UA default styles | The materials ARE the elements |
| CSS | font-family: 'Times New Roman', serif; a { color: #0000ee; } a:visited { color: #551a8b; } | If you must write CSS, restate the defaults |
Accessibility & misuse
- Brutalism is accidentally accessible — semantic structure, honest links, no contrast-eating decoration — as long as text sizes stay readable and density leaves tap targets big enough.
- Default-blue on white passes contrast; keep the default focus outline (removing it would be the one truly anti-brutalist move).
- Dense tables need proper headers/scope for screen readers — visual rawness doesn't excuse structural rawness.
Origin
Named by analogy to architecture's béton brut ('raw concrete'); the web usage spread in the mid-2010s through Pascal Deville's brutalistwebsites.com and essays like Smashing Magazine's 'split personality of brutalist web development', as a reaction against the sameness of polished startup sites.