Stylogenyin the style of Brutalist Web Design

Digital native · 2014–present · Global / networked, Central Europe

Brutalist Web Design

Also known as Web brutalism, Brutalist websites, Antidesign

A reaction against templated, conversion-optimised web design that exposes the raw materials of the browser: default system fonts, blue underlined links, visible borders, unstyled forms and plain document flow. Named after architectural Brutalism by Pascal Deville's survey site brutalistwebsites.com (2014), it ranges from functional austerity to deliberately abrasive antidesign.

Make something in this styleGet advice in this styleMix it with another style

A white website homepage titled “RIVER SONGS” uses enormous black serif lettering, blue underlined links, and thick black dividing rules. A high-contrast image of rippling water sits beside a blue latest-posts panel and text about river essays and field recordings.
AI-generated by Stylogeny from the style’s design choices. Not a real or historical work.

01

How it works

  • Expose the browser's defaults: system or Times fonts, underlined blue links, grey buttons and unstyled form controls.
  • Let content run in plain document order with minimal CSS; skip frameworks, animation and polish.
  • Work in stark black on white, or one jarring flat colour, with no gradients, rounded corners or soft shadows.
  • Make the structure visible: tables, rules and boxed borders are shown rather than hidden.
  • Set type large and blunt, often in monospace, and accept collisions and abrupt scale jumps.
  • Treat friction and plainness as a stance: fast, honest pages over seductive surfaces.

Named by Pascal Deville's survey site brutalistwebsites.com (Zurich); a global web-design tendency

02

Its design choices

From Stylogeny’s vocabulary of design choices: defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

Layout & composition
Space & hierarchy
Typography
Colour
Form & shape
Surface & texture
Ornament
Imagery
Medium & production
Tone & intent
Avoids
Gradients, Rounded & pill, Frosted glass, Soft extrusion, Gloss & highlights, Illusion of depth, Flat vector illustration, 3D render

Palette

  • #ffffff
  • #000000
  • #0000ee
  • #551a8b
  • #c0c0c0
  • #ff0000

Typefaces

  • Times New Roman

    browser default

  • Courier New and system monospace

  • Arial / Helvetica

  • System UI defaults

Known for

  • Pascal Deville, Brutalist Websites

    brutalistwebsites.com, 2014–

  • Craigslist

  • Drudge Report

  • Yale School of Art website

    editable, wiki-style

  • David Bryant Copeland, Brutalist Web Design guidelines

    brutalist-web.design

03

Make something in this style

Say what you need, and Stylogeny’s image studio draws it from Brutalist Web Design’s design choices and checks it against them. It takes about a minute, and you get a link to share.

Rule out a choice, read the prompt, or blend in another style: take this brief to Mix styles.

04

Where it comes from, and what it’s close to

Before it

The style it grew out of, and the styles it borrowed from.

This styleBrutalist Web Design2014–present · Global / networked, Central Europe

After it

The styles that grew out of it.

Alike in its design choices

Styles that make many of the same choices, related or not, besides those above.

05

Real works

Artefacts in museums, libraries and archives that show the style, linked at their source.

06

Sources

  1. Pascal Deville, Brutalist Websites (brutalistwebsites.com)
  2. Nielsen Norman Group, 'Brutalism and Antidesign' (nngroup.com/articles/brutalism-antidesign)
  3. David Bryant Copeland, Brutalist Web Design (brutalist-web.design)

How Stylogeny researches and checks a style: where the facts come from.