Stylogeny combining Cranbrook × Brutalist Web Design

Try

Style combination · Pairs well

Cranbrook × Brutalist Web Design

Competing hierarchies translate to the browser as overlapping, barely styled HTML layers.

From the research on Cranbrook & Deconstructivist Typography

Mix them and make something Cranbrook Brutalist Web Design

No!Cranbrook × Brutalist Web Design1980 · 2014
A sample layout drawn from the recipe: shapes from Brutalist Web Design, their arrangement from Cranbrook, the finish from Cranbrook. 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.

Cranbrook & Deconstructivist Typography Brutalist Web Design

Type from Cranbrook
Colour from Brutalist Web Design
Form from Brutalist Web Design
Composition from Cranbrook
Surface from Cranbrook

02

The type

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

Display · Cranbrook

No!

Inter Tight, standing in for Univers and Helvetica, fragmented and layered

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 Cranbrook. The ink reads on the ground at 4.5:1 or more.

Cranbrook & Deconstructivist Typography Brutalist Web Design

  • #ffffff ground · 36%
  • #000000 ink · 14%
  • #ff0000 accent · 18%
  • #d1342c accent · 14%
  • #0000ee accent · 10%
  • #c99a2e accent · 8%

As CSS

:root {
  --ground: #ffffff;
  --ink: #000000;
  --accent-1: #ff0000;
  --accent-2: #d1342c;
  --accent-3: #0000ee;
  --accent-4: #c99a2e;
  --font-display: "Inter Tight", sans-serif;
  --font-text: "Courier Prime", monospace;
}

04

The two styles

A tall, distressed collage poster reads “GLASS RIVER” in oversized black, gray, and red letters. Black-and-white fragments of an eye, a bridge, water, mountains, and trees overlap mustard-yellow and red blocks, fine diagrams, and small text on an ivory background. 1980–1998 · North America Cranbrook & Deconstructivist Typography Graduate-school experimentation, centred on Katherine and Michael McCoy's Cranbrook design programme, that applied post-structuralist literary theory to the page. Text and image were layered into dense fields to be read rather than merely seen; typographic hierarchy was fractured, vernacular lettering was mixed with theory, and meaning was left open for the reader to construct. 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 Cranbrook

With Brutalist Web Design

All 14 combinations with Brutalist Web Design

Every style combination