Design for AI

Estilo Arredondado lúdico: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de arredondado lúdico. Também chamado de estilo Duolingo, UI lúdica robusta, UI de botão 3D, UI gamificada, design arredondado amigável. 2019 em diante (redesign do Duolingo em 2019, Headspace, mascotes do Notion).

Traços

  • formas totalmente arredondadas: botões em pílula, raio de 16-24px nos cards, avatares e selos circulares
  • botões robustos "pressionáveis" com uma borda inferior sólida (border-bottom 4px num tom mais escuro) que afunda ao pressionar
  • paleta viva, saturada e alegre: verde, azul, amarelo, vermelho, roxo sobre branco
  • sans arredondada bold em pesos pesados; manchetes grandes e amigáveis
  • mascotes e personagens ilustrados flat com rostos expressivos
  • barras de progresso, sequências, XP, selos: mecânicas de jogo como UI
  • movimento saltitante: easings de mola, balanços, confete no sucesso

Paleta

#ffffff página, #4b4b4b texto, #58cc02 verde, #1cb0f6 azul, #ffc800 amarelo, #ff4b4b vermelho, #ce82ff roxo, #e5e5e5 linha

Tipografia

Nunito (800-900 para títulos, 700 para botões), Fredoka, Baloo 2 ou Varela Round; títulos 800 a 32-56px, corpo 500 a 17px, botões 700 em caixa alta a 15px com tracking 0.05em

Faça

  • construa os botões com cor sólida, border-bottom 4px num tom 20% mais escuro, raio 16px; no active remova a borda inferior e aplique translateY(4px)
  • dê a cada estado uma cor e um ícone: certo é verde, errado é vermelho, bloqueado é cinza
  • use um mascote em três poses (parado, feliz, triste) e reuse-o com consistência

Evite

  • não use fontes finas nem texto cinza abaixo de #777; o estilo é alta energia
  • não use sombras projetadas para profundidade; use a borda inferior 3D
  • não misture cantos vivos em lugar nenhum, incluindo inputs e imagens

Conhecido por: Duolingo, Headspace (parcial), Khan Academy Kids, Kahoot

Semente CSS
:root {
  --bg: #ffffff;
   --fg: #4b4b4b;
   --accent: #58cc02;
   --accent-dark: #58a700;
   --accent2: #1cb0f6;
   --accent3: #ffc800;
   --line: #e5e5e5;
   --radius: 16px;
   --font: 'Nunito',sans-serif
}
Prompt

Construa o site em estilo arredondado lúdico à la Duolingo. Fundo #ffffff, texto #4b4b4b, atenuado #afafaf, linhas #e5e5e5. Cores: verde #58cc02 (escuro #58a700), azul #1cb0f6 (escuro #1899d6), amarelo #ffc800 (escuro #e5a800), vermelho #ff4b4b, roxo #ce82ff. Fonte Nunito: títulos 800 a 52/36/26px, corpo 500 a 17px line-height 1.5, botões 700 em caixa alta 15px com tracking 0.05em. Botões: preenchimento sólido, texto branco, border-radius 16px, 50px de altura, border-bottom 4px solid no tom mais escuro; no active border-bottom 0 e translateY(4px), 80ms. Botões secundários: brancos com borda 2px #e5e5e5 e borda inferior de 4px. Cards: borda 2px #e5e5e5, raio 16px, padding 24px, sem sombra. Barra de progresso: pílula de 16px de altura, trilha #e5e5e5, preenchimento #58cc02 com uma faixa de destaque mais clara de 4px no topo. Os selos são círculos de 64px com ícones flat. Adicione uma ilustração de mascote amigável (flat, arredondado, olhos grandes) ao lado da manchete do hero. Movimento: mola (cubic-bezier(0.34,1.56,0.64,1)) a 300ms ao aparecer; o mascote balança 3deg no hover; explosão de confete no sucesso do formulário.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo arredondado lúdico à la Duolingo. Fundo #ffffff, texto #4b4b4b, atenuado #afafaf, linhas #e5e5e5. Cores: verde #58cc02 (escuro #58a700), azul #1cb0f6 (escuro #1899d6), amarelo #ffc800 (escuro #e5a800), vermelho #ff4b4b, roxo #ce82ff. Fonte Nunito: títulos 800 a 52/36/26px, corpo 500 a 17px line-height 1.5, botões 700 em caixa alta 15px com tracking 0.05em. Botões: preenchimento sólido, texto branco, border-radius 16px, 50px de altura, border-bottom 4px solid no tom mais escuro; no active border-bottom 0 e translateY(4px), 80ms. Botões secundários: brancos com borda 2px #e5e5e5 e borda inferior de 4px. Cards: borda 2px #e5e5e5, raio 16px, padding 24px, sem sombra. Barra de progresso: pílula de 16px de altura, trilha #e5e5e5, preenchimento #58cc02 com uma faixa de destaque mais clara de 4px no topo. Os selos são círculos de 64px com ícones flat. Adicione uma ilustração de mascote amigável (flat, arredondado, olhos grandes) ao lado da manchete do hero. Movimento: mola (cubic-bezier(0.34,1.56,0.64,1)) a 300ms ao aparecer; o mascote balança 3deg no hover; explosão de confete no sucesso do formulário.

## Tokens
:root { --bg:#ffffff; --fg:#4b4b4b; --accent:#58cc02; --accent-dark:#58a700; --accent2:#1cb0f6; --accent3:#ffc800; --line:#e5e5e5; --radius:16px; --font:'Nunito',sans-serif }

Mantenha estados de hover e focus-visible em todo elemento interativo. Não adicione um framework CSS.