Stylogeny combining Post-Punk Record Sleeve × 2 Tone Graphics

Try

Style combination · Contrasts

Post-Punk Record Sleeve × 2 Tone Graphics

Shares restraint and a single focal point, but swaps abstraction for a cartoon mascot.

From the research on 2 Tone Graphics

Mix them and make something Post-Punk Record Sleeve 2 Tone Graphics

AGAINPost-Punk Record × 2 Tone Graphics1977 · 1979
A sample layout drawn from the recipe: shapes from 2 Tone Graphics, their arrangement from Post-Punk Record Sleeve, the finish from Post-Punk Record Sleeve. 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.

Post-Punk Record Sleeve (Stiff, Factory, 4AD) 2 Tone Graphics

Type from Post-Punk Record Sleeve
Colour from 2 Tone Graphics
Form from 2 Tone Graphics
Composition from Post-Punk Record Sleeve
Surface from Post-Punk Record Sleeve

02

The type

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

Display · Post-Punk Record Sleeve

Again

Syne; Post-Punk Record Sleeve used Peter Saville's colour-coded alphabet, one coloured block per letter, decoded by a wheel on the back of Power, Corruption & Lies (1983) and used for the title of Blue Monday and Small, ordered sans-serif capitals in the manner of Jan Tschichold's New Typography, which Saville took as his model from the 1978 Factory poster onwards

Text · 2 Tone Graphics

The visual identity of 2 Tone Records: a black-and-white checkerboard, taken by Jerry Dammers from an old mod pop-art motif, and a cartoon mascot, Walt Jabsco, a rude boy in suit and pork-pie hat based on a photograph of the Jamaican singer Peter Tosh. Devised by Dammers with Horace Panter, and worked up into artwork by John 'Teflon' Sims and David Storey, it turned punk-era DIY into a controlled, repeatable system and revived the dress of 1960s Jamaican ska and mod. It descends from op art through the check; the DIY spirit of punk is an influence, not the parent.

Inter; 2 Tone Graphics used Helvetica Inserat and Bold grotesque sans capitals

03

The colours

The ground and leading colours come from 2 Tone Graphics, with a counter-accent from Post-Punk Record Sleeve. The ink reads on the ground at 4.5:1 or more.

Post-Punk Record Sleeve (Stiff, Factory, 4AD) 2 Tone Graphics

  • #f5f5f0 ground · 36%
  • #111111 ink · 14%
  • #d9d9d4 accent · 18%
  • #f2c230 accent · 14%
  • #7a7a7a accent · 10%
  • #b8963e accent · 8%

As CSS

:root {
  --ground: #f5f5f0;
  --ink: #111111;
  --accent-1: #d9d9d4;
  --accent-2: #f2c230;
  --accent-3: #7a7a7a;
  --accent-4: #b8963e;
  --font-display: "Syne", sans-serif;
  --font-text: "Inter", sans-serif;
}

Use it with care

Post-Punk Record Sleeve (Stiff, Factory, 4AD): The sleeves are in copyright, and several of their quoted images have their own authors, such as Harold Craft's pulsar plot and Bernard Pierre Wolff's photograph of the Appiani tomb: make a new quotation from a public-domain or licensed source rather than copying a Factory, Stiff or 4AD cover or its colour code.

05

More combinations

With Post-Punk Record Sleeve

All 14 combinations with Post-Punk Record Sleeve

With 2 Tone Graphics

Every style combination