# Brutalist Web Design > 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. - Period: 2014–present - Where: Global / networked, Central Europe - Origin: Named by Pascal Deville's survey site brutalistwebsites.com (Zurich); a global web-design tendency - Branch: Digital native - Also known as: Web brutalism, Brutalist websites, Antidesign - Page: https://stylogeny.com/styles/web-brutalism/ ## 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. ## Its design choices Defining choices make the style, characteristic ones are usual, occasional ones turn up now and then. ### Layout & composition - [Classical text block](https://stylogeny.com/design-choices/classical-text-block/) (characteristic) - [Dynamic asymmetry](https://stylogeny.com/design-choices/dynamic-asymmetry/) (characteristic) - [Broken grid](https://stylogeny.com/design-choices/broken-grid/) (characteristic) - [Modular grid](https://stylogeny.com/design-choices/modular-grid/) (occasional) - [Collage & layering](https://stylogeny.com/design-choices/collage-and-layering/) (occasional) ### Space & hierarchy - [Flat hierarchy](https://stylogeny.com/design-choices/flat-hierarchy/) (characteristic) - [Visual tension](https://stylogeny.com/design-choices/visual-tension/) (characteristic) - [Horror vacui](https://stylogeny.com/design-choices/horror-vacui/) (occasional) ### Typography - [Transitional serif](https://stylogeny.com/design-choices/transitional-serif/) (characteristic) - [Monospace](https://stylogeny.com/design-choices/monospace/) (characteristic) - [Grotesque & neo-grotesque](https://stylogeny.com/design-choices/grotesque-and-neo-grotesque/) (characteristic) - [Flush left, ragged right](https://stylogeny.com/design-choices/flush-left-ragged-right/) (characteristic) - [Type as image](https://stylogeny.com/design-choices/type-as-image/) (characteristic) - [Eclectic mixing](https://stylogeny.com/design-choices/eclectic-mixing/) (occasional) ### Colour - [Monochrome](https://stylogeny.com/design-choices/monochrome/) (defining) - [Light ground](https://stylogeny.com/design-choices/light-ground/) (characteristic) - [Limited spot colours](https://stylogeny.com/design-choices/limited-spot-colours/) (characteristic) - [Flat fields](https://stylogeny.com/design-choices/flat-fields/) (characteristic) - [Fluorescent & neon](https://stylogeny.com/design-choices/fluorescent-and-neon/) (occasional) ### Form & shape - [Rectilinear](https://stylogeny.com/design-choices/rectilinear/) (defining) ### Surface & texture - [Flat](https://stylogeny.com/design-choices/flat/) (defining) - [Hard offset shadow](https://stylogeny.com/design-choices/hard-offset-shadow/) (occasional) ### Ornament - [Ornament-free](https://stylogeny.com/design-choices/ornament-free/) (characteristic) - [Rules & bars](https://stylogeny.com/design-choices/rules-and-bars/) (characteristic) ### Imagery - [Typography only](https://stylogeny.com/design-choices/typography-only/) (characteristic) - [Found & vernacular imagery](https://stylogeny.com/design-choices/found-and-vernacular-imagery/) (occasional) - [Straight photography](https://stylogeny.com/design-choices/straight-photography/) (occasional) ### Medium & production - [Web & CSS](https://stylogeny.com/design-choices/web-and-css/) (defining) ### Tone & intent - [Rebellious & subversive](https://stylogeny.com/design-choices/rebellious-and-subversive/) (defining) - [Ironic & self-aware](https://stylogeny.com/design-choices/ironic-and-self-aware/) (characteristic) - [Rational & objective](https://stylogeny.com/design-choices/rational-and-objective/) (occasional) 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) ## Where it comes from, and what it’s close to - Grew out of: [Early Web Vernacular](https://stylogeny.com/styles/early-web.md) (1994–2004) - Influenced by: [International Typographic Style](https://stylogeny.com/styles/swiss-international.md) (1950–1975) - Led to: [Neo-Brutalism](https://stylogeny.com/styles/neo-brutalism.md) (2020–present) - Alike in its design choices: [GOV.UK Design (GDS Style)](https://stylogeny.com/styles/govuk-design-system.md) (2012–present), 63% alike - Alike in its design choices: [Neo-Swiss Revival](https://stylogeny.com/styles/swiss-revival.md) (2005–present), 63% alike - Alike in its design choices: [Emigre & Early Digital Type](https://stylogeny.com/styles/emigre.md) (1984–1998), 58% alike - Alike in its design choices: [Fluxus Graphics (Maciunas)](https://stylogeny.com/styles/fluxus.md) (1962–1978), 57% alike - Alike in its design choices: [Total Design & Dutch Functionalism](https://stylogeny.com/styles/dutch-total-design.md) (1963–1990), 56% alike - Alike in its design choices: [Contemporary Arabic & Dual-Script Type Design](https://stylogeny.com/styles/arabic-latin-bilingual-type.md) (2004–present), 55% alike ## Real works - [Brutalist Websites (brutalistwebsites.com), homepage](https://web.archive.org/web/20160530104825/http://brutalistwebsites.com/): Pascal Deville, 2016 (archived 30 May 2016; site launched 2014), Internet Archive Wayback Machine - [Drudge Report, homepage](https://web.archive.org/web/20160602025604/http://drudgereport.com/): Matt Drudge, 2016 (archived 2 June 2016; layout in use since the late 1990s), Internet Archive Wayback Machine - [craigslist New York City, homepage](https://web.archive.org/web/20160108054536/http://newyork.craigslist.org/): craigslist, Inc. (Craig Newmark), 2016 (archived 8 January 2016; layout in use since the early 2000s), Internet Archive Wayback Machine - [Yale University School of Art, homepage (wiki-editable site)](https://web.archive.org/web/20160116115605/http://art.yale.edu/): Linked by Air (site design); page content edited by School of Art users, 2016 (archived 16 January 2016; wiki site in use since 2006), Internet Archive Wayback Machine - [Guidelines for Brutalist Web Design (brutalist-web.design)](https://web.archive.org/web/20180707120305/https://brutalist-web.design/): David Bryant Copeland, 2018 (archived 7 July 2018), Internet Archive Wayback Machine ## Sources - Pascal Deville, Brutalist Websites (brutalistwebsites.com) - Nielsen Norman Group, 'Brutalism and Antidesign' (nngroup.com/articles/brutalism-antidesign) - David Bryant Copeland, Brutalist Web Design (brutalist-web.design) --- From Stylogeny (https://stylogeny.com/), an atlas of graphic-design styles by Van Riel Online Services. How it is made: https://stylogeny.com/about/. Cite as: Stylogeny, “Brutalist Web Design”, https://stylogeny.com/styles/web-brutalism/