---
name: Flat design
slug: flat-design
category: aesthetic
status: published
created: 2026-08-21T00:00:00.000Z
modified: 2026-08-26T00:00:00.000Z
definition: A style that strips away depth cues, using solid fills, sharp edges,
  and bold color instead of shadow, gradient, bevel, or texture.
aliases:
  - name: flat UI
    source: community
  - name: flat design 1.0
  - name: 2D interface style
tags:
  - depth
relations:
  contrastWith:
    - skeuomorphism
    - neubrutalism
    - minimalism
    - flat-design-2
    - metro-design
    - neumorphism
    - elevation
  variantOf: []
  partOf: []
  seeAlso:
    - long-shadow
implementations: []
sources:
  - title: "NN/g: Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better
      for Users"
    url: https://www.nngroup.com/articles/flat-design/
  - title: "CareerFoundry: Flat Design: A Complete Beginner's Guide"
    url: https://careerfoundry.com/en/blog/ui-design/what-is-flat-design/
demo: inline
exhibit: false
useWhen: no depth cues at all, only color and shape
---

Flat design is defined by what it refuses. No drop shadow, no gradient, no bevel, no
inner glow, no photographic texture, no faux material. What is left has to do the work
on its own: a solid fill, an edge, a colour, a piece of type, and the space between
things. The discipline came out of Swiss graphic design by way of Microsoft's Metro
language, and it went mainstream when iOS 7 dropped the leather and linen in 2013.

Its practical advantages were real and are still worth having. Flat interfaces render
crisply at any resolution, weigh almost nothing, redraw fast, and scale to a system of
components without every new surface needing bespoke lighting. Colour also becomes
load bearing rather than decorative, since it is one of the few signals left for
grouping and hierarchy.

The problem showed up in usability testing rather than in critique: with the depth cues
gone, people stopped seeing which things were clickable. NN/g's work on flat design
found weaker signifiers of clickability and slower scanning, and the answer became what
they call flat 2.0, which keeps the flat vocabulary but permits a small amount of
shadow or a subtle layer to tell an interactive thing from a decorative one. That is
the version most design systems ship today: flat by default, one or two elevation
levels held in reserve for things that float.