Flat Design × WPA Silkscreen Posters

Its flat layered shapes translate directly to vector; use the national-park look for warm, civic flat illustration.

From the research on WPA Silkscreen Posters

Mix them and make something Flat Design WPA Silkscreen Posters

A sample layout drawn from the recipe: shapes from Flat Design, their arrangement from WPA Silkscreen Posters, the finish from Flat Design. Not a real work, and not an image of either style.

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 WPA Silkscreen Posters

Type from Flat Design: Humanist sans
Grotesque & neo-grotesque
Colour from WPA Silkscreen Posters: Flat fields
Limited spot colours
Form from Flat Design: Pictogram
Geometric primitives
Composition from WPA Silkscreen Posters: Single focal point
Isolated object
Surface from Flat Design: Flat

The type

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

Display · Flat Design

Hello

Inter, standing in for Segoe UI

Text · WPA Silkscreen Posters

Posters made by the Federal Art Project of the Works Progress Administration to promote health campaigns, education, theatre, travel and the national parks during the Depression. Unemployed artists adapted commercial silkscreen to print runs by hand, which gave the work its flat, opaque layered colour, simplified stylised forms and clear geometric lettering in a public-service voice.

Jost; WPA Silkscreen Posters used Hand-cut stencil lettering in geometric sans-serif capitals and Futura (Paul Renner, 1927) and similar geometric sans-serifs

The colours

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

Flat Design WPA Silkscreen Posters

#efe6cf ground · 36%
#222222 ink · 14%
#c8622d accent · 18%
#f1c40f accent · 14%
#d9a441 accent · 10%
#3d5a7a accent · 8%

As CSS

:root {
  --ground: #efe6cf;
  --ink: #222222;
  --accent-1: #c8622d;
  --accent-2: #f1c40f;
  --accent-3: #d9a441;
  --accent-4: #3d5a7a;
  --font-display: "Inter", sans-serif;
  --font-text: "Jost", sans-serif;
}

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 stylised hiker with a large backpack stands on an orange rocky overlook above a winding river, evergreen forests and blue mountains. An orange sun sits behind the peaks, and large blue lettering across the top reads “EXPLORE.”

1935–1943 · North America WPA Silkscreen Posters Posters made by the Federal Art Project of the Works Progress Administration to promote health campaigns, education, theatre, travel and the national parks during the Depression. Unemployed artists adapted commercial silkscreen to print runs by hand, which gave the work its flat, opaque layered colour, simplified stylised forms and clear geometric lettering in a public-service voice.

More combinations

With Flat Design

All 20 combinations with Flat Design

With WPA Silkscreen Posters

All 13 combinations with WPA Silkscreen Posters

Every style combination