Stylogeny combining Flat Design × Japanese Postwar Modernism

Try

Style combination · Pairs well

Flat Design × Japanese Postwar Modernism

Add the emblematic circles and calm colour fields of Japanese postwar posters to give flat screens a stronger focal image.

From the research on Flat Design

Mix them and make something Flat Design Japanese Postwar Modernism

GridFlat Design × Japanese Postwar2010 · 1950
A sample layout drawn from the recipe: shapes from Flat Design, their arrangement from Japanese Postwar Modernism, 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 Japanese Postwar Modernism

Type from Flat Design
Colour from Japanese Postwar Modernism
Form from Flat Design
Composition from Japanese Postwar Modernism
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 · Flat Design

Grid

Inter, standing in for Segoe UI

Text · Japanese Postwar Modernism

Building on the New Typography that Hiromu Hara and the Nippon Kobo circle had absorbed in the 1930s, Japan's postwar graphic designers fused the grid, sans-serif and objective photography of European modernism with indigenous traditions of family crests (kamon), asymmetry and charged emptiness (ma). From the Graphic '55 exhibition and the Nippon Design Center to Yusaku Kamekura's Tokyo 1964 Olympic posters, it produced bold emblematic symbols, luminous flat colour fields and photography of startling precision.

Zen Kaku Gothic New; Japanese Postwar Modernism used Gothic and Mincho

03

The colours

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

Flat Design Japanese Postwar Modernism

  • #f4f1ea ground · 36%
  • #111111 ink · 14%
  • #d7261e accent · 18%
  • #f1c40f accent · 14%
  • #c8a24a accent · 10%
  • #e74c3c accent · 8%

As CSS

:root {
  --ground: #f4f1ea;
  --ink: #111111;
  --accent-1: #d7261e;
  --accent-2: #f1c40f;
  --accent-3: #c8a24a;
  --accent-4: #e74c3c;
  --font-display: "Inter", sans-serif;
  --font-text: "Zen Kaku Gothic New", sans-serif;
}

04

The two styles

A bright planning-service homepage features a large “Plan Brighter” headline, an illustration of a woman using a laptop, and four colourful feature tiles. Below, a second illustrated person points at a planning board beside introductory text and a Get Started button. 2010–2016 · North America, Global / networked 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. A large red sun sits above and behind a black triangular mountain with a gold tip on an off-white background. Bold black characters reading “太陽” appear in the upper-left corner. 1950–1990 · East Asia Japanese Postwar Modernism Building on the New Typography that Hiromu Hara and the Nippon Kobo circle had absorbed in the 1930s, Japan's postwar graphic designers fused the grid, sans-serif and objective photography of European modernism with indigenous traditions of family crests (kamon), asymmetry and charged emptiness (ma). From the Graphic '55 exhibition and the Nippon Design Center to Yusaku Kamekura's Tokyo 1964 Olympic posters, it produced bold emblematic symbols, luminous flat colour fields and photography of startling precision.

05

More combinations

With Flat Design

All 20 combinations with Flat Design

With Japanese Postwar Modernism

All 26 combinations with Japanese Postwar Modernism

Every style combination