Flat 2.0

Live preview base style — press Wear

This month

$2,100

Revenue, up 12% from last month.

Customer	Plan	Status	MRR
Northwind	Studio	Active	$1,240
Acme Labs	Team	Trial	$0
Kaldi Coffee	Studio	Active	$860

Use this style 16 tokens

--bg oklch(97% 0 0)
--fg oklch(18% 0.01 240)
--muted oklch(52% 0.008 240)
--surface oklch(100% 0 0)
--surface-2 oklch(93% 0.008 240)
--border oklch(85% 0.005 240)
--accent oklch(58% 0.19 248)
--accent-fg oklch(99% 0 0)
--focus oklch(58% 0.19 248)

Token	Value
--font-body	`'Lato', system-ui, sans-serif`
--font-display	`'Lato', system-ui, sans-serif`
--font-mono	`ui-monospace, monospace`
--radius	`3px`
--radius-sm	`3px`
--shadow	`none`
--shadow-lg	`none`

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,400&display=swap');

:root {
	--bg: oklch(97% 0 0);
	--fg: oklch(18% 0.01 240);
	--muted: oklch(52% 0.008 240);
	--surface: oklch(100% 0 0);
	--surface-2: oklch(93% 0.008 240);
	--border: oklch(85% 0.005 240);
	--accent: oklch(58% 0.19 248);
	--accent-fg: oklch(99% 0 0);
	--focus: oklch(58% 0.19 248);
	--font-body: 'Lato', system-ui, sans-serif;
	--font-display: 'Lato', system-ui, sans-serif;
	--font-mono: ui-monospace, monospace;
	--radius: 3px;
	--radius-sm: 3px;
	--shadow: none;
	--shadow-lg: none;
}

Where it came from

Origin: Google Material Design (2014) and Apple refinements to iOS 7–9

Pure flat design immediately exposed a usability problem: with no shadows or borders, nothing looked tappable. Flat 2.0 added one degree of metaphor back — a ghost of a shadow, a barely-there gradient, a slight elevation difference between layers. Google's Material Design formalised this with an explicit paper-and-ink elevation model. The term 'Flat 2.0' is a community coinage rather than any organisation's official name.

How to spot it

One thin drop shadow permitted per elevation level
Long flat shadows (45-degree, no blur) as a graphic accent
Subtle gradient fills — light to slightly lighter, never shiny
Layering to show hierarchy: bars float above content

Trade-offs

Strengths	Weaknesses
Restores affordance without the weight of skeuomorphism	Middle ground that can feel neither flat nor truly dimensional
Distinguishes interactive from static elements clearly	Long shadows age quickly
Works inside brand systems that already use flat illustration	Easy to break: one over-saturated shadow collapses the whole system

In the wild

Google's redesigned Search results page circa 2014
Countless SaaS dashboards 2015–2018
Microsoft Fluent early phase

Use it when

A flat system that needs clearer interactive affordance without committing to full material depth.