Design for AIEstilo Neumorphism: prompt de design de UI
Paleta, regras de tipografia e um prompt pronto para colar de neumorphism. Também chamado de soft UI, neomorfismo, UI extrudada, UI de sombras suaves. 2019-2021 (conceito no Dribbble por Alexander Plyuto, fim de 2019).
Traços
- os elementos compartilham exatamente a cor do fundo e são modelados só por duas sombras
- uma sombra clara no canto superior esquerdo, uma escura no inferior direito, a mesma distância
- estado elevado para cards e botões, estado inset para inputs e botões pressionados
- contraste baixo no geral; a página inteira é um único cinza suave ou tom pálido
- raio de 16-24px, elementos robustos, poucas bordas
- cor de acento usada com parcimônia em ícones, toggles e progresso
- quase nenhuma textura; a superfície lê como plástico fosco
Paleta
#e0e5ec base, #ffffff sombra clara, #a3b1c6 sombra escura, #4a5568 texto, #6c63ff acento, #48bb78 sucesso
Tipografia
Nunito ou Poppins (arredondadas, amigáveis); títulos 700 a 28-36px, corpo 500 a 16px; a cor do texto precisa ser no mínimo #4a5568 para ter contraste
Faça
- mantenha cada superfície na mesma cor da página; a profundidade vem só do par de sombras
- use sombras inset em tudo em que o usuário digita ou que ele pressionou
- rode uma checagem de contraste no texto; o estilo falha em acessibilidade se você descuidar
Evite
- não adicione bordas nem sombras pretas; deixa de ser neumórfico
- não use sobre fundos brancos ou pretos; a sombra clara desaparece
- não empilhe muitos elementos elevados perto uns dos outros; as sombras brigam
Conhecido por: Shots conceituais no Dribbble em 2020, conceitos de redesign do app da Tesla, mockups fintech skeuomórficos-lite
Semente CSS
:root {
--bg: #e0e5ec;
--fg: #4a5568;
--accent: #6c63ff;
--light: #ffffff;
--dark: #a3b1c6;
--radius: 20px;
--shadow: 9px 9px 16px #a3b1c6,-9px -9px 16px #ffffff;
--font: 'Nunito',sans-serif
}
Prompt
Construa o site em estilo neumorphism (soft UI). A página e cada elemento compartilham o fundo #e0e5ec. Elementos elevados (cards, botões, nav) usam box-shadow 9px 9px 16px #a3b1c6, -9px -9px 16px #ffffff; inputs e estados pressionados usam inset 6px 6px 12px #a3b1c6, inset -6px -6px 12px #ffffff. Nenhuma borda em lugar nenhum. Border-radius 20px nos cards, 14px nos botões, 999px em toggles e avatares. Texto #4a5568, títulos #2d3748, acento #6c63ff para ícones, estados ativos e barras de progresso. Fonte Nunito: títulos 700 a 36/28/22px, corpo 500 a 16px, line-height 1.6. Espaçamento generoso: 32px entre elementos elevados para as sombras nunca se sobreporem, padding dos cards 28px. Hover nos botões: a distância da sombra encolhe de 9px para 5px em 150ms; active vira inset. Verifique que cada cor de texto passa no WCAG AA sobre #e0e5ec.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo neumorphism (soft UI). A página e cada elemento compartilham o fundo #e0e5ec. Elementos elevados (cards, botões, nav) usam box-shadow 9px 9px 16px #a3b1c6, -9px -9px 16px #ffffff; inputs e estados pressionados usam inset 6px 6px 12px #a3b1c6, inset -6px -6px 12px #ffffff. Nenhuma borda em lugar nenhum. Border-radius 20px nos cards, 14px nos botões, 999px em toggles e avatares. Texto #4a5568, títulos #2d3748, acento #6c63ff para ícones, estados ativos e barras de progresso. Fonte Nunito: títulos 700 a 36/28/22px, corpo 500 a 16px, line-height 1.6. Espaçamento generoso: 32px entre elementos elevados para as sombras nunca se sobreporem, padding dos cards 28px. Hover nos botões: a distância da sombra encolhe de 9px para 5px em 150ms; active vira inset. Verifique que cada cor de texto passa no WCAG AA sobre #e0e5ec.
## Tokens
:root { --bg:#e0e5ec; --fg:#4a5568; --accent:#6c63ff; --light:#ffffff; --dark:#a3b1c6; --radius:20px; --shadow:9px 9px 16px #a3b1c6,-9px -9px 16px #ffffff; --font:'Nunito',sans-serif }
Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.