Stylogeny combining Flat Design × Plakatstil

Try

Style combination · Pairs well

Flat Design × Plakatstil

Sachplakat is the ancestor of the flat product hero; borrow its single-object discipline to sharpen app and packaging graphics.

From the research on Plakatstil / Sachplakat

Mix them and make something Flat Design Plakatstil

INDEXFlat Design × Plakatstil2010 · 1905
A sample layout drawn from the recipe: shapes from Flat Design, their arrangement from Plakatstil, 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 Plakatstil / Sachplakat

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

Index

Big Shoulders, standing in for Lucian Bernhard's hand-drawn block lettering

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 Plakatstil, with a counter-accent from Flat Design. The ink reads on the ground at 4.5:1 or more.

Flat Design Plakatstil / Sachplakat

  • #151515 ground · 36%
  • #efe5cf ink · 14%
  • #d2382b accent · 18%
  • #f1c40f accent · 14%
  • #e3b23c accent · 10%
  • #24418f accent · 8%

As CSS

:root {
  --ground: #151515;
  --ink: #efe5cf;
  --accent-1: #d2382b;
  --accent-2: #f1c40f;
  --accent-3: #e3b23c;
  --accent-4: #24418f;
  --font-display: "Big Shoulders", sans-serif;
  --font-text: "Inter", 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 tall, slender red-orange dog stands facing right against a black background, with angular black cutouts defining its features and limbs. Large cream capital letters spell “VELOX” beneath its paws. 1905–1920 · Central Europe Plakatstil / Sachplakat The German 'object poster' launched by Lucian Bernhard's Priester match poster and printed by Berlin's Hollerbaum & Schmidt. It strips the advertisement to a single product rendered in flat, saturated colour and the brand name in bold hand-drawn letters on a plain ground, so the message registers instantly from a passing tram or across the street.

05

More combinations

With Flat Design

All 20 combinations with Flat Design

With Plakatstil

All 12 combinations with Plakatstil

Every style combination