# Claymorphism

Auch bekannt als: Clay UI, 3D-Clay, aufgeblasenes UI, Puffy UI  
Ära: 2021-2023 (2021 von Michal Malewicz benannt)  
Seite: https://designforai.dev/de/style/claymorphism

## Merkmale

- aufgeblasene, pralle Formen, die wie aus weichem Ton modelliert aussehen
- zwei inset-Schatten (hell oben links, dunkler unten rechts) plus ein großer äußerer Drop-Shadow
- sehr großer Radius (24-40px), kleine Elemente oft komplett rund
- Pastell- und Bonbonfarben mit einer etwas dunkleren Schattierung desselben Farbtons für den Schatten
- 3D-wirkende Illustrationen und blobbige Icons passen zu den Oberflächen
- freundlich, spielzeughaft, viel Weißraum
- helle Hintergründe, nie Dark Mode

Palette: #f4f1fb Seite, #ffffff Karte, #a78bfa Primär-Clay, #7c3aed Primär-Schattenton, #fbcfe8 Sekundär-Clay, #1f1235 Text

Schrift: Fredoka oder Baloo 2 für Überschriften (rund, klobig), Nunito für Fließtext; Überschriften 700 bei 32-48px, Fließtext 500 bei 16-17px

## Do

- gib jeder Clay-Farbe eine 20 % dunklere Schattierung für den inset-Schatten unten rechts
- halte äußere Schatten im eigenen Farbton des Elements (nicht Grau), damit es modelliert wirkt, nicht schwebend
- nutze überall großen Radius, auch bei Bildern und Eingabefeldern

## Don't

- nutze nirgends scharfe Ecken oder dünne Ränder; das zerstört das Material
- nutze es nicht auf dunklen Hintergründen; Clay wirkt dort wie nasses Plastik
- mische es nicht mit flachen Icons; nutze runde, gefüllte Icons

Bekannt dafür: Produktillustrationen im Duolingo-Umfeld, Kinder- und Edtech-Apps, Play-to-earn-Landingpages 2022

## CSS-Seed

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

Baue die Seite im Claymorphism-Stil. Seitenhintergrund #f4f1fb, Text #1f1235. Karten sind weiß mit border-radius 32px und 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). Primärbuttons sind #a78bfa mit box-shadow: inset -6px -6px 12px #7c3aed, inset 6px 6px 12px #c4b5fd, 8px 12px 24px rgba(124,58,237,0.3), Radius 999px, weißer Text 700. Sekundäre Clay-Farbe #fbcfe8 mit Schatten #f472b6. Keine Ränder, keine scharfen Ecken; Bilder und Eingabefelder bekommen Radius 24px. Schriften: Fredoka 700 für Überschriften bei 48/36/24px, Nunito 500 für Fließtext bei 17px, line-height 1.6. Großzügige Abstände (40px Abschnittspadding mobil, 96px auf Desktop). Hover: translateY(-3px) und der Schatten wächst, 200ms ease-out; aktiv: die inset-Schatten tauschen die Seiten.