Stylogeny combining Early Web Vernacular × Material Design

Try

Style combination · Contrasts

Early Web Vernacular × Material Design

Material's systematic spacing and elevation are everything the amateur web lacked; use it as the ‘after’ to this ‘before’.

From the research on Early Web Vernacular

Mix them and make something Early Web Vernacular Material Design

HelloEarly Web Vernacular × Material Design
A sample layout drawn from the recipe: shapes from Early Web Vernacular, their arrangement from Material Design, 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 Material Design

Type from Early Web Vernacular
Colour from Material Design
Form from Early Web Vernacular

Material Design avoids abundant decoration: this is where the two pull against each other, which is the point of the contrast.

Composition from Material Design

Early Web Vernacular avoids modular grid: this is where the two pull against each other, which is the point of the contrast.

Surface from Early Web Vernacular

Material Design avoids grain & noise: this is where the two pull against each other, which is the point of the contrast.

02

The type

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

Display · Early Web Vernacular

Hello

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

Text · Material Design

Google's design system, launched in 2014, which reintroduced controlled depth to flat design through the metaphor of 'material': sheets of digital paper and ink that sit at defined elevations, cast consistent shadows and move with meaningful motion. Built on an 8dp grid, Roboto and a bold primary-and-accent colour scheme, it later evolved into the personalised, tonal Material You (2021).

Inter; Material Design used Roboto and Google Sans

03

The colours

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

Early Web Vernacular Material Design

  • #fafafa ground · 36%
  • #212121 ink · 14%
  • #ffc107 accent · 18%
  • #0000ff accent · 14%
  • #ff4081 accent · 10%
  • #ff00ff accent · 8%

As CSS

:root {
  --ground: #fafafa;
  --ink: #212121;
  --accent-1: #ffc107;
  --accent-2: #0000ff;
  --accent-3: #ff4081;
  --accent-4: #ff00ff;
  --font-display: "Newsreader", serif;
  --font-text: "Inter", sans-serif;
}

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 plant-care homepage titled Sproutly features a large “Greener Days” headline beside an illustrated potted plant and light, water, and growth indicators. Below are four feature links and four colorful plant-category cards showing tropical plants, a snake plant, a trailing plant, and a succulent. 2014–present · North America, Global / networked Material Design Google's design system, launched in 2014, which reintroduced controlled depth to flat design through the metaphor of 'material': sheets of digital paper and ink that sit at defined elevations, cast consistent shadows and move with meaningful motion. Built on an 8dp grid, Roboto and a bold primary-and-accent colour scheme, it later evolved into the personalised, tonal Material You (2021).

05

More combinations

With Early Web Vernacular

All 10 combinations with Early Web Vernacular

With Material Design

Every style combination