Stylogeny combining Flash-Era Web Design × Frutiger Aero

Try

Style combination · Contrasts

Flash-Era Web Design × Frutiger Aero

The glossy era that followed swapped the dark gunmetal console for light, glossy, rounded interfaces.

From the research on Flash-Era Web Design (Flash Portfolio Sites)

Mix them and make something Flash-Era Web Design Frutiger Aero

FUTUREFlash-Era Web Design × Frutiger Aero
A sample layout drawn from the recipe: shapes from Flash-Era Web Design, their arrangement from Flash-Era Web 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.

Flash-Era Web Design (Flash Portfolio Sites) Frutiger Aero

Type from Flash-Era Web Design
Colour from Frutiger Aero
Form from Flash-Era Web Design
Composition from Flash-Era Web Design
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 · Flash-Era Web Design

Future

Silkscreen, standing in for Silkscreen (Jason Kottke), a free pixel face for 'extremely small graphical display type', meant for nav bars, menus and captions at 8 pt multiples with anti-aliasing off

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 Flash-Era Web Design. The ink reads on the ground at 4.5:1 or more.

Flash-Era Web Design (Flash Portfolio Sites) Frutiger Aero

  • #f5fbff ground · 36%
  • #0b5fa5 ink · 14%
  • #22c3c9 accent · 18%
  • #ff6a00 accent · 14%
  • #4fb3e8 accent · 10%
  • #9bd31c accent · 8%

As CSS

:root {
  --ground: #f5fbff;
  --ink: #0b5fa5;
  --accent-1: #22c3c9;
  --accent-2: #ff6a00;
  --accent-3: #4fb3e8;
  --accent-4: #9bd31c;
  --font-display: "Silkscreen", monospace;
  --font-text: "Fira Sans", sans-serif;
}

04

The two styles

A dark science-fiction poster headed “NEXUS” centers on a towering metallic structure wrapped by a circular track, with glowing orange and lime-green components. Framed technical panels surrounding it show a wireframe globe, orbital diagrams, a futuristic corridor, moons, modular parts, charts, and a cityscape facing an orange sun. 1997–2010 · Global / networked, North America, Western Europe, East Asia Flash-Era Web Design (Flash Portfolio Sites) Websites built as one designed Flash movie (a plug-in in the browser) rather than as HTML pages: a fixed-size stage, often dark, entered through a preloader and an animated intro with sound. Inside, navigation is a console of framed panels on a visible technical grid, with hairline rules, numbered sections and readouts, tiny aliased pixel fonts in tracked capitals, a grey or navy key lit by one hot accent, metallic gradients and 3D renders. Menus zoom, slide and react to the mouse. Its experimental wing, from praystation to yugop.com's white page, made the site a field for code-driven play. 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 Flash-Era Web Design

With Frutiger Aero

All 13 combinations with Frutiger Aero

Every style combination