Stylogeny combining Flat Design × Indie Pixel Art Revival

Try

Style combination · Contrasts

Flat Design × Indie Pixel Art Revival

Resolution-independent vector flatness against a deliberately coarse grid lit with glows and depth.

From the research on Indie Pixel Art Revival

Mix them and make something Flat Design Indie Pixel Art Revival

A pixel-art adventurer wearing a red scarf stands beside a small dark cat on a cliff, looking toward floating islands topped with castles and cascading waterfalls. White clouds, a large yellow sun, and distant bridges fill the turquoise sky beneath the words “FAR AHEAD.”
AI-generated by Stylogeny from the recipe below, and checked against it: the type from Indie Pixel Art Revival, the form from Indie Pixel Art Revival, the composition from Indie Pixel Art Revival. Not a real or historical work.

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.

Flat Design Indie Pixel Art Revival

Type from Indie Pixel Art Revival
Colour from Flat Design
Form from Indie Pixel Art Revival
Composition from Indie Pixel Art Revival

Flat Design avoids illusion of depth: this is where the two pull against each other, which is the point of the contrast.

Surface from Flat Design

02

The type

Open fonts standing in for each style’s own type, which is often hand-drawn or commercial.

Display · Indie Pixel Art Revival

Hello

Pixelify Sans, standing in for Custom bitmap lettering drawn per game for titles and interface

Text · Flat Design

An interface and illustration language that stripped screens of simulated materials, replacing bevels, gloss and textures with solid fields of colour, clean sans-serif type and reduced pictograms. Formalised in Microsoft's Metro design language (Windows Phone 7, 2010) and made mainstream by Apple's iOS 7 (2013), it applied Swiss modernist reduction to responsive, touch-first screens.

Inter; Flat Design used Segoe UI and Helvetica Neue

03

The colours

The ground and leading colours come from Flat Design, with a counter-accent from Indie Pixel Art Revival. The ink reads on the ground at 4.5:1 or more.

Flat Design Indie Pixel Art Revival

  • #ecf0f1 ground · 36%
  • #2c3e50 ink · 14%
  • #f1c40f accent · 18%
  • #e0607e accent · 14%
  • #e74c3c accent · 10%
  • #5fc9c4 accent · 8%

As CSS

:root {
  --ground: #ecf0f1;
  --ink: #2c3e50;
  --accent-1: #f1c40f;
  --accent-2: #e0607e;
  --accent-3: #e74c3c;
  --accent-4: #5fc9c4;
  --font-display: "Pixelify Sans", monospace;
  --font-text: "Inter", sans-serif;
}

04

The two styles

A bright planning-service homepage features a large “Plan Brighter” headline, an illustration of a woman using a laptop, and four colourful feature tiles. Below, a second illustrated person points at a planning board beside introductory text and a Get Started button. 2010–2016 · North America, Global / networked Flat Design An interface and illustration language that stripped screens of simulated materials, replacing bevels, gloss and textures with solid fields of colour, clean sans-serif type and reduced pictograms. Formalised in Microsoft's Metro design language (Windows Phone 7, 2010) and made mainstream by Apple's iOS 7 (2013), it applied Swiss modernist reduction to responsive, touch-first screens. A pixel-art poster titled “FARLIGHT” shows a scarf-wearing traveler and a small cat on a rocky ledge overlooking a vast city of towers, bridges, and turquoise waterfalls. A huge pink-orange sun glows behind the distant skyline beneath a dark, star-speckled sky. 2004–present · Global / networked, North America, Northern Europe, East Asia Indie Pixel Art Revival Low-resolution pixel art chosen freely by independent game makers long after the hardware limits were gone. The pixel grid stays visible in sprites, worlds and in-game text, but it carries what the old machines could not: wider views, extra colours, multi-layer parallax, soft light and mood-keyed palettes, often mixed with non-pixel portraits, painted cutscenes and high-definition interfaces. Tiny figures cross deep, atmospheric landscapes, so the tone is nostalgic but also contemplative and personal. It reaches key art, logos, crowdfunding pages, soundtrack sleeves and merchandise.

05

More combinations

With Flat Design

All 20 combinations with Flat Design

With Indie Pixel Art Revival

Every style combination