Design for AI

Estilo Claymorphism: prompt de design de UI

Paleta, regras de tipografia e um prompt pronto para colar de claymorphism. Também chamado de clay UI, argila 3D, UI inflada, UI fofinha. 2021-2023 (batizado por Michal Malewicz, 2021).

Traços

  • formas fofas e infladas que parecem moldadas em argila macia
  • duas sombras inset (clara no canto superior esquerdo, mais escura no inferior direito) mais uma grande sombra externa
  • raio muito grande (24-40px), muitas vezes cantos totalmente arredondados em elementos pequenos
  • cores pastel e de bala com um tom levemente mais escuro do mesmo matiz para a sombra
  • ilustrações com aparência 3D e ícones em forma de bolha combinam com as superfícies
  • amigável, com cara de brinquedo, muito espaço em branco
  • fundos claros, nunca dark mode

Paleta

#f4f1fb página, #ffffff card, #a78bfa argila primária, #7c3aed tom de sombra primária, #fbcfe8 argila secundária, #1f1235 texto

Tipografia

Fredoka ou Baloo 2 para títulos (redondas, robustas), Nunito para o corpo; títulos 700 a 32-48px, corpo 500 a 16-17px

Faça

  • combine cada cor de argila com um tom 20% mais escuro para a sombra inset inferior direita
  • mantenha as sombras externas no próprio matiz do elemento (não cinza) para parecer moldado, não flutuante
  • use raio grande em tudo, incluindo imagens e campos de input

Evite

  • não use cantos vivos nem bordas finas em lugar nenhum; quebra o material
  • não use sobre fundos escuros; a argila vira plástico molhado ali
  • não misture com ícones flat; use ícones arredondados e preenchidos

Conhecido por: Ilustrações de produto no estilo Duolingo, apps infantis e de edtech, landing pages de jogos play-to-earn em 2022

Semente CSS
:root {
  --bg: #f4f1fb;
   --fg: #1f1235;
   --accent: #a78bfa;
   --accent-dark: #7c3aed;
   --radius: 32px;
   --shadow: inset -8px -8px 16px rgba(124,58,237,0.35),inset 8px 8px 16px rgba(255,255,255,0.6),12px 20px 40px rgba(124,58,237,0.25);
   --font: 'Fredoka',sans-serif
}
Prompt

Construa o site em estilo claymorphism. Fundo da página #f4f1fb, texto #1f1235. Os cards são brancos com border-radius 32px e box-shadow: inset -8px -8px 16px rgba(31,18,53,0.08), inset 8px 8px 16px rgba(255,255,255,0.9), 12px 20px 40px rgba(31,18,53,0.12). Botões primários em #a78bfa com box-shadow: inset -6px -6px 12px #7c3aed, inset 6px 6px 12px #c4b5fd, 8px 12px 24px rgba(124,58,237,0.3), raio 999px, texto branco 700. Cor de argila secundária #fbcfe8 com sombra #f472b6. Sem bordas, sem cantos vivos; imagens e inputs recebem raio 24px. Fontes: Fredoka 700 para títulos a 48/36/24px, Nunito 500 para o corpo a 17px, line-height 1.6. Espaçamento generoso (40px de padding de seção no mobile, 96px no desktop). Hover: translateY(-3px) e a sombra cresce, 200ms ease-out; active: as sombras inset trocam de lado.
Para design.md, .cursorrules ou AGENTS.md
## Direção de design
Construa o site em estilo claymorphism. Fundo da página #f4f1fb, texto #1f1235. Os cards são brancos com border-radius 32px e box-shadow: inset -8px -8px 16px rgba(31,18,53,0.08), inset 8px 8px 16px rgba(255,255,255,0.9), 12px 20px 40px rgba(31,18,53,0.12). Botões primários em #a78bfa com box-shadow: inset -6px -6px 12px #7c3aed, inset 6px 6px 12px #c4b5fd, 8px 12px 24px rgba(124,58,237,0.3), raio 999px, texto branco 700. Cor de argila secundária #fbcfe8 com sombra #f472b6. Sem bordas, sem cantos vivos; imagens e inputs recebem raio 24px. Fontes: Fredoka 700 para títulos a 48/36/24px, Nunito 500 para o corpo a 17px, line-height 1.6. Espaçamento generoso (40px de padding de seção no mobile, 96px no desktop). Hover: translateY(-3px) e a sombra cresce, 200ms ease-out; active: as sombras inset trocam de lado.

## Tokens
:root { --bg:#f4f1fb; --fg:#1f1235; --accent:#a78bfa; --accent-dark:#7c3aed; --radius:32px; --shadow:inset -8px -8px 16px rgba(124,58,237,0.35),inset 8px 8px 16px rgba(255,255,255,0.6),12px 20px 40px rgba(124,58,237,0.25); --font:'Fredoka',sans-serif }

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

Snippets neste estilo