# Claymorphism

También llamado: UI de arcilla, clay 3D, UI inflada, UI esponjosa  
Época: 2021-2023 (bautizado por Michal Malewicz, 2021)  
Página: https://designforai.dev/es/style/claymorphism

## Rasgos

- formas esponjosas e infladas que parecen moldeadas en arcilla blanda
- dos sombras inset (clara arriba a la izquierda, más oscura abajo a la derecha) más una gran sombra exterior
- radio muy grande (24-40px), a menudo esquinas totalmente redondeadas en elementos pequeños
- colores pastel y caramelo con un tono algo más oscuro del mismo matiz para la sombra
- ilustraciones de aspecto 3D e iconos redondeados a juego con las superficies
- amigable, con aire de juguete, mucho espacio en blanco
- fondos claros, nunca modo oscuro

Paleta: #f4f1fb página, #ffffff tarjeta, #a78bfa arcilla primaria, #7c3aed tinte de sombra primaria, #fbcfe8 arcilla secundaria, #1f1235 texto

Tipografía: Fredoka o Baloo 2 para títulos (redondas, gruesas), Nunito para cuerpo; títulos 700 a 32-48px, cuerpo 500 a 16-17px

## Haz

- empareja cada color de arcilla con un tono un 20% más oscuro para su sombra inset inferior derecha
- mantén las sombras exteriores en el propio matiz del elemento (no gris) para que parezca moldeado, no flotante
- usa radio grande en todas partes, incluidas imágenes y campos de formulario

## Evita

- no uses esquinas afiladas ni bordes finos en ningún sitio; rompe el material
- no lo uses sobre fondos oscuros; ahí la arcilla se lee como plástico mojado
- no lo mezcles con iconos planos; usa iconos redondeados y rellenos

Conocido por: Ilustraciones de producto cercanas a Duolingo, apps infantiles y edtech, landings de juegos play-to-earn de 2022

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

Construye el sitio en estilo claymorphism. Fondo de página #f4f1fb, texto #1f1235. Las tarjetas son blancas con border-radius 32px y 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). Los botones primarios son #a78bfa con box-shadow: inset -6px -6px 12px #7c3aed, inset 6px 6px 12px #c4b5fd, 8px 12px 24px rgba(124,58,237,0.3), radio 999px, texto blanco 700. Color de arcilla secundario #fbcfe8 con sombra #f472b6. Sin bordes, sin esquinas afiladas; imágenes e inputs con radio 24px. Fuentes: Fredoka 700 para títulos a 48/36/24px, Nunito 500 para cuerpo a 17px, line-height 1.6. Espaciado generoso (40px de padding de sección en móvil, 96px en escritorio). Hover: translateY(-3px) y la sombra crece, 200ms ease-out; active: las sombras inset intercambian lados.