Stylogeny combining Neo-Swiss Revival × Brutalist Web Design

Try

Style combination · Pairs well

Neo-Swiss Revival × Brutalist Web Design

Expose neo-Swiss grids with raw HTML defaults and visible borders for a stripped, contemporary web voice.

From the research on Neo-Swiss Revival

Mix them and make something Neo-Swiss Revival Brutalist Web Design

OrderNeo-Swiss Revival × Brutalist Web Design
A sample layout drawn from the recipe: shapes from Brutalist Web Design, their arrangement from Neo-Swiss Revival, the finish from Neo-Swiss Revival. 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.

Neo-Swiss Revival Brutalist Web Design

Type from Neo-Swiss Revival
Colour from Brutalist Web Design
Form from Brutalist Web Design
Composition from Neo-Swiss Revival
Surface from Neo-Swiss Revival

02

The type

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

Display · Neo-Swiss Revival

Order

Inter Tight, standing in for Neue Haas Grotesk (Christian Schwartz revival)

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

Neo-Swiss Revival Brutalist Web Design

  • #ffffff ground · 36%
  • #000000 ink · 14%
  • #ff0000 accent · 18%
  • #ff4a1c accent · 14%
  • #0000ee accent · 10%
  • #1d3bff accent · 8%

As CSS

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

04

The two styles

A typographic arts poster features enormous black words “New” and “Now” stacked on an off-white background divided by thin grid lines. Orange-red, blue and pale gray rectangular fields sit below, alongside smaller exhibition details and the words “Art Ideas People Today.” 2005–present · Global / networked, Central Europe, Western Europe Neo-Swiss Revival A contemporary revival of the International Typographic Style, fuelled by digital re-releases of neo-grotesques and by studios such as Experimental Jetset and Norm: modular grids, flush-left grotesque type, huge tightly set headlines and flat fields of black, white and one signal colour. It treats Swiss modernism as a living toolkit for posters, identities and the responsive web, sometimes with a knowing, citational wink. 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 Neo-Swiss Revival

All 14 combinations with Neo-Swiss Revival

With Brutalist Web Design

All 14 combinations with Brutalist Web Design

Every style combination