Stylogenyin the style of Flat Design

Digital native · 2010–2016 · North America, Global / networked

Flat Design

Also known as Flat UI, Metro style

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.

Make something in this styleGet advice in this styleMix it with another style

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.
AI-generated by Stylogeny from the style’s design choices. Not a real or historical work.

01

How it works

  • Remove every simulated material: no bevels, gloss, stitching, textures or drop shadows on controls.
  • Signal what is tappable with colour, position and typography rather than imitated physical buttons.
  • Draw icons as simple geometric pictograms on a shared grid and stroke weight.
  • Use a handful of bright, saturated hues as solid blocks against white or one dark neutral.
  • Let large, clean sans-serif type carry the hierarchy, with generous space around it.
  • Arrange content in tiles and simple grids that reflow across screen sizes.

Microsoft (Redmond) and Apple (Cupertino) interface teams, spread through Dribbble and web design

02

Its design choices

From Stylogeny’s vocabulary of design choices: defining choices make the style, characteristic ones are usual, occasional ones turn up now and then.

Layout & composition
Space & hierarchy
Typography
Colour
Form & shape
Surface & texture
Ornament
Imagery
Medium & production
Tone & intent
Avoids
Skeuomorphic material, Gloss & highlights, Paper & letterpress bite, Grain & noise, Illusion of depth, Abundant decoration, Borders & frames, Ornamented display

Palette

  • #1abc9c
  • #3498db
  • #e74c3c
  • #f1c40f
  • #2c3e50
  • #ecf0f1

Typefaces

  • Segoe UI

  • Helvetica Neue

  • Open Sans

  • Proxima Nova

  • Lato

Known for

  • Microsoft Metro design language

    Zune; Windows Phone 7, 2010; Windows 8, 2012

  • Apple iOS 7

    2013

  • Google Android 4.0 'Holo' interface

    2011

  • Designmodo, Flat UI kit

    2013

03

Make something in this style

Say what you need, and Stylogeny’s image studio draws it from Flat Design’s design choices and checks it against them. It takes about a minute, and you get a link to share.

Rule out a choice, read the prompt, or blend in another style: take this brief to Mix styles.

04

Where it comes from, and what it’s close to

Before it

The style it grew out of, and the styles it borrowed from.

This styleFlat Design2010–2016 · North America, Global / networked

After it

The styles that grew out of it.

Alike in its design choices

Styles that make many of the same choices, related or not, besides those above.

05

Real works

Artefacts in museums, libraries and archives that show the style, linked at their source.

06

Sources

  1. Kate Meyer, 'Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users', Nielsen Norman Group (2015)
  2. Wikipedia, 'Flat design' (en.wikipedia.org/wiki/Flat_design)

How Stylogeny researches and checks a style: where the facts come from.