Style combination · Contrasts

Flat Design × Hand-Painted Signage

Against flat, machine-perfect UI, one hand-painted wordmark signals human craft; keep everything else flat so it stands out.

From the research on Hand-Painted Signage & Vernacular Lettering

Mix them and make something Flat Design Hand-Painted Signage

A sample layout drawn from the recipe: shapes from Flat Design, their arrangement from Flat Design, the finish from Hand-Painted Signage. 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 Hand-Painted Signage & Vernacular Lettering

Type from Hand-Painted Signage: Hand-lettering
Script
Colour from Flat Design: Flat fields
Full polychrome
Form from Flat Design: Pictogram
Geometric primitives
Composition from Flat Design: Modular grid
Cards & bento tiles

Hand-Painted Signage avoids modular grid: this is where the two pull against each other, which is the point of the contrast.
Surface from Hand-Painted Signage: Hard offset shadow
Painterly brushwork

The type

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

Display · Hand-Painted Signage

Hello

Yellowtail, standing in for Brush script

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

The colours

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

Flat Design Hand-Painted Signage & Vernacular Lettering

#ecf0f1 ground · 36%
#2c3e50 ink · 14%
#f1c40f accent · 18%
#c99a2e accent · 14%
#e74c3c accent · 10%
#b8262b accent · 8%

As CSS

:root {
  --ground: #ecf0f1;
  --ink: #2c3e50;
  --accent-1: #f1c40f;
  --accent-2: #c99a2e;
  --accent-3: #e74c3c;
  --accent-4: #b8262b;
  --font-display: "Yellowtail", cursive;
  --font-text: "Inter", 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.

An ornate rectangular sign reads “RIVER MARKET” in large cream-and-gold capital letters on a dark green background, with red shadows on the top word and blue shadows below. Gold borders and scrolling flourishes surround the lettering, with red decorative motifs in the black corners and visible painted texture throughout.

1800–present · Global / networked Hand-Painted Signage & Vernacular Lettering Letters painted by trained sign writers on fascias, windows, walls, vehicles and showcards, from Victorian gold leaf on glass to Mexican rótulos, Indian bazaar boards and Ghanaian barbershop signs. Brush-built letters with shading, drop shadows and outlines are fitted to the panel and mixed in a few styles for hierarchy, valuing legibility at a distance and the painter's flourish; vinyl displaced the craft in the 1980s and it has revived since the 2010s.

More combinations

With Flat Design

All 20 combinations with Flat Design

With Hand-Painted Signage

All 29 combinations with Hand-Painted Signage

Every style combination