---
name: Flat 2.0
slug: flat-design-2
category: aesthetic
status: published
created: 2026-08-21T00:00:00.000Z
modified: 2026-08-21T00:00:00.000Z
definition: "Flat design with the depth cues put back in small doses: soft
  shadow, subtle gradient, and hover feedback that show what can actually be
  clicked."
aliases:
  - name: semi-flat design
  - name: almost flat design
  - name: flat design 2.0
    source: nngroup
  - name: near-flat
tags:
  - depth
relations:
  contrastWith:
    - flat-design
    - neo-skeuomorphism
  variantOf: []
  partOf: []
  seeAlso: []
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: "UXPin: The 7-Minute Guide to Flat Design 2.0"
    url: https://www.uxpin.com/studio/blog/the-7-minute-guide-to-flat-design-2-0/
demo: inline
exhibit: false
useWhen: flat surfaces, but affordance restored with light shadow
---

Flat 2.0 is a retreat, and it is worth naming as one. [Flat design](/flat-design) removed
every cue that suggested a surface had thickness, and within a couple of years the people
building flat interfaces were quietly putting a few of them back: a soft shadow under a
card, one gentle gradient across a header, a slightly lighter plane for the thing that
floats. The name comes from NN/g, whose usability work on the original style is the
reason the correction happened at all. What makes it a style rather than a patch is that
the restoration is rationed. Depth is spent only where it says something.

The parts list is short. One elevation level, or two at most, held for surfaces that
genuinely sit above other surfaces. A gradient shallow enough that you have to look for
it. Layered planes, each a shade apart, instead of drawn borders everywhere. And feedback
on interaction: a control that lifts, brightens, or presses when the pointer meets it. What
stays is everything flat design was good at, the geometry, the confident colour, the
absence of fake leather and stitching, so a Flat 2.0 screen still reads as flat at a
glance and only reveals the depth on inspection.

The argument for it was never aesthetic. Testing found that stripping depth stripped
[signifiers](/signifier): people could not tell which rectangles were buttons, missed
controls entirely, and slowed down on pages where colour and position were the only clues
that something was clickable. Ghost buttons and unlined text fields were the worst
offenders. Restoring a shadow does not restore the pretence that a button is a physical
object, which is what [skeuomorphism](/skeuomorphism) was for. It restores the much
smaller claim that this rectangle is a thing you can act on, and that claim is what an
[affordance](/affordance) has to communicate before anything else on the page matters.

Material Design got to a comparable answer by the opposite route, inventing a physics of
paper and elevation up front rather than walking a purge back, which is why its shadows
follow a rule and Flat 2.0's tend to be a house choice. Either way the discipline is the
same in practice: pick one shadow, decide which components are allowed to use it, and
treat every additional level as something that has to be argued for. A flat interface with
shadows on everything is not Flat 2.0, it is just an interface with shadows on everything.