# Flat 2.0

Also called: flat design 2.0, semi-flat, almost flat, flat with shadows, Material-lite  
Era: 2014-2018 (correction to pure flat design after 2013)  
Page: https://designforai.dev/style/flat-2-0

## Traits

- flat colours and simple shapes, but with light shadows to show what is clickable
- subtle gradients (two close shades) instead of pure flat fills
- 4-8px radius, soft 2-8px shadows on cards and buttons
- bright, saturated but harmonious palettes (blue, teal, orange, red)
- simple line or filled icons, flat vector illustrations
- clear affordances: raised buttons, elevated cards, outlined inputs
- gentle motion: 200ms ease on hover, ripple or fade on click

Palette: #ffffff page, #f5f7fa surface, #2d3748 text, #718096 muted, #3182ce primary, #38b2ac secondary, #ed8936 warm accent

Type: Roboto, Open Sans, Lato or Source Sans 3; headings 600-700 at 28-48px, body 400 at 16px, buttons 500 at 14-16px

## Do

- give interactive elements a 2px shadow at rest and 6px on hover so affordance is obvious
- use one saturated primary for actions and one secondary for highlights only
- keep icons in one set at one stroke weight

## Don't

- do not go fully flat; the difference from 2013 flat is the shadow
- do not use long shadows or 45-degree diagonal "flat shadow" gimmicks
- do not use more than three colours plus greys

Known for it: Google Material 1 era products, Dropbox 2015, Slack 2016, Mailchimp 2016

## CSS seed

```css
:root{--bg:#ffffff; --surface:#f5f7fa; --fg:#2d3748; --muted:#718096; --accent:#3182ce; --accent2:#38b2ac; --radius:6px; --shadow:0 2px 4px rgba(45,55,72,0.12); --font:'Open Sans',sans-serif}
```

## Prompt

Build the site in Flat 2.0 style. Background #ffffff, section surfaces #f5f7fa, text #2d3748, muted #718096, primary #3182ce, secondary #38b2ac, one warm accent #ed8936. Font Open Sans: headings 700 at 44/30/22px, body 400 at 16px line-height 1.6, buttons 600 at 15px. Cards: white, border-radius 6px, box-shadow 0 2px 4px rgba(45,55,72,0.12), hover 0 6px 16px rgba(45,55,72,0.16) with translateY(-2px), 200ms ease. Primary button: #3182ce background with a gradient to #2b6cb0 at the bottom, white text, radius 6px, shadow 0 2px 4px rgba(49,130,206,0.35); active state removes the shadow. Inputs: 1px #cbd5e0 border, radius 6px, focus ring 2px #3182ce. Icons: 24px line icons at 2px stroke in #3182ce. Simple flat vector illustration in the hero using the three colours. Spacing 8px scale, 64-96px section padding. No glass, no heavy gradients, no dark mode.