Digital era · 2010–2014
Flat Design
No gradients, no shadows, no textures — colour and geometry alone define every element.
Live preview base style — press Wear
$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(22% 0.01 200) - --muted
oklch(50% 0.005 200) - --surface
oklch(100% 0 0) - --surface-2
oklch(94% 0.004 175) - --border
oklch(85% 0.004 175) - --accent
oklch(66% 0.18 172) - --accent-fg
oklch(99% 0 0) - --focus
oklch(66% 0.18 172)
| Token | Value |
|---|---|
| --font-body | 'Lato', system-ui, sans-serif |
| --font-display | 'Lato', system-ui, sans-serif |
| --font-mono | ui-monospace, monospace |
| --radius | 0px |
| --radius-sm | 0px |
| --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(22% 0.01 200);
--muted: oklch(50% 0.005 200);
--surface: oklch(100% 0 0);
--surface-2: oklch(94% 0.004 175);
--border: oklch(85% 0.004 175);
--accent: oklch(66% 0.18 172);
--accent-fg: oklch(99% 0 0);
--focus: oklch(66% 0.18 172);
--font-body: 'Lato', system-ui, sans-serif;
--font-display: 'Lato', system-ui, sans-serif;
--font-mono: ui-monospace, monospace;
--radius: 0px;
--radius-sm: 0px;
--shadow: none;
--shadow-lg: none;
}Where it came from
Origin: Windows Phone Metro UI (Microsoft, 2010)
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
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Fast to render and load | Buttons and interactive elements lose obvious affordance |
| Scales well across every screen density | With no depth cues, hierarchy depends entirely on size and colour |
| Clean, modernist aesthetic that still reads contemporary | 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.