Web Brutalism — When Ugly is Beautiful

The Origins of Brutalist Web Design

Brutalism draws its name — and its ethos — from the mid-20th-century architectural movement that championed exposed concrete, raw materials, and honest structural expression over ornamental deception. Architects like Le Corbusier and Alison and Peter Smithson rejected the notion that buildings should hide their function behind decorative facades. Instead, they let the structure speak.

Web brutalism applies the same philosophy to the browser. It strips away the gradients, shadows, rounded corners, and smooth animations that have come to define "modern" web design. In their place: raw HTML, default system fonts, intentional asymmetry, and unapologetic typography. The result can be jarring — and that is precisely the point.

The movement began gaining traction in the mid-2010s as a reaction against the homogenisation of the web. Sites like Craigslist, Wikipedia, and Drudge Report became unlikely references precisely because they refused to conform to prevailing design trends. They loaded fast, communicated clearly, and felt honest. What started as a fringe aesthetic in portfolios and experimental publications has since evolved into a legitimate design philosophy with dedicated showcases, conferences, and a growing body of critical analysis.

The Philosophy: Raw, Honest, Functional

Brutalist web design rests on three core principles:

Structural Honesty

Every element on the page should serve a purpose. If a border is there, it should visibly contain something. If text is large, it should be because that content matters most. Brutalism abhors decoration for decoration's sake. CSS is used to clarify content hierarchy, not to obscure it behind visual noise.

Default-Style as a Choice

Using the browser's default font-family, button styling, or input appearance is not laziness — it is a deliberate aesthetic decision. System fonts like system-ui, -apple-system, or monospace carry a specific visual weight. They feel familiar yet distinctive. When every other site is using Inter or Figtree, default Helvetica becomes a statement.

Content-First Hierarchy

In brutalist design, typography alone establishes information hierarchy. Font size, weight, line-height, and spacing carry the entire burden of indicating what is important. There are no decorative hero images masking weak copy. No gradient overlays propping up mediocre headlines. The content stands on its own.

Famous Examples That Prove the Point

Some of the most-visited websites on the internet are brutalist by accident. Others embrace it by design.

Lingua Franca (the literary magazine) uses a single column of text, default monospace, and no images whatsoever. It loads instantly on any connection and communicates its editorial voice before a visitor reads a single word.

Hundred Rabbits is an open-source art collective whose site uses raw HTML, inline SVGs, and zero JavaScript. The experience is tactile and immediate, reflecting their ethos of low-impact, durable creative tools.

Bloomberg's "The God View" interactive article employed stark black-and-white brutalism to convey the scale of global financial surveillance. The design was not an accident — it was a rhetorical device that made the content unsettling and unforgettable.

Craigslist remains the most successful brutalist site in history. With almost no visual redesign in over two decades, it continues to serve billions of page views per month. The lesson: when your UX is ruthlessly functional, aesthetics become secondary to utility.

When to Use Brutalist Design

Brutalism is not for every project. We advise clients in the following scenarios where it excels:

Brutalism sends a clear signal: "We do not follow trends. Our value is in what we say, not how we dress it up." If that aligns with your brand, brutalism is worth serious consideration.

Accessibility in Brutalist Design

A common critique of web brutalism is that it sacrifices accessibility for aesthetics. This criticism is valid when brutalism is misunderstood as "anything goes." True brutalism strips decoration — not function.

Contrast Ratios Are Not Negotiable

Raw white backgrounds with thin grey text may look edgy, but they fail WCAG AA standards. A brutalist site should still maintain a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. Default black-on-white remains the most accessible combination in existence.

Keyboard Navigation and Focus States

Brutalism's embrace of default browser styles works in accessibility's favour. Default :focus outlines are highly visible and consistent across platforms. Resist the urge to remove them with outline: none. If you must customise focus indicators, make them more prominent — never less.

Semantic HTML

Brutalism's structural honesty extends to the markup. Use meaningful headings (<h1> through <h6>), proper landmark elements (<nav>, <main>, <aside>), and descriptive link text. A brutalist site with clean semantics is more accessible than a polished site with a <div> soup.

Readable Font Sizes

Small text may look editorial, but it excludes users with visual impairments. A baseline of 16px (1rem) is the minimum. For long-form reading, 18–20px with generous line-height (1.5–1.7) dramatically improves readability. Brutalism can be loud without being illegible.

Implementation Techniques with CSS

Here is how we implement brutalist design at WEIRDSOFT while maintaining production-grade quality.

System-Font Stack

:root {
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}

body {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: 70ch;
  padding: 1rem 2rem;
  margin: 0 auto;
  color: #1a1a1a;
  background: #fafafa;
}

The max-width: 70ch constraint is a brutalist staple — it caps line length for readability without wrapping content in extraneous container divs.

Raw Button Styles

button, .btn {
  font: inherit;
  padding: 0.5rem 1.25rem;
  border: 2px solid #1a1a1a;
  background: transparent;
  color: #1a1a1a;
  cursor: pointer;
  transition: none; /* No smooth transitions */
}

button:hover, .btn:hover {
  background: #1a1a1a;
  color: #fafafa;
}

button:focus-visible, .btn:focus-visible {
  outline: 3px solid #1a1a1a;
  outline-offset: 2px;
}

Notice the transition: none. True brutalism rejects the ubiquitous "subtle hover transitions" trend. Changes are instant, binary, and tactile.

Asymmetric Grid Layout

.layout {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1.5rem;
}

/* Intentional asymmetry: break the grid for emphasis */
.feature-block {
  grid-column: 1 / -1;
  border: 3px solid #1a1a1a;
  padding: 2rem;
  margin: 1rem 0;
}

Asymmetric grids create visual tension. Used intentionally, they guide attention toward important content without needing images or colour.

Raw Form Elements

input, textarea, select {
  font: inherit;
  padding: 0.5rem 0.75rem;
  border: 2px solid #ccc;
  border-radius: 0;
  background: white;
  appearance: none;
  -webkit-appearance: none;
}

input:focus, textarea:focus, select:focus {
  border-color: #1a1a1a;
  outline: none;
  box-shadow: none;
}

Square corners, thin borders, no shadows. The focus state is a crisp colour change — nothing more.

Bordered Sections as Visual Structure

section {
  border-top: 1px solid #d4d4d4;
  padding: 3rem 0;
}

section:first-child {
  border-top: none;
}

article blockquote {
  border-left: 4px solid #1a1a1a;
  margin: 2rem 0;
  padding: 1rem 2rem;
  font-size: 1.25rem;
  font-style: italic;
}

In the absence of background colours or decorative imagery, borders become primary structural elements. They separate content regions with brutal clarity.

Client Case Studies: Brutalism in Practice

Case Study 1: Developer Tools SaaS

A CLI-first developer tool company approached us wanting a website that would resonate with senior engineers. Their existing site used standard SaaS landing page templates — hero image, gradient CTAs, testimonial carousel — and conversion was flat.

We redesigned with a brutalist approach: system font stack, monospace for code examples as the primary visual language, black-and-white colour palette, and a single interactive terminal emulator embedded in the hero. Navigation was a text-based sidebar with no icons.

Results: 42% increase in sign-up conversion, 67% decrease in page load time (0.4s vs 1.3s), and unsolicited positive feedback from the developer community on Hacker News and lobste.rs.

Case Study 2: Academic Journal Redesign

A humanities journal needed a site that reflected their editorial values: clarity, rigour, and substance over style. The previous design was a heavy WordPress theme with 500KB of assets per page.

We migrated to a static site with brutalist styling: single-column layout, serif body text, sans-serif headings, zero JavaScript on article pages, and print-like typographic treatment. Colour was reserved exclusively for hyperlinks.

Results: 89% reduction in page weight, 3x increase in average session duration, and improved accessibility scores (100/100 Lighthouse on article pages). Readers described the experience as "like reading a printed journal, but better."

When Not to Use Brutalism

Brutalism is the wrong choice when:

• Your audience skews non-technical. A brutalist checkout flow for a consumer product will confuse and repel.
• Your content relies on rich media. Photography portfolios, video platforms, and food blogs need visual richness that brutalism deliberately avoids.
• Your brand requires warmth. Non-profits, healthcare providers, and children's services often benefit from softer design languages.
• You are using brutalism as an excuse for poor implementation. "It's brutalist" is not a justification for broken layouts, missing accessibility, or slow performance.

The Future of Brutalist Web Design

As AI-generated websites flood the market with generic, interchangeable templates, brutalism offers something increasingly rare: a distinctive point of view. The web is experiencing a "small web" revival — hand-crafted sites, personal blogs, digital gardens — and brutalism is its natural aesthetic companion.

We expect to see more hybrid approaches: brutalist typography and layout paired with thoughtful micro-interactions, or brutalist content pages with conventional marketing pages. The movement is maturing beyond provocation into a legitimate design vocabulary with rules, nuance, and staying power.

At WEIRDSOFT, we believe the best design is the one that communicates most clearly. Sometimes clarity requires polish. Sometimes it requires a brick wall.