# 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.

- Period: 2004–2013
- Where: Global / networked
- Origin: Windows Vista and 7, Mac OS X, Nintendo and global consumer-tech advertising; named by the Consumer Aesthetics Research Institute (2017)
- Branch: Digital native
- Also known as: Aero, Aero glass, Web 2.0 gloss
- Page: https://stylogeny.com/styles/frutiger-aero/

## How it works

- Layer translucent, frosted-glass panels with soft reflections over luminous blue and green backgrounds.
- Give buttons and icons a glossy upper highlight and a rounded, bubble-like volume.
- Pair technology with idealised nature: water, droplets, bubbles, fish, macro grass, auroras and clear skies.
- Set interface text in clean humanist sans-serifs such as Frutiger, Segoe UI or Myriad, light and airy.
- Use bokeh, lens flares, soft gradients and swooshes to suggest light and motion.

## Its design choices

Defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

### Layout & composition
- [Full bleed](https://stylogeny.com/design-choices/full-bleed/) (characteristic)
- [Framed panels](https://stylogeny.com/design-choices/framed-panels/) (characteristic)
- [Isolated object](https://stylogeny.com/design-choices/isolated-object/) (occasional)

### Space & hierarchy
- [Illusion of depth](https://stylogeny.com/design-choices/illusion-of-depth/) (characteristic)
- [Measured density](https://stylogeny.com/design-choices/measured-density/) (characteristic)
- [Generous white space](https://stylogeny.com/design-choices/generous-white-space/) (occasional)

### Typography
- [Humanist sans](https://stylogeny.com/design-choices/humanist-sans/) (defining)
- [Lowercase only](https://stylogeny.com/design-choices/lowercase-only/) (occasional)
- [Rounded sans](https://stylogeny.com/design-choices/rounded-sans/) (occasional)

### Colour
- [Gradients](https://stylogeny.com/design-choices/gradients/) (defining)
- [Analogous harmony](https://stylogeny.com/design-choices/analogous-harmony/) (characteristic)
- [Light ground](https://stylogeny.com/design-choices/light-ground/) (characteristic)
- [Iridescent & holographic](https://stylogeny.com/design-choices/iridescent-and-holographic/) (occasional)

### Form & shape
- [Rounded & pill](https://stylogeny.com/design-choices/rounded-and-pill/) (characteristic)
- [Biomorphic curves](https://stylogeny.com/design-choices/biomorphic-curves/) (characteristic)

### Surface & texture
- [Gloss & highlights](https://stylogeny.com/design-choices/gloss-and-highlights/) (defining)
- [Frosted glass](https://stylogeny.com/design-choices/frosted-glass/) (defining)
- [Skeuomorphic material](https://stylogeny.com/design-choices/skeuomorphic-material/) (occasional)

### Ornament
- [Restrained accents](https://stylogeny.com/design-choices/restrained-accents/) (characteristic)
- [Cosmic & celestial](https://stylogeny.com/design-choices/cosmic-and-celestial/) (occasional)

### Imagery
- [Straight photography](https://stylogeny.com/design-choices/straight-photography/) (characteristic)
- [3D render](https://stylogeny.com/design-choices/3d-render/) (characteristic)
- [Icons & pictograms](https://stylogeny.com/design-choices/icons-and-pictograms/) (characteristic)
- [Treated photography](https://stylogeny.com/design-choices/treated-photography/) (occasional)

### Medium & production
- [App & OS interface](https://stylogeny.com/design-choices/app-and-os-interface/) (defining)
- [Web & CSS](https://stylogeny.com/design-choices/web-and-css/) (characteristic)
- [Motion & broadcast](https://stylogeny.com/design-choices/motion-and-broadcast/) (occasional)

### Tone & intent
- [Utopian & idealistic](https://stylogeny.com/design-choices/utopian-and-idealistic/) (characteristic)
- [Calm & contemplative](https://stylogeny.com/design-choices/calm-and-contemplative/) (characteristic)
- [Technological & futurist](https://stylogeny.com/design-choices/technological-and-futurist/) (characteristic)
- [Warm & approachable](https://stylogeny.com/design-choices/warm-and-approachable/) (occasional)

Avoids: Flat, Grain & noise, Photocopy & distress, Earth & mineral, Condensed display, Horror vacui, Rebellious & subversive

Palette: #4fb3e8, #22c3c9, #6cc04a, #f5fbff, #0b5fa5, #b8e04a

Typefaces: Frutiger (Adrian Frutiger, 1976), Segoe UI (Microsoft), Myriad (Apple corporate typeface, 2002–2015)

Known for: Microsoft Windows Vista Aero (2007) and Windows 7 (2009); Windows Live Messenger; Nintendo Wii system menu (2006); Apple Mac OS X Aqua and iTunes; Consumer Aesthetics Research Institute (named the aesthetic, 2017)

## Where it comes from, and what it’s close to

- Grew out of: [Y2K Futurism](https://stylogeny.com/styles/y2k-futurism.md) (1997–2005)
- Influenced by: [Skeuomorphic UI](https://stylogeny.com/styles/skeuomorphism.md) (2000–2013)
- Led to: [Glassmorphism](https://stylogeny.com/styles/glassmorphism.md) (2020–present)
- Alike in its design choices: [Claymorphism & Soft 3D](https://stylogeny.com/styles/claymorphism.md) (2020–present), 54% alike
- Alike in its design choices: ['Good Morning' Greeting Images (WhatsApp Forward Vernacular)](https://stylogeny.com/styles/good-morning-greeting-image.md) (2013–present), 40% alike
- Alike in its design choices: [Streamline Moderne](https://stylogeny.com/styles/streamline-moderne.md) (1930–1945), 35% alike
- Alike in its design choices: [YouTube Thumbnail Style (the 'YouTube Face')](https://stylogeny.com/styles/youtube-thumbnail.md) (2012–present), 33% alike
- Alike in its design choices: [Neumorphism](https://stylogeny.com/styles/neumorphism.md) (2019–2021), 33% alike
- Alike in its design choices: [Vaporwave](https://stylogeny.com/styles/vaporwave.md) (2011–2017), 33% alike

## Real works

- ['Experience Windows Vista: Windows Aero' feature page](https://web.archive.org/web/20070302212021/http://www.microsoft.com/windows/products/windowsvista/features/experiences/aero.mspx): Microsoft, 2007 (Windows Vista consumer release 30 January 2007; page archived 2 March 2007), Internet Archive Wayback Machine
- [Windows Live Messenger download page ('More than just chatting')](https://web.archive.org/web/20090216074647/http://download.live.com/messenger): Microsoft (Windows Live), 2009 (Windows Live Messenger 2009; page footer '© 2009 Microsoft'; archived 16 February 2009), Internet Archive Wayback Machine
- [Mac OS X Leopard home page ('Add a new Mac to your Mac')](https://web.archive.org/web/20071101131506/http://www.apple.com/macosx/): Apple Inc., 2007 (Leopard released 26 October 2007; page footer 'Copyright © 2007 Apple Inc.'; archived 1 November 2007), Internet Archive Wayback Machine

## Sources

- Consumer Aesthetics Research Institute, ‘Frutiger Aero’ (cari.institute/aesthetics/frutiger-aero)
- Microsoft, Windows Vista User Experience Interaction Guidelines (Aero)

---

From Stylogeny (https://stylogeny.com/), an atlas of graphic-design styles by Van Riel Online Services. How it is made: https://stylogeny.com/about/. Cite as: Stylogeny, “Frutiger Aero”, https://stylogeny.com/styles/frutiger-aero/