Start
Lisbon
23°C
Tue15
Windows 8's Start screen, flat's big bang — tap the weather tile: state is a content swap, never a shadow
Flat Design
Established movement
Standard industry vocabulary since ~2012 — the name the skeuomorphism backlash gave itself; NN/g documents both the definition and the history.
also called flat UI, flat 2.0 (with subtle depth added back)
Flat Design renders the interface as pure 2D: surfaces are solid color fills, icons are simple geometric glyphs, and nothing pretends to be lit, embossed, or made of a material. Hierarchy comes from color, size, and typography instead of shadows and bevels. It became the dominant look around 2012–2013 (Windows 8's Metro, then iOS 7) as the direct rejection of skeuomorphism's gloss and texture.
Scope: This entry covers strict flat rendering. 'Flat 2.0' — flat surfaces with a few functional shadows reintroduced (Material Design's elevation is the systematic version) — is the common modern compromise, not a separate entry.
If you called it…
…you meant Flat Design.
What makes it this — the defining signals
- Solid 2D color fillsSurface & material
Every surface is one flat color — no gradients, no gloss, no texture, no material of any kind.
- No simulated depthDepth & light
No drop shadows, bevels, or highlights; elements sit on one plane and edges are drawn by color change alone.
- Simple glyph iconsImagery & ornament
Icons are reduced to minimal geometric silhouettes — a single-color shape reads as the whole object.
- Color carries the hierarchyColor & contrast
Bright, often saturated block colors distinguish actions and regions — color does the job shadows used to do.
Style brief — paste into your agent
Create the surface using flat design. Defining signals: every surface a solid single-color fill — zero gradients, gloss, or texture; no simulated depth — no drop shadows, bevels, or specular highlights, edges drawn by color change alone; icons as simple one-color geometric glyphs; hierarchy carried by color blocks, size, and clean sans-serif type. Keep the palette and density flexible — flat can be sparse or dense. In CSS this means background-color instead of background-image gradients, border: none or 1px solid, box-shadow: none. Do not drift into skeuomorphism: the decisive difference is that nothing imitates a lit physical material. Preserve 4.5:1 text contrast, and make interactive elements identifiable without shadows — clear color affordance, visible hover/pressed states, and visible focus rings.
Often confused with Skeuomorphism
The same little app, rendered in both styles — only the style changes, so the difference you see IS the difference.
Welcome back
Pick up where you left off.
Flat Design
Welcome back
Pick up where you left off.
Flat Design
This is Flat Design because surfaces are unshaded solid fills and icons are abstract glyphs — nothing imitates a physical object or material.
It would become skeuomorphism if the fills grew gloss, texture, and lighting until controls read as physical things you could touch.
vs Minimalism: This is Flat Design because the claim is about RENDERING: however much content is on screen, it's all drawn as unshaded 2D color. It would be minimalism if the claim were about CONTENT — few elements, huge negative space — which a flat UI can completely fail at (flat but crowded is common).
Full style DNA
Surface & material
Every surface is one flat color — no gradients, no gloss, no texture, no material of any kind.
Depth & light
No drop shadows, bevels, or highlights; elements sit on one plane and edges are drawn by color change alone.
A specular highlight or leather texture breaks the style — that's the doorway back to skeuomorphism.
Imagery & ornament
Icons are reduced to minimal geometric silhouettes — a single-color shape reads as the whole object.
Color & contrast
Bright, often saturated block colors distinguish actions and regions — color does the job shadows used to do.
Typography
Clean sans-serif type in strong size steps separates levels of content where boxes and bevels used to.
Layout & composition
Flat governs RENDERING only — a flat UI can be a sparse landing page or a dense dashboard.
In code — optional starting points
The brief above is framework-neutral; these are concrete handles if your stack matches.
| CSS | background: #2f80ed; border: none; border-radius: 4px; box-shadow: none; | A flat button: one fill, no lighting anywhere |
| CSS | filter: none; background-image: none; text-shadow: none; | The un-skeuomorphing checklist — nothing simulates light |
| Tailwind | bg-sky-600 text-white rounded shadow-none hover:bg-sky-700 | State changes by color swap, not elevation |
Accessibility & misuse
- NN/g measured the cost: flat UIs with weak signifiers make users uncertain what is clickable — give buttons and links unmistakable color affordance, not just proximity.
- With shadows gone, color is doing double duty — check 4.5:1 contrast for text AND 3:1 for the boundaries of controls against their background.
- Never remove focus outlines to keep things 'clean'; a flat UI without focus rings is unusable by keyboard.
Origin
Rose to prominence around 2012: Microsoft's Metro language (Windows Phone 7 in 2010, Windows 8 in 2012) proved it at OS scale, and Apple's iOS 7 redesign in 2013 ended the skeuomorphic era for good. NN/g traces the deeper roots to Swiss/International typographic style.