# Claymorphism

Também chamado de: clay UI, argila 3D, UI inflada, UI fofinha  
Era: 2021-2023 (batizado por Michal Malewicz, 2021)  
Página: https://designforai.dev/pt/style/claymorphism

## 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

```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.