Design for AIEstilo Flat 2.0: prompt de design de UI
Paleta, regras de tipografia e um prompt pronto para colar de flat 2.0. Também chamado de flat design 2.0, semi-flat, quase flat, flat com sombras, Material-lite. 2014-2018 (correção ao flat design puro depois de 2013).
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
: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.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
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.
## Tokens
: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 }
Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.