c. 2010–2017 · Global
Flat Design
Also known as Flat UI, Metro Design
The deliberately two-dimensional interface style that stripped away skeuomorphic shadows, gradients, and textures in favor of solid color, crisp icons, and clean typography.
Original specimen, not a historical artifactOriginal specimen in the flat-design UI style. Owned; source: Design Style Book (original).
Across disciplines
- Architecture: Minimalist Architecture
About the style
Flat design emerged as a sharp reaction against skeuomorphism — the early-2010s convention of making digital interfaces mimic real-world materials like leather, felt, and glossy buttons. Microsoft's Metro design language, debuting on Windows Phone and Windows 8, led the charge with its 'authentically digital' philosophy of flat tiles, bold typography, and content over chrome. The movement reached the mainstream when Apple rebuilt iOS 7 in 2013 around flat color, thin type, and translucency, abandoning the rich textures of earlier iOS. Visually the style relies on solid unshaded color fields, simple geometric icons, generous whitespace, and clean sans-serif type, eliminating drop shadows, bevels, and gradients. Beyond aesthetics, flatness improved performance and scalability across the explosion of screen sizes brought by responsive web and mobile, and its purist first wave eventually softened into 'flat 2.0,' which reintroduced subtle depth cues to aid usability.
Notable examples
- ▸Microsoft — Metro design language, Windows Phone 7 (2010)
- ▸Apple — iOS 7 redesign (2013)
- ▸Microsoft — Windows 8 tile interface (2012)
Anatomy of Flat Design
The numbered markers call out the design elements that define this style. Hover or tap a marker to see its breakdown.
Original specimen, not a historical artifactOriginal specimen in the flat-design UI style. Owned; source: Design Style Book (original).
Interface elements are filled with flat, unshaded color, replacing glossy three-dimensional buttons.
Icons are pared down to clean essential shapes with no texture or realism.
Large, clean sans-serif type carries the hierarchy in place of decorative chrome.
Drop shadows, bevels, and gradients are removed and open space organizes the layout — genuinely two-dimensional.
How Flat Design connects
Styles form a network, not a tree. Explore the direct neighbours below — click any to travel the map one hop at a time.
- Influenced by
- Parallel / cross-current
- Evolved from
- Reaction against
Influenced by Swiss Style — revived the Swiss grid, sans-serif type, and minimalism for the screen
Parallel / cross-current Minimalist Architecture — the screen-design expression of the same reductive, 'less is more' impulse
Material Design evolved from Flat Design — answered flat design's ambiguity by reintroducing elevation, shadow, and motion
Brutalist Web Design reaction against Flat Design — a revolt against the templated, drop-shadowed smoothness of mainstream UX
Neumorphism evolved from Flat Design
Glassmorphism evolved from Flat Design
Corporate Memphis evolved from Flat Design
Maximalist Graphic reaction against Flat Design — an explicit revolt against a decade of flat, minimal sameness
Describe it like this
Prompt-ready vocabulary for describing or re-creating the Flat Design look.