kennedys0/taste-style-claymorphism

Verwende diese Fähigkeit nur, nachdem ein Benutzer sie explizit ausgewählt hat oder eine bestätigte Projektkonfiguration sie vorgibt. Für nicht näher erläuterte neue UI-Anfragen verwende stattdessen einen Stilauswähler wie taste-style-select, anstatt hier den Geschmack des Benutzers zu entscheiden. Bestehende Marken-, Barrierefreiheits- und Benutzer-Überschreibungen haben Vorrang vor allen folgenden Beispielen. Die folgende Stilrichtlinie ist keine Erlaubnis, vor der Stilauswahl mit dem UI-Coding zu beginnen.

Stilpaket: Claymorphism

ID: claymorphism
Signatur: Geformte, taktile, skulptierte Oberflächen mit dualem inneren Schlagschatten für volumetrische Tiefe, weichen, getönten Umgebungsschatten und freundlicher physischer Präsenz.

Dies ist ein Stilpaket, kein verbindlicher Standard. Lade es nur nach expliziter Auswahl oder bestätigtem anwendbarem Projektstil. Projektanweisungen können einzelne Entscheidungen überschreiben. Bewahre Barrierefreiheit, Nutzen und Markenbeschränkungen. Schriftarten sind Vorschläge, keine Abhängigkeiten. Eine flache Karte mit abgerundeten Ecken und einem 1px Rand gilt nicht als Claymorphism.

Gute Passung / Kompromisse

• Funktioniert gut für: Verspielte Verbrauchererlebnisse, kreative Werkzeuge, persönliche Dashboards, interaktive Widgets, taktile Web-Apps und moderne Bildungs- oder Designplattformen.
• Vorsicht bei: Extrem dichten tabellarischen Daten, langen juristischen Lesestoffen oder Geräten mit geringer Leistung, wenn übermäßige Schattenberechnungen die Leistung beeinträchtigen.
• Referenzrichtungen:
  • Primärer gesättigter Ton: Reichhaltige, lebendige violette/lila (#813FFC) geformte Oberflächen mit hellen weißen inneren Glanzlichtern oben links, tief getönten Formschatten unten rechts und klarer Typografie.
  • Lichtes Porzellan: Weiche, cremefarbene (#ECEBF5) geformte Oberflächen mit reinweißen inneren Glanzlichtern oben links, weichen grau-lavendelfarbenen Formschatten unten rechts und dunkler schiefer-violetter Typografie.
  • Versunkene Vertiefungen (Inset): Vertiefte Formulareingaben mit einem klaren weißen Reliefrand (3px solid rgba(255, 255, 255, 0.85)), invertierten Inset-Schatten und barrierefreien Platzhalterbeschriftungen.

Ton-Materialtreue-Prüfung – obligatorisch

Bevor eine Claymorphism-Seite als vollständig betrachtet wird, muss die erste Ansicht sichtbar als eine skulptierte Ton-Komposition lesbar sein. Wenn ein Benutzer diesen Stil gewählt hat, ist eine flache Karte mit abgerundeten Ecken und einem 1px Rand ein FEHLER, selbst wenn die CSS-Variablen clay heißen.

Eine erfolgreiche Claymorphism-Implementierung demonstriert alle der folgenden Punkte:

1. Volumetrische duale innere Schlagschatten (Glanzlicht + Schatten): Eine Tonoberfläche MUSS gegensätzliche duale innere Schatten aufweisen: ein oberes linkes inneres Glanzlicht, das einfallendes Licht simuliert (inset 3px 4px 6px rgba(255,255,255,...)) und einen unteren rechten inneren Formschatten, der volumetrische Dicke simuliert (inset -4px -6px 8px rgba(dunkler-Ton,...)). Eine einzelne flache Glanzlinie oder ein generischer Schrägstrich ist ein Fehlschlag.
2. Weiche getönte Umgebungsschatten: Oberflächen werfen weiche, gerichtete, getönte Schlagschatten (8px 16px 24px rgba(..., 0.20–0.35)), die das Gefühl von formbarem Material erzeugen, das über einer getönten Leinwand schwebt oder ruht, anstelle von harten schwarzen Schlagschatten.
3. Plüschige Squircle- und Pillen-Geometrie: Großzügige Krümmung (24px–32px Karten, 20px–26px Tasten, 9999px Pillen oder Kreise, 14px Squircle-Kontrollkästchen). Scharfe 90-Grad-Ecken sind ein Fehlschlag.
4. Versunkene vs. Erhabene Polarität: Interagierbare Komponenten (Tasten, Badges, Schalterknöpfe, Karten) sind nach außen erhaben; Behältervertiefungen (Eingabefelder, inaktive Schalterkanäle) sind mit umgekehrten Inset-Schatten und optionalem weißem Reliefrand nach innen versenkt.
5. Taktile Kompression bei Interaktion: Bei Hover, Fokus und Klick reagieren Bedienelemente physisch mit subtilem Verkleinern (scale(0.97–0.98) oder translateY(1–2px)) und verstärkten Schatten, die sich anfühlen wie echter, formbarer Ton, der von einem Finger gedrückt wird.

Test der ersten Ansicht: In einem Desktop-Screenshot identifiziere die erhabenen skulptierten Tasten, die dualen inneren Glanzlichter/Schatten und die versenkten Eingabebereiche ohne den Seitentitel zu lesen. Wenn sie flach oder nur abgerundet erscheinen, überarbeite die Schatten-Tokens, bevor du weitere Inhalte hinzufügst.

Keine Kartenanzahl-Regel: Eine fokussierte Komponentenpräsentation (z.B. primäre „Senden“-Pille, sekundäre „Zurück“-Pille, runde Aktionsschaltfläche, taktiler Kippschalter, Kontrollkästchen und versenktes Eingabefeld) reicht aus, um authentische Materialtreue zu etablieren, ohne den gesamten Bildschirm mit verschachtelten Ballonkarten zu überziehen.

Explizite Clay-Tiefen-Ausnahme – Ton darf volumetrische Tiefe haben

Claymorphism-spezifische Überschreibung: Der universelle Anti-Schlampigkeits-Hinweis gegen übermäßige Schatten, glänzende Effekte oder neumorphe Unschärfe DARF NICHT als Verbot von dualen inneren Schatten, weichen getönten Umgebungsschatten oder weißen Reliefumrissen hier interpretiert werden. Dies sind materialermöglichende Eigenschaften, die für die taktile physische Präsenz unerlässlich sind.

• Erlaubte Materialbehandlungen: Duale innere Schatten (gegenläufig hell/dunkel), weiche mehrstufige getönte Umgebungsschatten, weiße Reliefränder (3px solid rgba(255,255,255,0.85)) und taktile Drucktransformationen (scale(0.97)). Diese schaffen die wesentliche taktile Tiefe und physische Präsenz. Statisches CSS liefert vollständige Materialtreue ohne Animationsbibliotheks-Overhead.
• Farbkontrast-Disziplin: Gesättigte primäre Ton-Buttons benötigen reinweißen Text (#FFFFFF) mit mindestens 4,5:1 Kontrast. Helle Porzellan-Tonoberflächen benötigen tiefdunklen Text (#28233D oder #1D1735). Versenkte Vertiefungen benötigen klaren, barrierefreien Platzhaltertext (#7C739E oder dunkler).
• Anti-Schlampigkeits-Interpretation: Bewerte die Clay-Tiefe nach Materialzweck, physischer Kohärenz und Lesbarkeit, nicht nach der Anzahl der CSS-Schattendeklarationen. Das Entfernen von dualen inneren Schatten, um eine generische minimale Heuristik zu erfüllen, ist ein Design-Rückschritt.

Siehe examples/claymorphism/sculpted-surfaces.css für eine Startimplementierung und tests/claymorphism-visual.md für visuelle Akzeptanzkriterien.

Typografie und Schriftbild

Freundliche humanistische oder geometrische Sans: Manrope, Nunito Sans oder System-Sans. Schriftstärken 500/600/700 für Beschriftungen, 700/800 für Überschriften. Skala 14/16/20/26/34 px; Zeilenhöhe 1.45–1.6. Bevorzuge Satzfall und prägnante, menschliche Beschriftungen. Vermeide dünne Display-Schriftarten, die über volumetrischen Oberflächen zerbrechlich wirken.

Farbrichtung

Wähle eine kohäsive Pastell-und-Sättigungspalette:

• Heller Modus (Helles Porzellan):
  • Leinwandbasis: Sanftes Pastell-Lila / Lavendel (#D7D1F1 oder --taste-clay-bg: #d7d1f1).
  • Primärer gesättigter Ton: Lebendiges Violett/Lila (#813FFC) mit weißem Text (#FFFFFF), hellem oberem linken weißen Glanzlicht und tiefem violetten unteren rechten Formschatten.
  • Sekundärer heller Ton: Weiches cremefarbenes Porzellan (#ECEBF5 / #F0EFF7) mit dunkler Tinte (#28233D), hellem oberem linken Glanzlicht und weichem lavendelfarbenen unteren rechten Formschatten.
  • Versunkene Eingabebereiche: Leinwand-getönte Vertiefung (#D7D1F1) eingerahmt von einem klaren weißen Reliefrand (3px solid rgba(255, 255, 255, 0.85)), versenktem Inset-Schatten und lesbarem Platzhalter (#8F87B0).
• Dunkler Modus (Tiefe Nacht-Skulpturton):
  • Leinwandbasis: Stimmungsvolles Obsidian-Indigo (#161326).
  • Primärer gesättigter Ton: Lebendiges Violett/Lila (#813FFC) mit reinweißem Text (#FFFFFF), oberem linken Glanzlicht und dunklem violetten Formschatten.
  • Sekundäre Tonoberfläche: Reicher skulptierter Pflaumen-/Schieferton (#26203D) mit klarem blassem Porzellantext (#F3F0FA), weichem durchscheinenden oberen linken Glanzlicht (rgba(255, 255, 255, 0.15)) und tiefem schwarzen unteren rechten Formschatten (rgba(10, 5, 25, 0.60)).
  • Versunkene Eingabebereiche: Tiefe versenkte Vertiefung (#1E1A33) eingerahmt von einem subtilen Reliefrand (3px solid rgba(255, 255, 255, 0.20)), versenktem Inset-Schatten und lesbarem Platzhalter (#A49BBF).
• Themenkontrast-Kopplung: Beim Wechsel in den dunklen Modus MUSS der Text auf sekundären Tonoberflächen von dunkler Tinte (#28233D) zu blassem Porzellan (#F3F0FA) wechseln. Dunkler Tintentext auf dunklem Ton hinterlässt sofort einen Kontrastfehler. Gesättigte primäre Buttons behalten in beiden Modi reinweißen Text (#FFFFFF) mit 4,5:1+ Kontrast.

Layout und Geometrie

Radius 24–32 px Karten, 20–26 px Tasten, 9999px volle Pillen oder Kreise, 14–16 px Squircle-Badges und Kontrollkästchen. Beibehalten eines konsistenten 8 px Rhythmus und großzügiger Abstände. Vermeide zufällige Kreise ohne semantische Interaktion.

Oberflächen, Tiefe, Textur

Oberflächen müssen sich wie aus physischem mattem Ton geformt anfühlen:

• Primärer Ton (Erhaben): box-shadow: inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.40), 8px 16px 24px rgba(100, 45, 210, 0.35), 2px 4px 8px rgba(70, 20, 150, 0.20);
• Helles Porzellan (Erhaben): box-shadow: inset 3px 4px 6px rgba(255, 255, 255, 0.95), inset -4px -6px 8px rgba(145, 135, 180, 0.35), 8px 16px 24px rgba(110, 95, 160, 0.20), 2px 4px 8px rgba(110, 95, 160, 0.12);
• Versunkene Vertiefungen (Eingelassen): box-shadow: inset 3px 4px 8px rgba(110, 95, 165, 0.25), inset -2px -2px 6px rgba(255, 255, 255, 0.70); Gerahmt mit border: 3px solid rgba(255, 255, 255, 0.85);

Komponentenanatomie und Interaktion

• Primärer Button („Senden >“): Gesättigte lila Pille, weißer fetter Text, Richtungspfeil, taktile Kompression beim Klick.
• Sekundärer Button („Zurück ↶“): Helle Porzellan-Pille, dunkler Tintentext, Rückpfeil-Symbol, taktile Kompression beim Klick.
• Runde Aktionsschaltfläche: 50% Randradius runder Button (z.B. Pause ❚❚), gesättigter Ton, zentriertes Symbol.
• Kippschalter: Pillenförmige Spur mit glatter Ton-Kugel; schaltet zwischen heller Spur/lila Kugel und lila Spur/weißer Kugel um.
• Kontrollkästchen: Squircle-Behälter mit dualem inneren Schatten und lebendigem violetten Häkchen (✓).
• Eingabefeld: Versenkte Vertiefung mit linkem Symbol, lesbarem Platzhalter und weißem Reliefrand.

Bewegung

140–200 ms sanftes Ease-Out. Taktile Kompression (scale(0.97) oder translateY(2px)) mit Schattenverstärkung beim Drücken. Niemals federn, überschwingen oder kontinuierliche schwebende Schleifen ausführen.

Optionales Anime.js v4 Rezept

• Bewegungsentscheidung: Gedrückter Button mit 1–2% Kompression und einer kurzen Rückkehr; vorhandene skulptierte Schattierung beibehalten.
• Startdauer: 180ms (0 = sofort); an Aufgabe und Benutzervorlieben anpassen.
• Vermeide: Federn, Überschwingen, schwebende Schleifen.
• Abhängigkeit: Standardmäßig CSS/nativ. Verwende Anime.js v4 nur, wenn die angeforderte Interaktion es rechtfertigt. Befolge die Taste Engine references/motion-engine.md, wenn verfügbar; eigenständige Fähigkeit folgt den oben genannten Prinzipien der reduzierten Bewegung und keine-dekorativen-Schleifen.

UI-Text und Mikrokopie

Warm und konkret. Beispiele: „Senden“, „Zurück“, „Gib deinen Benutzernamen ein“, „Gespeichert in Entwürfen“. Vermeide zuckrige KI-Slogans oder gefälschtes Marketing-Hype.

Starter-Tokens (Vorschläge, kein vollständiges Theme)

Token	Heller Modus Standard	Dunkler Modus Standard
--taste-clay-bg	#d7d1f1	#161326
--taste-clay-primary	#813ffc	#813ffc
--taste-clay-light	#ecebf5	#26203d
--taste-clay-text	#28233d	#f3f0fa
--taste-clay-muted	#7c739e	#a49bbf
--taste-clay-shadow-primary	8px 16px 24px rgba(100, 45, 210, 0.35), 2px 4px 8px rgba(70, 20, 150, 0.20)	8px 16px 24px rgba(10, 5, 25, 0.50), 2px 4px 8px rgba(10, 5, 25, 0.30)
--taste-clay-inner-primary	inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.40)	inset 3px 4px 6px rgba(255, 255, 255, 0.45), inset -4px -6px 8px rgba(40, 10, 110, 0.50)
--taste-clay-shadow-light	8px 16px 24px rgba(110, 95, 160, 0.20), 2px 4px 8px rgba(110, 95, 160, 0.12)	8px 16px 24px rgba(0, 0, 0, 0.45), 2px 4px 8px rgba(0, 0, 0, 0.25)
--taste-clay-inner-light	inset 3px 4px 6px rgba(255, 255, 255, 0.95), inset -4px -6px 8px rgba(145, 135, 180, 0.35)	inset 3px 4px 6px rgba(255, 255, 255, 0.15), inset -4px -6px 8px rgba(10, 5, 25, 0.60)
--taste-clay-inner-well	inset 3px 4px 8px rgba(110, 95, 165, 0.25), inset -2px -2px 6px rgba(255, 255, 255, 0.70)	inset 3px 4px 8px rgba(0, 0, 0, 0.50), inset -2px -2px 6px rgba(255, 255, 255, 0.15)
--taste-clay-well-rim	3px solid rgba(255, 255, 255, 0.85)	3px solid rgba(255, 255, 255, 0.20)
--taste-clay-radius-pill	9999px	9999px
--taste-clay-radius-btn	24px	24px
--taste-clay-radius-card	28px	28px
--taste-clay-radius-squircle	14px	14px
--taste-font-body	Manrope, system-ui, sans-serif	Manrope, system-ui, sans-serif
--taste-motion-duration	180ms	180ms

Tokens stellen eine Richtung dar und sind nicht zwangsläufig für jede Palette/Plattform kopierbar. Definiere --taste-clay-* auf Projektebene, stelle Farbkontrast sicher und passe über Theme-Tokens an, anstatt Literalwerte zu verstreuen.

Helden-Komposition (volle erste Ansicht)

Wenn ein öffentlichkeitswirksames Portfolio/Landing/Homepage einen Heldenbereich hat: verwende eine aus einem sichtbaren Bildschirm bestehende Kopfzeilen+Helden-Komposition. Grundhöhe auf min-height: 100svh mit 100vh Fallback, subtrahiere die echte Kopfzeile nur, wenn sie sich im normalen Fluss befindet; lasse den Heldenbereich für Barrierefreiheit und kurze mobile Bildschirme expandieren. Wende dies nicht auf private Dashboards oder andere Aufgabenbildschirme an; direkte Benutzerüberschreibungen gewinnen. Stilspezifische Richtung: Verwende eine einzige skulptierte Heldenoberfläche oder eine sorgfältig ausbalancierte weiche Materialumgebung; platziere die wahre Portfolio-Einleitung und den CTA in der ersten Bildschirmkomposition. Verschachtele keine puffigen Karten, um 100svh zu füllen. Die Clay-Tiefe sollte subtil und gerichtet bleiben, mit viel flachem Raum. Siehe den Router references/hero-layout.md, falls vorhanden. Eigenständige Nutzung folgt denselben responsiven und Anti-Schlampigkeits-Prinzipien.

Stilspezifische Qualitätskontrolle

• Tun: Stelle sicher, dass taktile duale innere Schatten sichtbar sind; halte eine konsistente Lichtrichtung ein (oben-links nach unten-rechts); biete taktile aktive/Gedrückt-Zustände; überprüfe den WCAG-AA-Kontrast sowohl auf primärem als auch hellem Ton; überprüfe den Wechsel zwischen dunklem/hellem Modus, sodass Text- und Oberflächenfarben in gekoppelten Paaren wechseln (z.B. blasser Porzellanton auf dunklem Ton, dunkler Tintentext auf hellem Ton).
• Nicht tun: Behandle einfache abgerundete Ecken nicht als Ton; vermeide Ballonschatten, übermäßige glänzende Höfe, unlesbare Hell-auf-Hell-Beschriftungen, dekorative Badges und Kollisionen zwischen hellem/dunklem Modus, bei denen dunkler Text auf dunklem Ton verbleibt.
• Bestätige die Konsistenz auf Desktop und Mobile; visualisiere die Ansicht in verschiedenen Größen. Der Stil ist darauf ausgelegt, mit einer minimalen, aber repräsentativen Gruppe von Komponenten zu funktionieren – eine vollständige Seite ist nicht erforderlich, um die Design-Validierung zu bestehen.

Praktische Anwendungshinweise (Übersetzungszuordnung)

Wenn dir diese Aufgabe zugewiesen wird, ohne dass ein Stilauswähler eine Option festlegt:

1. Wähle KEINEN Stil standardmäßig. Wenn die Anfrage vage ist und eine Entscheidung erfordert, frage den Benutzer explizit, welchen Stil er bevorzugt.
2. WENN der Benutzer „Claymorphism“ auswählt, verwende die obige Anleitung, um alle UI-Arbeiten zu gestalten: Typografie, Farben, Layout, Komponenten, Interaktionen, Bewegung, Texterstellung und Qualitätskontrollen.
3. WENN ein Konfigurationszeichenfolgen-Treffer (z. B. in .cursorrules, SKILL.md des Projekts, style.md oder einem Theme-Token) claymorphism oder ein Clay-Token wie --taste-clay-primary enthält, MUSS diese Fähigkeit ebenfalls geladen werden.
4. Setze diese Stilrichtlinie strikt durch: skulptierte Ton-Oberflächen, duale innere Schatten, keine flachen UI-Elemente. Wähle das Aussehen der Komponenten gemäß den bereitgestellten Anweisungen und Beispiel-Tokens.
5. Berücksichtige Farbmodi (Hell/Dunkel), wie beschrieben.
6. Respektiere vorhandene Projekt- oder Benutzer-Überschreibungen. Wenn der Benutzer eine explizite Farb- oder Layout-Anweisung gibt, hat diese Vorrang.
7. Überprüfe, ob WCAG-Kontrastanforderungen erfüllt sind.
8. Wenn ein Benutzer oder eine andere Projektregel die Verwendung eines anderen Stils oder Designs vorschreibt, ignoriere diese Stilrichtlinie und befolge die andere Regel.