Stylogeny combining Early Web Vernacular × Brutalist Web Design

Try

Style combination · Pairs well

Early Web Vernacular × Brutalist Web Design

Drop the GIFs but keep raw HTML defaults and visible structure for a contemporary, knowingly unpolished site.

From the research on Early Web Vernacular

Mix them and make something Early Web Vernacular Brutalist Web Design

RiotEarly Web Vernacular × Brutalist Web Design
A sample layout drawn from the recipe: shapes from Brutalist Web Design, their arrangement from Early Web Vernacular, the finish from Early Web Vernacular. Not a real work, and not an image of either style.

01

What each style brings

Each part of the design comes from the style with the stronger say in it, and each style gives at least two.

Early Web Vernacular Brutalist Web Design

Type from Early Web Vernacular
Colour from Brutalist Web Design
Form from Brutalist Web Design
Composition from Early Web Vernacular
Surface from Early Web Vernacular

02

The type

Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.

Display · Early Web Vernacular

Riot

Newsreader, standing in for Times New Roman (browser default)

Text · 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.

Courier Prime; Brutalist Web Design used Times New Roman and Courier New and system monospace

03

The colours

The ground and leading colours come from Brutalist Web Design, with a counter-accent from Early Web Vernacular. The ink reads on the ground at 4.5:1 or more.

Early Web Vernacular Brutalist Web Design

  • #ffffff ground · 36%
  • #000000 ink · 14%
  • #ff0000 accent · 18%
  • #0000ff accent · 14%
  • #ff00ff accent · 10%
  • #551a8b accent · 8%

As CSS

:root {
  --ground: #ffffff;
  --ink: #000000;
  --accent-1: #ff0000;
  --accent-2: #0000ff;
  --accent-3: #ff00ff;
  --accent-4: #551a8b;
  --font-display: "Newsreader", serif;
  --font-text: "Courier Prime", monospace;
}

04

The two styles

A densely decorated blue ocean-themed webpage features the title “OCEAN DREAMS” above a pearl-and-shell-framed picture of dolphins. Repeated dolphins, glittering stars, hearts, planets, kittens, fairies, fish and small novelty icons fill the surrounding space. 1994–2004 · Global / networked Early Web Vernacular The amateur web of the mid-1990s to early 2000s, when millions of people hand-coded personal homepages on free hosts such as GeoCities with table layouts, browser-default fonts, tiled backgrounds, animated GIFs, MIDI soundtracks, hit counters and ‘under construction’ signs. Its look came from HTML's limits, slow modems and enthusiastic bricolage rather than professional design; Olia Lialina later named it ‘a vernacular web’. 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. 2014–present · Global / networked, Central Europe 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.

05

More combinations

With Early Web Vernacular

All 10 combinations with Early Web Vernacular

With Brutalist Web Design

All 14 combinations with Brutalist Web Design

Every style combination