Design for AI

Estilo UI pastel suave: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de ui pastel suave. Também chamado de design pastel, UI pastel suave, UI de bala, UI sonhadora, estética soft, kawaii-lite. 2019 em diante (Dribbble, capas do Notion, apps de bem-estar e lifestyle).

Traços

  • tons claros dessaturados: lilás, menta, pêssego, azul-bebê, amarelo manteiga sobre uma base quase branca
  • raio suave (16-24px), sombras pálidas na cor do tom, nenhum preto em lugar nenhum
  • texto em roxo profundo atenuado ou ardósia em vez de preto
  • sans arredondada e amigável; às vezes uma serifa suave para títulos
  • gradientes suaves entre dois pastéis, manchas desfocadas no fundo
  • ícones arredondados com traço de 2px, pequenos adesivos e brilhinhos como acentos
  • movimento calmo: flutuações lentas, fades suaves

Paleta

#fbf8ff base, #e9dcff lilás, #d8f3ec menta, #ffe1d6 pêssego, #d9ecff azul-bebê, #fff3c4 manteiga, #4a3f6b texto

Tipografia

Quicksand, Nunito, Poppins ou DM Sans para tudo; opcionalmente Lora ou Playfair para títulos; títulos 700 a 36-48px, corpo 400-500 a 16-17px

Faça

  • mantenha cada cor a 15-35% de saturação e acima de 85% de luminosidade, exceto o texto
  • use sombras tingidas (acento a 25% de alpha, blur de 20-30px) para os cards parecerem flutuar sobre algodão
  • confira o contraste do texto; roxo profundo #4a3f6b sobre pastéis passa, cinzas médios não

Evite

  • não adicione um acento saturado para dar "pop"; quebra a calma
  • não use dark mode; pastéis não sobrevivem a ele
  • não use cantos vivos nem bordas finas

Conhecido por: Lojas de templates do Notion, Headspace (parcial), app Finch, apps de bem-estar adjacentes ao Calm, marketing da Sanrio

Semente CSS
:root {
  --bg: #fbf8ff;
   --fg: #4a3f6b;
   --accent: #e9dcff;
   --accent2: #d8f3ec;
   --accent3: #ffe1d6;
   --radius: 20px;
   --shadow: 0 12px 30px rgba(169,143,224,0.25);
   --font: 'Quicksand',sans-serif
}
Prompt

Construa o site em estilo UI pastel suave. Fundo #fbf8ff com duas manchas desfocadas atrás do hero (#e9dcff e #d8f3ec, filter blur(90px), opacity 0.8). Texto #4a3f6b, secundário #7d739c, sem preto puro. Pastéis: lilás #e9dcff, menta #d8f3ec, pêssego #ffe1d6, azul-bebê #d9ecff, manteiga #fff3c4. Fonte Quicksand: títulos 700 a 44/32/22px, corpo 500 a 17px line-height 1.65. Cards: brancos, border-radius 20px, box-shadow 0 12px 30px rgba(169,143,224,0.25), padding 28px; cada card recebe uma faixa de cabeçalho pastel ou um selo de ícone num tom diferente. Botão primário: linear-gradient(135deg, #c9b3ff, #a98fe0), texto branco, raio 999px, 48px de altura, sombra no mesmo roxo a 30%. Inputs: preenchimento #f4f0fb, sem borda, raio 14px, anel de foco 3px #c9b3ff. Ícones 24px, traço 2px, junções arredondadas, em #7d739c. Adicione pequenos SVGs de brilhinhos perto da manchete. Movimento: as manchas derivam 20px ao longo de 12s, os cards sobem 4px no hover em 250ms ease.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo UI pastel suave. Fundo #fbf8ff com duas manchas desfocadas atrás do hero (#e9dcff e #d8f3ec, filter blur(90px), opacity 0.8). Texto #4a3f6b, secundário #7d739c, sem preto puro. Pastéis: lilás #e9dcff, menta #d8f3ec, pêssego #ffe1d6, azul-bebê #d9ecff, manteiga #fff3c4. Fonte Quicksand: títulos 700 a 44/32/22px, corpo 500 a 17px line-height 1.65. Cards: brancos, border-radius 20px, box-shadow 0 12px 30px rgba(169,143,224,0.25), padding 28px; cada card recebe uma faixa de cabeçalho pastel ou um selo de ícone num tom diferente. Botão primário: linear-gradient(135deg, #c9b3ff, #a98fe0), texto branco, raio 999px, 48px de altura, sombra no mesmo roxo a 30%. Inputs: preenchimento #f4f0fb, sem borda, raio 14px, anel de foco 3px #c9b3ff. Ícones 24px, traço 2px, junções arredondadas, em #7d739c. Adicione pequenos SVGs de brilhinhos perto da manchete. Movimento: as manchas derivam 20px ao longo de 12s, os cards sobem 4px no hover em 250ms ease.

## Tokens
:root { --bg:#fbf8ff; --fg:#4a3f6b; --accent:#e9dcff; --accent2:#d8f3ec; --accent3:#ffe1d6; --radius:20px; --shadow:0 12px 30px rgba(169,143,224,0.25); --font:'Quicksand',sans-serif }

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