Flat design for websites: from Metro to flat 2.0, and fixing affordance
Flat design removes the imitation of real materials (leather, glass, bevels, glossy highlights) and builds interfaces from flat colour, type and simple shapes. Taken to the extreme it made buttons look like labels. The workable version, often called flat 2.0, keeps the plain surfaces but adds back just enough cues, such as a fill, a border, an underline or a faint shadow, that people can always tell what they can press.
From skeuomorphism to flat
Early smartphone interfaces imitated physical objects: a notes app on yellow lined paper, a calendar stitched in leather, buttons with glossy highlights. The term for this is skeuomorphism. Microsoft's Metro design language for Windows Phone moved the other way around 2010, with type-led screens, flat coloured tiles and almost no ornament. Apple's iOS 7 in 2013 dropped its textured look for thin type, flat colour and translucency, and the change spread quickly to the web.
Google's Material Design, launched in 2014, is often described as the first mainstream flat 2.0: flat surfaces, but arranged in layers with consistent shadows that show which sheet sits on top and what can be pressed. Most interfaces since then sit somewhere between those two positions.
Flat design principles
- No imitation materials. No textures, bevels, gloss or embossing.
- Colour as structure. Solid fills separate areas and mark actions.
- Type carries the hierarchy. Size, weight and space do the work that borders and boxes did.
- Simple icons. Outlines or solid shapes without perspective or lighting.
- Generous space. With no decoration to separate things, whitespace does it.
The affordance problem
An affordance, in interface terms, is the cue that tells you what an element does. A bevelled button looked pressable because it looked like a physical button. Strip the bevel, the shadow and the border, and a button can look exactly like a coloured label next to it. Nielsen Norman Group's Kate Moran tested this in Flat UI Elements Attract Less Attention and Cause Uncertainty: pages with weak clickability signifiers made people look at more elements and take longer to find what they could click, which she read as uncertainty rather than engagement. The same article notes flat design copes better on simple, conventional layouts with prominent controls and contrasting link colours.
There's an accessibility side too. WCAG's Non-text Contrast criterion asks that the visual cues needed to identify a control, such as a field's border or a button's edge, reach 3:1 against what's next to them. A pale grey input border on a white page, a common flat look, often fails.
Flat 2.0 design: the cues to add back
| Element | Pure flat (risky) | Flat 2.0 (clear) |
|---|---|---|
| Primary button | Coloured text, no shape | Solid fill in the action colour, comfortable padding |
| Secondary button | Plain text the same colour as body | Outline with 3:1 contrast, or underlined text link |
| Text links | Colour only | Underlined in running text |
| Form fields | A faint bottom line | A full border with enough contrast, label above |
| Cards that link | A flat block like every other | Hover and focus states, a clear title link |
| Layers (menus, dialogs) | Same colour as the page | A faint shadow or a contrasting surface |
The rule of thumb: decoration can go, signals can't. Keep one consistent treatment for everything clickable and don't give anything else that treatment. See button design for websites and shadows in UI design.
When a flat design website fits
Flat UI design suits most small sites: a few pages, a conventional layout, one main action. It loads fast, adapts to any screen and is easy to keep consistent. It struggles in dense applications with many controls of different kinds, where people need more help telling a toggle from a tab from a label, and in brands whose appeal is tactile, where some texture in photography helps. It's also the base that minimalist web design and Swiss style build on.
Flat design in Anticode
All seven Anticode design systems are broadly flat: flat colour grounds and surfaces, no textures or gloss, and corner radius assigned by role rather than rounded everywhere. Buttons are solid fills in the single action colour (outlined in it, in Luxury), so the clickable things stand apart; form fields have full borders and labels above them; standalone text links keep an underline. Depth, where there is any, is structural: hairline rules in Editorial and Swiss, a blueprint grid in Technical, hard offset shadows with no blur in Brutalist.
Several Critic checks protect the flat look from its usual failures: no coloured glow under buttons and cards, cards that don't all lift on hover, and hover states that do more than fade the opacity, which is a weak signal on a flat page.
Questions people ask
What is flat 2.0?
Flat design with a few depth and clickability cues added back, such as subtle shadows, clear borders and filled buttons, so people can tell what's interactive.
Is flat design still used?
Yes. Most current websites are flat in the broad sense, with small cues for layers and controls.
Why are flat buttons hard to recognise?
Without a fill, border or shadow, a button can look like plain coloured text or a label.