Stylogeny combining Frutiger Aero × Media-Player

Try

Style combination · Contrasts

Frutiger Aero × Media-Player

Airy glass, sky and nature on light grounds against dense dark-metal consoles; use one aero highlight to soften a skin.

From the research on Media-Player & Desktop Skins (Winamp-Era Skinning)

Mix them and make something Frutiger Aero Media-Player

FutureFrutiger Aero × Media-Player2004 · 1997
A sample layout drawn from the recipe: shapes from Frutiger Aero, their arrangement from Media-Player, 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 Media-Player & Desktop Skins (Winamp-Era Skinning)

Type from Media-Player
Colour from Frutiger Aero
Form from Frutiger Aero
Composition from Media-Player

Frutiger Aero avoids horror vacui: this is where the two pull against each other, which is the point of the contrast.

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 · Media-Player

Future

Pixelify Sans, standing in for Hand-pixelled bitmap character sheets drawn per skin for scrolling titles

Text · 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.

Fira Sans; Frutiger Aero used Frutiger and Segoe UI

03

The colours

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

Frutiger Aero Media-Player & Desktop Skins (Winamp-Era Skinning)

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

As CSS

:root {
  --ground: #f5fbff;
  --ink: #0b5fa5;
  --accent-1: #22c3c9;
  --accent-2: #ffae00;
  --accent-3: #4fb3e8;
  --accent-4: #2f6fd6;
  --font-display: "Pixelify Sans", monospace;
  --font-text: "Fira Sans", 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 elaborate chrome science-fiction control panel surrounds a blue underwater scene with glowing jellyfish, fish, and an illuminated submerged city. Green displays read “NIGHT DIVE” and “03:27,” alongside playback buttons, equalizer bars, planetary graphics, and orange-lit tubes. 1997–2008 · Global / networked, North America, Western Europe Media-Player & Desktop Skins (Winamp-Era Skinning) An amateur interface craft of the dial-up years in which fans repainted small software windows, above all the Winamp media player, as imaginary hardware: hi-fi faceplates, sci-fi consoles and game props in pixel-painted chrome and brushed metal, with glowing LCD readouts on dark wells, packed transport buttons and spectrum analysers. Freeform formats cut the window into blobs and pods; a large fan strand ranged from simple recolours to anime, game and band art, often in glaring colours and at the cost of legibility.

05

More combinations

With Frutiger Aero

All 13 combinations with Frutiger Aero

With Media-Player

Every style combination