Stylogeny combining Flat Design × Low Poly Illustration

Try

Style combination · Pairs well

Flat Design × Low Poly Illustration

Flat design's solid fields, sans type and calm grids make a quiet frame for one faceted hero illustration or a triangle-mesh header; keep the interface flat so the facets are the only place where depth appears.

From the research on Low Poly Illustration

Mix them and make something Flat Design Low Poly Illustration

OrbitFlat Design × Low Poly Illustration
A sample layout drawn from the recipe: shapes from Low Poly Illustration, their arrangement from Low Poly Illustration, the finish from Flat Design. 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.

Flat Design Low Poly Illustration

Type from Flat Design
Colour from Flat Design
Form from Low Poly Illustration
Composition from Low Poly Illustration

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

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 · Flat Design

Orbit

Inter, standing in for Segoe UI

Text · Low Poly Illustration

A digital illustration and game look in which subjects are built from a visible mesh of a few flat-shaded polygons, so that animals, faces, vehicles and landscapes read as hard-edged facets with no outline or texture. Around 2012 the polygon budgets of early real-time 3D became a chosen style, in Timothy J. Reynolds's Cinema 4D illustrations and then in indie games such as MirrorMoon EP (2013). Triangulation tools such as Trianglify then carried it into 2D vector art, posters and web backgrounds.

Jost; Low Poly Illustration used Faceted display faces that replace every curve with straight segments, such as Ray Larabie's Alphii (Typodermic, 2006), which in the foundry's words 'does not imitate a mesh or toolpath; it shares their economy' and A clean geometric sans set flat beside the faceted picture, so the letters stay legible while the mesh carries the image

03

The colours

The ground and leading colours come from Flat Design, with a counter-accent from Low Poly Illustration. The ink reads on the ground at 4.5:1 or more.

Flat Design Low Poly Illustration

  • #ecf0f1 ground · 36%
  • #2c3e50 ink · 14%
  • #f1c40f accent · 18%
  • #e8704f accent · 14%
  • #3fa58a accent · 10%
  • #3498db accent · 8%

As CSS

:root {
  --ground: #ecf0f1;
  --ink: #2c3e50;
  --accent-1: #f1c40f;
  --accent-2: #e8704f;
  --accent-3: #3fa58a;
  --accent-4: #3498db;
  --font-display: "Inter", sans-serif;
  --font-text: "Jost", 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 faceted geometric illustration shows a hiker with an orange backpack standing on a rocky cliff above a winding river, evergreen forests, and mountain peaks. A large pale sun hangs over the valley beneath the word “FURTHER.” 2012–present · Global / networked Low Poly Illustration A digital illustration and game look in which subjects are built from a visible mesh of a few flat-shaded polygons, so that animals, faces, vehicles and landscapes read as hard-edged facets with no outline or texture. Around 2012 the polygon budgets of early real-time 3D became a chosen style, in Timothy J. Reynolds's Cinema 4D illustrations and then in indie games such as MirrorMoon EP (2013). Triangulation tools such as Trianglify then carried it into 2D vector art, posters and web backgrounds.

05

More combinations

With Flat Design

All 20 combinations with Flat Design

With Low Poly Illustration

Every style combination