Stylogeny combining Frutiger Aero × Skeuomorphic UI

Try

Style combination · Pairs well

Frutiger Aero × Skeuomorphic UI

Share gloss and depth; combine Aero's glass and nature with skeuomorphic objects for convincing 2000s-nostalgia interfaces.

From the research on Skeuomorphic UI

Mix them and make something Frutiger Aero Skeuomorphic UI

HelloFrutiger Aero × Skeuomorphic UI2004 · 2000
A sample layout drawn from the recipe: shapes from Skeuomorphic UI, their arrangement from Skeuomorphic UI, 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.

Frutiger Aero Skeuomorphic UI

Type from Frutiger Aero
Colour from Frutiger Aero
Form from Skeuomorphic UI
Composition from Skeuomorphic UI
Surface from Frutiger Aero

02

The type

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

Display · Frutiger Aero

Hello

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

Text · Skeuomorphic UI

Interface design that imitates physical materials and objects (stitched leather, linen, wooden shelves, brushed aluminium, felt, paper and glass) so that digital tools look and behave like their real-world counterparts. Extending the GUI's desktop metaphor into photorealism, it ran from Apple's Aqua and brushed-metal interfaces around 2000 to its peak in iOS 1–6 and Mac OS X Lion, and was abandoned for flat design with iOS 7 in 2013.

Inter; Skeuomorphic UI used Lucida Grande and Helvetica

03

The colours

The ground and leading colours come from Frutiger Aero, with a counter-accent from Skeuomorphic UI. The ink reads on the ground at 4.5:1 or more.

Frutiger Aero Skeuomorphic UI

  • #f5fbff ground · 36%
  • #0b5fa5 ink · 14%
  • #22c3c9 accent · 18%
  • #4a87c9 accent · 14%
  • #4fb3e8 accent · 10%
  • #2f6b3a accent · 8%

As CSS

:root {
  --ground: #f5fbff;
  --ink: #0b5fa5;
  --accent-1: #22c3c9;
  --accent-2: #4a87c9;
  --accent-3: #4fb3e8;
  --accent-4: #2f6b3a;
  --font-display: "Fira Sans", sans-serif;
  --font-text: "Inter", sans-serif;
}

04

The two styles

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. An outdoors-themed homepage places a green leather journal and pen beside layered paper, a mountain lake photograph, a brass compass, pine sprigs and a topographic map on a wooden surface. A stitched leather navigation bar tops the page, and five illustrated shortcuts sit beneath a blue “Start Exploring” button. 2000–2013 · Global / networked Skeuomorphic UI Interface design that imitates physical materials and objects (stitched leather, linen, wooden shelves, brushed aluminium, felt, paper and glass) so that digital tools look and behave like their real-world counterparts. Extending the GUI's desktop metaphor into photorealism, it ran from Apple's Aqua and brushed-metal interfaces around 2000 to its peak in iOS 1–6 and Mac OS X Lion, and was abandoned for flat design with iOS 7 in 2013.

05

More combinations

With Frutiger Aero

All 13 combinations with Frutiger Aero

With Skeuomorphic UI

Every style combination