Stylogeny combining Corporate Identity Modernism × Flat Design

Try

Style combination · Pairs well

Corporate Identity Modernism × Flat Design

Flat UI inherits these reductive marks; reuse their clear-space and colour-code discipline when scaling icons across screens.

From the research on Corporate Identity Modernism

Mix them and make something Corporate Identity Modernism Flat Design

FormCorporate Identity × Flat Design1955 · 2010
A sample layout drawn from the recipe: shapes from Corporate Identity Modernism, their arrangement from Corporate Identity Modernism, 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.

Corporate Identity Modernism Flat Design

Type from Corporate Identity Modernism
Colour from Flat Design
Form from Corporate Identity Modernism
Composition from Corporate Identity Modernism
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 · Corporate Identity Modernism

Form

Inter Tight, standing in for Helvetica

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 Corporate Identity Modernism. The ink reads on the ground at 4.5:1 or more.

Corporate Identity Modernism Flat Design

  • #ecf0f1 ground · 36%
  • #2c3e50 ink · 14%
  • #f1c40f accent · 18%
  • #d7261e accent · 14%
  • #e74c3c accent · 10%
  • #0a4fa0 accent · 8%

As CSS

:root {
  --ground: #ecf0f1;
  --ink: #2c3e50;
  --accent-1: #f1c40f;
  --accent-2: #d7261e;
  --accent-3: #e74c3c;
  --accent-4: #0a4fa0;
  --font-display: "Inter Tight", sans-serif;
  --font-text: "Inter", sans-serif;
}

05

More combinations

With Corporate Identity Modernism

All 28 combinations with Corporate Identity Modernism

With Flat Design

All 20 combinations with Flat Design

Every style combination