# Flat 2.0

Também chamado de: flat design 2.0, semi-flat, quase flat, flat com sombras, Material-lite  
Era: 2014-2018 (correção ao flat design puro depois de 2013)  
Página: https://designforai.dev/pt/style/flat-2-0

## Traços

- cores chapadas e formas simples, mas com sombras leves para mostrar o que é clicável
- gradientes sutis (dois tons próximos) em vez de preenchimentos chapados puros
- raio de 4-8px, sombras suaves de 2-8px em cards e botões
- paletas vivas, saturadas mas harmoniosas (azul, verde-azulado, laranja, vermelho)
- ícones simples de linha ou preenchidos, ilustrações vetoriais flat
- affordances claras: botões elevados, cards em relevo, inputs com contorno
- movimento suave: 200ms ease no hover, ripple ou fade no clique

Paleta: #ffffff página, #f5f7fa superfície, #2d3748 texto, #718096 atenuado, #3182ce primária, #38b2ac secundária, #ed8936 acento quente

Tipografia: Roboto, Open Sans, Lato ou Source Sans 3; títulos 600-700 a 28-48px, corpo 400 a 16px, botões 500 a 14-16px

## Faça

- dê aos elementos interativos uma sombra de 2px em repouso e 6px no hover para a affordance ficar óbvia
- use uma primária saturada para ações e uma secundária só para destaques
- mantenha os ícones num único conjunto com um único peso de traço

## Evite

- não vá para o flat total; a diferença para o flat de 2013 é a sombra
- não use sombras longas nem truques de "sombra flat" diagonal a 45 graus
- não use mais de três cores além dos cinzas

Conhecido por: Produtos Google da era Material 1, Dropbox 2015, Slack 2016, Mailchimp 2016

## Semente CSS

```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

Construa o site em estilo Flat 2.0. Fundo #ffffff, superfícies de seção #f5f7fa, texto #2d3748, atenuado #718096, primária #3182ce, secundária #38b2ac, um acento quente #ed8936. Fonte Open Sans: títulos 700 a 44/30/22px, corpo 400 a 16px line-height 1.6, botões 600 a 15px. Cards: brancos, border-radius 6px, box-shadow 0 2px 4px rgba(45,55,72,0.12), hover 0 6px 16px rgba(45,55,72,0.16) com translateY(-2px), 200ms ease. Botão primário: fundo #3182ce com gradiente para #2b6cb0 na base, texto branco, raio 6px, sombra 0 2px 4px rgba(49,130,206,0.35); o estado active remove a sombra. Inputs: borda 1px #cbd5e0, raio 6px, anel de foco 2px #3182ce. Ícones: ícones de linha de 24px com traço de 2px em #3182ce. Ilustração vetorial flat simples no hero usando as três cores. Espaçamento em escala de 8px, padding de seção 64-96px. Sem vidro, sem gradientes pesados, sem dark mode.