This is a document. Not an app. Not an experience. Not a journey. A document. It contains text, links, borders, and structural honesty. Nothing more is needed. Nothing more is honest. The raw, undecorated, sometimes uncomfortable reality of the page as delivered by the browser.
The typeface is the interface. Fonts are chosen for rawness, mechanical quality, or association with code and early computing. No curated pairings. No decorative serifs. No ligatures. Every glyph earns its place.
body { font-family: monospace; transition: none; border-radius: 0; }Drawn from two traditions: stark monochromes of raw concrete architecture, and default browser colors of the unstyled early web. Palettes are intentionally limited, high-contrast, and avoid harmonious relationships.
Each component is a rectangle containing text. The borders are visible because structure should not be hidden. Hover states snap immediately. No easing. No duration. No border-radius.
Pages reveal their underlying document hierarchy with minimal styling, treating raw HTML elements as the primary visual language rather than hiding them behind CSS decoration.
structure coreBlack text on white backgrounds dominates, with hyperlink blue often the only color, echoing the unstyled default browser aesthetic of the early web.
color contrastPages prioritize content density over whitespace, with long columns of text, lists, and links presented without visual relief. Think Craigslist, not Apple.com.
layout densityClashing sizes, misaligned elements, jarring color contrasts, and unconventional layouts deployed deliberately to challenge user expectations and provoke thought.
intent anti-designPhotography, illustrations, and iconography are minimized or eliminated entirely. When images appear, they are unstyled, full-width, or crudely placed.
media absenceStructural dividers like hr tags, table borders, and CSS outlines are left visible or exaggerated, making the page skeleton apparent to the viewer.
borders skeletonAnimations are stepped, not eased. States snap, they do not transition. Movement is mechanical, not organic. Every visual effect reinforces the raw, digital nature of the medium.
Use yellow highlights for attention. Use red marks for warnings. Use blue marks for links.
Beautiful gradients, smooth animations, rounded corners, hero images, raw structure
Brutalist Web Design operates under strict constraints. These are not suggestions. They are structural requirements. Violating them produces something else -- possibly Neubrutalism, possibly conventional design, but not this.
Maintain the raw, undesigned feel and improve page load performance. The typeface should feel mechanical, not curated.
Default link colors, visible focus outlines, native form controls all reinforce the honest aesthetic. The browser is a collaborator.
Borders, horizontal rules, and table grids are visible design features. The skeleton is the surface.
Fit meaningful information into every visible area of the viewport. Treat whitespace as a luxury, not a requirement.
Rounded corners soften the raw edges that define the aesthetic. All corners remain sharp at 0px. Rectangles only.
Movement and easing contradict the static, document-like nature. Hover states snap instantly between visual states. No duration. No easing.
If the design needs a photograph to communicate, the typography and structure have failed. Words and borders are sufficient.
Concealing navigation behind icons contradicts the transparency philosophy. All links should be visible at all times.
Tables display data. Borders make cells visible. Headers are inverted. The grid structure is the design. No zebra striping. No rounded cells. Just information in rectangles.
| Property | Brutalist Value | Conventional Value | Rationale |
|---|---|---|---|
| border-radius | 0 | 4px - 12px | Sharp corners expose the rectangular truth of the box model |
| transition | none | 0.2s - 0.4s ease | States should snap; movement implies dishonesty about discrete changes |
| box-shadow | none | 0 2px 8px rgba() | Blur creates false depth; the screen is flat and should remain flat |
| font-family | monospace | sans-serif stack | Fixed-width characters impose mechanical rhythm and resist beautification |
| max-width | none / 100% | 1200px centered | The viewport is the document; constraining width is an artificial boundary |
| color palette | 2-3 colors | 5-8 harmonious | Harmony is decoration; dissonance is honest |
| images | 0 | 10-50+ | If the text cannot communicate alone, the design has failed |
| JavaScript | 0 KB | 200-2000 KB | HTML and CSS do all the work; JS dependency is structural dishonesty |
| Site | Weight | HTTP Requests | Load Time | JS Frameworks |
|---|---|---|---|---|
| This Document | ~15 KB | 3 | <0.5s | 0 |
| Craigslist | ~59 KB | 12 | ~0.8s | 0 |
| Hacker News | ~30 KB | 5 | ~0.6s | 0 |
| Average News Site | ~6,200 KB | 287 | ~8.7s | 3-5 |
| Average SPA | ~3,500 KB | 95 | ~4.2s | 1-3 |
Native browser controls. No custom components. No JavaScript enhancements. The browser provides the interface. The document provides the structure.
A raw, confrontational digital aesthetic descended from Brutalist architecture. It celebrates exposed structure, rejects ornamentation, and treats the HTML document itself as the primary design element.
Neubrutalism re-introduces bold color, thick borders, and hard shadows as stylistic flourishes. Pure Brutalist Web Design embraces the raw, undecorated reality of the document without adding decorative elements back in.
When done properly, yes. High contrast, semantic HTML, visible focus states, and zero JavaScript dependency make Brutalist sites inherently accessible. The content is the interface.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- No external CSS -->
<!-- No JavaScript -->
<!-- Just HTML -->
</head>
<body>
<h1>Content</h1>
<p>The document is the design.</p>
</body>
</html>In the beginning, the Web was Brutalist. There were no stylesheets. There were no images. There was text and there were links. The document was the design, and the browser was the renderer. Everything since has been decoration layered on top of that honest foundation.
Links organized by category. Dense. Useful. No descriptions needed. The URL communicates. Click or move on.
This document was built with HTML and CSS. There is no build step. There are no dependencies beyond two Google Font families. There is no tracking, no cookies, no analytics. View source to verify.
Fonts: Archivo Black (headings), Space Mono (body), IBM Plex Mono (metadata) — loaded via Google Fonts.
Colors: 12 values. 6 monochrome. 4 web-safe primaries. 2 browser defaults. Zero gradients.
Principles: Function dictates form. Structural honesty. Content supremacy. Rejection of convention. Performance as ethics.