# Flat Design

> No gradients, no shadows, no textures — colour and geometry alone define every element.

- Category: Digital era
- Era: 2010–2014
- Origin: Windows Phone Metro UI (Microsoft, 2010)
- Lesson: https://design.dawit.dev/styles/flat
- Try it: https://design.dawit.dev/styles/flat?style=flat

## Where it came from

Microsoft's Metro design language for Windows Phone (2010) was an early, influential flat system, and Android's Holo followed in 2011. The decisive moment was Apple's iOS 7 (2013), which replaced the heavy skeuomorphism of iOS 6 with a flat, light, deeply coloured interface. Flat design was partly a reaction to skeuomorphism's visual complexity and partly helped by high-resolution displays, where crisp type and simple shapes looked sharp without ornament.

## How to spot it

- No drop shadows, gradients, bevels or textures anywhere
- Solid fills and clear silhouettes for all icons and buttons
- Strong, often bright colour palette for navigation and accents
- Large, bold typefaces compensate for the absence of decoration

## Strengths

- Fast to render and load
- Scales well across every screen density
- Clean, modernist aesthetic that still reads contemporary

## Weaknesses

- Buttons and interactive elements lose obvious affordance
- With no depth cues, hierarchy depends entirely on size and colour
- Everything looks similar — distinguishing surfaces is hard

## In the wild

- Windows Phone Metro UI
- iOS 7 redesign
- Early Android Holo

## Use it when

Digital products that need speed, clarity and a modern aesthetic without heavy visual metaphors.

## Related styles
[Flat 2.0](https://design.dawit.dev/styles/flat-2.md), [Minimalism](https://design.dawit.dev/styles/minimalism.md), [Material Design](https://design.dawit.dev/styles/material-design.md)