Stylogeny combining Neo-Brutalism × Pop Art Graphics

Try

Style combination · Pairs well

Neo-Brutalism × Pop Art Graphics

Lift Pop's thick black outlines and flat primaries into UI cards and buttons for a confident, comic-strip interface.

From the research on Pop Art Graphics

Fill hard-shadowed cards with Pop Art's Ben-Day dots and comic outlines for a printed-ephemera feel.

From the research on Neo-Brutalism

Mix them and make something Neo-Brutalism Pop Art Graphics

WowWowNeo-Brutalism × Pop Art Graphics2020 · 1955
A sample layout drawn from the recipe: shapes from Neo-Brutalism, their arrangement from Neo-Brutalism, the finish from Pop Art Graphics. 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-Brutalism Pop Art Graphics

Type from Neo-Brutalism
Colour from Pop Art Graphics
Form from Neo-Brutalism
Composition from Neo-Brutalism
Surface from Pop Art Graphics

02

The type

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

Display · Neo-Brutalism

Wow

Space Grotesk, standing in for Space Grotesk

Text · Pop Art Graphics

Pop turned the commercial imagery of post-war consumer culture (comics, packaging, celebrity photographs and advertising) into both its subject and its method. Images are appropriated, enlarged, flattened and repeated; colour is bright and unmodulated; and the printing process itself, from Ben-Day dots to off-register silkscreen, is left visible as a sign of mass production.

Archivo; Pop Art Graphics used Comic-book hand lettering and Franklin Gothic

03

The colours

The ground and leading colours come from Pop Art Graphics, with a counter-accent from Neo-Brutalism. The ink reads on the ground at 4.5:1 or more.

Neo-Brutalism Pop Art Graphics

  • #fbf8f0 ground · 36%
  • #111111 ink · 14%
  • #ffd400 accent · 18%
  • #e10600 accent · 14%
  • #23a094 accent · 10%
  • #0057b8 accent · 8%

As CSS

:root {
  --ground: #fbf8f0;
  --ink: #111111;
  --accent-1: #ffd400;
  --accent-2: #e10600;
  --accent-3: #23a094;
  --accent-4: #0057b8;
  --font-display: "Space Grotesk", sans-serif;
  --font-text: "Archivo", sans-serif;
}

05

More combinations

With Neo-Brutalism

With Pop Art Graphics

All 33 combinations with Pop Art Graphics

Every style combination