Stylogeny combining Flat Design × Munich 1972 Olympic Design

Try

Style combination · Pairs well

Flat Design × Munich 1972 Olympic Design

Flat icon families descend from these round-headed figures; borrow a single stroke width (which, as Holt shows, the 1972 figures only approximate, since a limb built from an orthogonal and a 45-degree segment cannot keep one thickness) and the 0, 45 and 90-degree rule to keep a screen icon set coherent.

From the research on Munich 1972 Olympic Design (Otl Aicher)

Mix them and make something Flat Design Munich 1972 Olympic Design

GridFlat Design × Munich 19722010 · 1966
A sample layout drawn from the recipe: shapes from Flat Design, their arrangement from Munich 1972 Olympic Design, the finish from Flat Design. 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.

Flat Design Munich 1972 Olympic Design (Otl Aicher)

Type from Munich 1972 Olympic Design
Colour from Munich 1972 Olympic Design
Form from Flat Design
Composition from Munich 1972 Olympic Design
Surface from Flat Design

02

The type

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

Display · Munich 1972 Olympic Design

Grid

Inter Tight, standing in for Univers (Adrian Frutiger, 1957), the only typeface of the Games' official communications, with Univers 55 as the house weight

Text · Flat Design

An interface and illustration language that stripped screens of simulated materials, replacing bevels, gloss and textures with solid fields of colour, clean sans-serif type and reduced pictograms. Formalised in Microsoft's Metro design language (Windows Phone 7, 2010) and made mainstream by Apple's iOS 7 (2013), it applied Swiss modernist reduction to responsive, touch-first screens.

Inter; Flat Design used Segoe UI and Helvetica Neue

03

The colours

The ground and leading colours come from Munich 1972 Olympic Design, with a counter-accent from Flat Design. The ink reads on the ground at 4.5:1 or more.

Flat Design Munich 1972 Olympic Design (Otl Aicher)

  • #9ccf7c ground · 36%
  • #141414 ink · 14%
  • #49aa76 accent · 18%
  • #e74c3c accent · 14%
  • #8a96c4 accent · 10%
  • #3498db accent · 8%

As CSS

:root {
  --ground: #9ccf7c;
  --ink: #141414;
  --accent-1: #49aa76;
  --accent-2: #e74c3c;
  --accent-3: #8a96c4;
  --accent-4: #3498db;
  --font-display: "Inter Tight", sans-serif;
  --font-text: "Inter", sans-serif;
}

Use it with care

Munich 1972 Olympic Design (Otl Aicher): The Olympic rings are a protected IOC mark and the Munich posters, emblem and pictograms are the work of named designers: borrow the method (one grid, a light landscape palette, grid-drawn figures), not the artefacts. The 'cheerful Games' are also bound up with the Munich massacre of 5–6 September 1972, when Black September gunmen killed 11 members of the Israeli team; use the identity's optimism knowingly.

05

More combinations

With Flat Design

All 20 combinations with Flat Design

With Munich 1972 Olympic Design

Every style combination