Stylogeny combining Flat Design × Frutiger Aero

Try

Style combination · Contrasts

Flat Design × Frutiger Aero

Flat design was the reaction that ended it; toggle gloss against flat to signal ‘then and now’ in retro tech work.

From the research on Frutiger Aero

Mix them and make something Flat Design Frutiger Aero

SignalFlat Design × Frutiger Aero2010 · 2004
A sample layout drawn from the recipe: shapes from Flat Design, their arrangement from Flat Design, the finish from Frutiger Aero. 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 Frutiger Aero

Type from Frutiger Aero
Colour from Flat Design
Form from Flat Design
Composition from Flat Design
Surface from Frutiger Aero

Flat Design avoids gloss & highlights: this is where the two pull against each other, which is the point of the contrast.

02

The type

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

Display · Frutiger Aero

Signal

Fira Sans, standing in for Frutiger (Adrian Frutiger, 1976)

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

Flat Design Frutiger Aero

  • #ecf0f1 ground · 36%
  • #2c3e50 ink · 14%
  • #f1c40f accent · 18%
  • #22c3c9 accent · 14%
  • #e74c3c accent · 10%
  • #4fb3e8 accent · 8%

As CSS

:root {
  --ground: #ecf0f1;
  --ink: #2c3e50;
  --accent-1: #f1c40f;
  --accent-2: #22c3c9;
  --accent-3: #e74c3c;
  --accent-4: #4fb3e8;
  --font-display: "Fira Sans", 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. 2004–2013 · Global / networked Frutiger Aero The glossy, optimistic look of consumer technology from the mid-2000s to the early 2010s, retrospectively named in 2017 by the Consumer Aesthetics Research Institute after Windows Vista's Aero interface and Adrian Frutiger's humanist sans. Translucent glass panels, glossy orbs and buttons, water droplets, bubbles, auroras, green fields and blue skies fused technology with clean nature, set in airy humanist sans-serifs.

05

More combinations

With Flat Design

All 20 combinations with Flat Design

With Frutiger Aero

All 13 combinations with Frutiger Aero

Every style combination