Design for AIStil Claymorphism: UI-Design-Prompt
Palette, Schriftregeln und ein einfügbarer Prompt für claymorphism. Auch bekannt als Clay UI, 3D-Clay, aufgeblasenes UI, Puffy UI. 2021-2023 (2021 von Michal Malewicz benannt).
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
: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.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
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.
## 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 }
Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.