Style combination · Contrasts
Frutiger Aero × Punk
Glossy optimism is everything punk rejects; one torn xerox fragment on an aero gradient reads as instant sabotage.
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 Punk & DIY Zine
- Type from Punk
- Colour from Frutiger Aero
- Form from Frutiger Aero
- Composition from Punk
- Surface from Frutiger Aero
-
Punk avoids gloss & highlights: this is where the two pull against each other, which is the point of the contrast.
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
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 Punk. The ink reads on the ground at 4.5:1 or more.
Frutiger Aero Punk & DIY Zine
-
#f5fbffground · 36% -
#0b5fa5ink · 14% -
#22c3c9accent · 18% -
#f7e400accent · 14% -
#4fb3e8accent · 10% -
#ff2fa0accent · 8%
As CSS
:root {
--ground: #f5fbff;
--ink: #0b5fa5;
--accent-1: #22c3c9;
--accent-2: #f7e400;
--accent-3: #4fb3e8;
--accent-4: #ff2fa0;
--font-display: "Rock Salt", cursive;
--font-text: "Fira Sans", sans-serif;
}04
The two styles
05
More combinations
With Frutiger Aero
- Vaporwave Pairs well · Both trade on mid-2000s tech nostalgia; mix Aero bubbles and skies with vaporwave's pastel 3D for retro-internet campaigns.
- Brutalist Web Design Contrasts · Raw HTML against bubbly gloss is a sharp foil for ironic or nostalgic web projects.
- Glassmorphism Pairs well · Glassmorphism is its flatter heir; reintroduce a touch of Aero gloss and nature photography to warm up frosted-glass UI.
- Flat Design Contrasts · Flat design was the reaction that ended it; toggle gloss against flat to signal ‘then and now’ in retro tech work.
- Forum Signature Art (Sig & C4D Render Graphics) Contrasts · The same years' glossy, light and airy interface look against the sig's dark, smudged depth.
- Skeuomorphic UI Pairs well · Share gloss and depth; combine Aero's glass and nature with skeuomorphic objects for convincing 2000s-nostalgia interfaces.
- Solarpunk Contrasts · Both pair green nature with optimistic technology, but Aero renders it as glossy stock photography, bubbles and glass for a product; choose solarpunk for painted, handmade, lived-in places and shared infrastructure.
- Glitch Art & Datamosh Graphics Contrasts · Aero's glossy, seamless interface is the frictionless technology glitch art questions; corrupt one Aero-style screen to show what the gloss hides.
With Punk
- Russian Constructivism Pairs well · Borrow Constructivist diagonals and red-and-black bars to give punk collage the agitprop structure post-punk sleeves later adopted.
- Risograph & Indie Print Culture Pairs well · Run punk collages through a riso in fluoro pink and black to keep the DIY ethic while gaining richer, layered colour.
- Corporate Identity Modernism Contrasts · Deface a clean corporate identity with xerox collage to make the critique of polish and authority explicit.
- Fluxus Graphics (Maciunas) Contrasts · Both mix found type with appropriated pictures, but punk tears and photocopies while Fluxus keeps a clean offset black, justified blocks and a tight edge-to-edge grid; use the Fluxus version when cheap materials should still look ordered.
- Natural Wine Label Art Pairs well · Alice Feiring calls the earlier natural-wine scene punk rock: of Gut Oggau she says 'This is where things grow up and stop being so punk rock' (Punch, 2021). Take punk's refusal of professional polish but drop the collage and the anger: one felt-pen picture on a white label carries the same do-it-yourself stance in a friendlier voice.
- Grapus (French Militant Graphic Collective) Contrasts · Both scribble over photographs, but punk's photocopied blacks and ransom-note type are cheap and nihilist, while Grapus prints bright offset colour, mostly on white, in an optimistic, party-backed voice.
- Situationist Détournement Graphics Contrasts · Punk reprised the situationist prank in the late 1970s, but it packs torn photocopies and mixed type into crowded pages; détournement keeps a few recognisable fragments and lets each one say the opposite of what it said. Borrow the rewritten balloon when a punk layout needs a sharper argument.
- Internet Ugly & Meme Vernacular Pairs well · Both make amateur, cheap reproduction a stance; combine ransom-note cut-ups with Impact captions and crude pasted photos for zine-style posters that still read as a joke.