Stylogeny combining Frutiger Aero × Glassmorphism

Try

Style combination · Pairs well

Frutiger Aero × Glassmorphism

Glassmorphism is its flatter heir; reintroduce a touch of Aero gloss and nature photography to warm up frosted-glass UI.

From the research on Frutiger Aero

Mix them and make something Frutiger Aero Glassmorphism

FutureFrutiger Aero × Glassmorphism2004 · 2020
A sample layout drawn from the recipe: shapes from Glassmorphism, their arrangement from Glassmorphism, 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 Glassmorphism

Type from Frutiger Aero
Colour from Frutiger Aero
Form from Glassmorphism
Composition from Glassmorphism
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

Future

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

Text · Glassmorphism

An interface style of translucent, frosted panels floating over vivid, blurred backgrounds, so that depth and hierarchy come from layered transparency. Rooted in Windows Aero glass, the blur layers of iOS 7 and Fluent Design's Acrylic, it was named in 2020 around the launch of macOS Big Sur and returned in 2025 as Apple's refractive Liquid Glass.

Inter; Glassmorphism used SF Pro and Segoe UI Variable

03

The colours

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

Frutiger Aero Glassmorphism

  • #f5fbff ground · 36%
  • #0b5fa5 ink · 14%
  • #22c3c9 accent · 18%
  • #2cb1fc accent · 14%
  • #7f5af0 accent · 10%
  • #b8e04a accent · 8%

As CSS

:root {
  --ground: #f5fbff;
  --ink: #0b5fa5;
  --accent-1: #22c3c9;
  --accent-2: #2cb1fc;
  --accent-3: #7f5af0;
  --accent-4: #b8e04a;
  --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. A vivid blue, purple and pink focus-timer interface features a large translucent circular timer reading 25:00 with a play button. Glossy abstract shapes surround glass-like navigation tabs, a session bar chart and two habit-building cards. 2020–present · Global / networked Glassmorphism An interface style of translucent, frosted panels floating over vivid, blurred backgrounds, so that depth and hierarchy come from layered transparency. Rooted in Windows Aero glass, the blur layers of iOS 7 and Fluent Design's Acrylic, it was named in 2020 around the launch of macOS Big Sur and returned in 2025 as Apple's refractive Liquid Glass.

05

More combinations

With Frutiger Aero

All 13 combinations with Frutiger Aero

With Glassmorphism

Every style combination