Style combination · Pairs well
City Pop Illustration × Flat Design
City pop's hard-edged, untextured fields translate directly into vector illustration; use them for web heroes and app splash screens that need a calm sense of place rather than icons, keeping city pop's deep perspective, which flat design avoids.
Mix them and make something City Pop Illustration Flat Design
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.
City Pop Illustration Flat Design
- Type from Flat Design
- Colour from City Pop Illustration
- Form from Flat Design
- Composition from City Pop Illustration
-
Flat Design avoids illusion of depth: this is where the two pull against each other.
- Surface from City Pop Illustration
02
The type
Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.
Text · City Pop Illustration
The painted look of Japanese city pop record sleeves and magazine covers, fixed by Hiroshi Nagai's sleeve for Eiichi Ohtaki's A Long Vacation (1981) and Eizin Suzuki's for Tatsuro Yamashita's For You (1982). Idealised, sunlit resort scenes of pools, palms, modernist villas, roadside shops and cars by the sea under a deep blue sky, built from hard-edged flat colour with Nagai's black shadows or Suzuki's clean outlines, and usually few or no people. Aspirational in Japan's boom years, it returned with the city pop revival from the 2010s and is now read as nostalgia.
Shippori Mincho; City Pop Illustration used Widely letter-spaced sans-serif capitals for title and artist, set small in the sky at the top left of the full-bleed picture, as in FOR YOU and TATSURO YAMASHITA on Suzuki's sleeve (1982) and Large bold condensed capitals, the second word spaced out with interpuncts, one letter picked out in red, as in A LONG V·A·C·A·T·I·O·N on Nagai's sleeve for Ohtaki (1981)
03
The colours
The ground and leading colours come from City Pop Illustration, with a counter-accent from Flat Design. The ink reads on the ground at 4.5:1 or more.
City Pop Illustration Flat Design
-
#f7f5efground · 36% -
#0f3a8aink · 14% -
#f2c230accent · 18% -
#35a9dcaccent · 14% -
#e74c3caccent · 10% -
#f3a5b6accent · 8%
As CSS
:root {
--ground: #f7f5ef;
--ink: #0f3a8a;
--accent-1: #f2c230;
--accent-2: #35a9dc;
--accent-3: #e74c3c;
--accent-4: #f3a5b6;
--font-display: "Inter", sans-serif;
--font-text: "Shippori Mincho", serif;
}Use it with care
City Pop Illustration: The look rests on two working artists, Hiroshi Nagai and Eizin Suzuki, who still paint, sell originals and prints and take commissions. For their pictures, commission or license them. Otherwise invent your own place, light and palette in the shared idiom: never trace or recompose their compositions (A Long Vacation's pool, For You's radio shop, Pacific Breeze's villas), never ask an image model for their style by name, and never present a generated image as their work or as a period sleeve.
04
The two styles
05
More combinations
With City Pop Illustration
- Googie & Atomic Age Pairs well · Googie's motels, diners and boomerang roadside signs are the American architecture these painters idealised; borrow its signage and script for the fascias in a city pop street scene.
- Hand-Painted Signage & Vernacular Lettering Pairs well · Suzuki fills his streets with painted shop names; real sign-writers' letterforms make the fascias in a city pop scene read as made rather than typeset.
- Vaporwave Contrasts · Nagai's resorts fed vaporwave, which collages palms and pools with busts, dialog boxes and glitches as ironic consumer debris; choose city pop when the place should be painted sincerely, whole and uncluttered.
- Synthwave / Outrun Contrasts · Both put palms and cars on a 1980s horizon, but synthwave lights them in neon at night over a grid and chrome; switch to city pop for clear daylight, a deep blue sky and flat, cool colour.
- Lo-fi Anime Aesthetic Contrasts · Both are sincere, painted and calm, and both found a worldwide audience on YouTube, lofi in its 24/7 streams and city pop in its 2010s revival; lofi puts one absorbed anime figure in a lamp-lit room at dusk with soft edges, city pop opens onto an empty sunlit place under a deep blue sky in hard-edged colour. Choose city pop when the brief is a place, not a person.
- Pop Art Graphics Contrasts · Nagai drew on pop art and on David Hockney, a British pop artist who painted Los Angeles swimming pools in acrylic, rather than on Warhol's quotation: pop art appropriates mass-media images with halftone and irony, city pop paints an invented place sincerely in flat, untextured colour; choose city pop when the picture should invite rather than comment.
- Showa and Heisei Retro Revival (Japanese Packaging and Kissaten Graphics) Pairs well · Shares 1980s nostalgia; pair its painted, airy scenes with retro tableware graphics for a fuller period feel.
- Ligne Claire (Franco-Belgian Clear Line) Pairs well · Eizin Suzuki drew his city-pop sleeves and FM Station covers in a ligne-claire manner likened to Hergé's, rendering gradation in solid lines; pair them for a sunlit resort or street scene drawn in clear line under a deep blue sky, keeping ligne claire's unshaded colour.
With Flat Design
- Skeuomorphic UI Contrasts · Its direct predecessor and foil: one realistic, textured object on an otherwise flat screen becomes an instant focal point.
- Japanese Postwar Modernism Pairs well · Add the emblematic circles and calm colour fields of Japanese postwar posters to give flat screens a stronger focal image.
- Victorian Letterpress & Wood Type Contrasts · Ornamented wood type and dense rules show everything flat design removed; quote one decorative headline to warm a sterile interface.
- Isotype Pictorial Statistics Pairs well · Borrow Isotype's rows of identical counting pictograms to turn a flat icon set into honest, readable data graphics.
- Indie Pixel Art Revival Contrasts · Resolution-independent vector flatness against a deliberately coarse grid lit with glows and depth.
- Arts & Crafts Movement Contrasts · Borrow one engraved border or initial to give a flat interface a crafted, editorial moment against its vector minimalism.
- WPA Silkscreen Posters Pairs well · Its flat layered shapes translate directly to vector; use the national-park look for warm, civic flat illustration.
- Munich 1972 Olympic Design (Otl Aicher) Pairs well · Flat icon families descend from these round-headed figures; borrow a single stroke width (which, as Holt shows, the 1972 figures only approximate, since a limb built from an orthogonal and a 45-degree segment cannot keep one thickness) and the 0, 45 and 90-degree rule to keep a screen icon set coherent.