Taste Engine Logo Taste Engine #04 CLAYMORPHISM
Proof of Work: Archetype #04

Tactile Molded Surfaces & Volumetric Dual Inner Shadows

Claymorphism provides friendly, sculpted physical presence through opposing dual inner shadows (specular light + form shadow), soft ambient drop shadows, and sunken relief wells. This entire page demonstrates the authentic design tokens, contrast coupling, and anti-slop rules of this style.

$ npx skills add kennedys0/taste-style-claymorphism
Dual Inner
Volumetric Depth
28px+
Pill Contour Radius
Sunken Well
Relief Rim Inset
Tactile
Active Compression
Live Interactive PoW

Claymorphic Audio Studio Deck

Directly demonstrating sculpted 3D clay components: volumetric pill bars, dual-shadowed squircle tiles, sunken input channels, and tactile physics. Click any button or play track for live tactile feedback.

Workspace

Audio Studio Panel

Session Active

Good morning, Mia!

Ready to craft some rich ambient audio stems and sculpt new waveforms today?

Played Tracks 1,248 ↑ +18% this week
Favorites 128 ↑ +8 today
Listening Hours 34.6h ↑ +6.2h this week
Daily Streak 7 Days Active streak
Weekly Listening Overview This Week ▼
3.4h
Mon
5.2h
Tue
6.8h
Wed
7.5h
Thu
4.6h
Fri
5.9h
Sat
2.9h
Sun
Top Sound Genres Analysis
  • Pop / Electronic 45%
  • Lo-fi Chill 25%
  • Synthwave 15%
  • Ambient Space 10%
  • Indie Acoustic 5%
Recently Played Stems View All
Sunset Drive (Lofi Mix) Nordic Soundlab • 112 BPM
Golden Hour Acoustic Aura Beats • 94 BPM
Coffee Shop Rain Sounds Cozy Room Session • 78 BPM

Cozy Studio Moods

80 curated soundscapes • Updated 2 hours ago

Discover Fresh Audio Presets

Sculpted synthesizer soundscapes tailored to your current creative vibe.

How to Install

Install Claymorphism or Full Engine

Choose whether you want this single standalone Claymorphism skill or the full 10-style automated Taste Engine suite for your AI coding agents.

Option A: Install Dedicated Claymorphism Skill

Installs only the Claymorphism style pack. Perfect if your project has already committed to this exact aesthetic and does not need a 10-style selector.

bash — universal agent skills cli
# Install standalone Claymorphism pack via Agent Skills CLI
$ npx skills add kennedys0/taste-engine --skill taste-style-claymorphism
# Or install directly for Antigravity IDE global config
$ git clone https://github.com/kennedys0/taste-engine.git && cp -r taste-engine/optional-standalone-skills/taste-style-claymorphism ~/.gemini/config/skills/

Option B: Install Full Taste Engine (All 10 Styles + SEO + Anti-Slop)

Equips your AI agent with the autonomous style router, preflight interviews, 10 aesthetic packs, full-screen hero gating, and automatic SEO audit.

bash — multi-agent native installer
# 1. Universal 1-click Agent Skills install
$ npx skills add kennedys0/taste-engine
# 2. Or install globally for Google Antigravity IDE / CLI (agy)
$ node bin/taste-engine.mjs install --agent antigravity --global
# 3. Or install for Claude Code or OpenAI Codex
$ node bin/taste-engine.mjs install --agent claude --global
$ node bin/taste-engine.mjs install --agent codex --global

Option C: Tailwind CSS & shadcn/ui Preset

Scaffold Claymorphism utility tokens directly into your React, Next.js, or Vite frontend stack.

tailwind.config.js — preset integration
// Add Taste Engine official presets to your Tailwind config
module.exports = {
  presets: [require('./presets/tailwind/tailwind.preset.js')],
  theme: {
    extend: {
      colors: { 'claymorphism': '#8247E5' }
    }
  }
};
Tokens & Math

Claymorphism Design Tokens

Tactile CSS custom properties with live 3D clay preview swatches demonstrating volumetric light, form shadows, and relief rim physics.

--taste-clay-bg
Light: #EAE6F8 | Dark: #141122

Tactile pastel lilac base backdrop providing ambient contrast beneath floating clay surfaces.

--taste-clay-primary
Light: #8247E5 | Dark: #9A65F5

Vibrant sculpted violet for primary action pills, active play buttons, and brand badges.

--taste-clay-surface
Light: #FFFFFF | Dark: #27203E

Porcelain white clay surface with upper-left light highlights and bottom-right lavender depth.

--taste-clay-dock
Light: #9E85ED | Dark: #2B2149

Saturated pastel lavender accent panel for navigational bays and promo feature bars.

--taste-clay-well
Light: #E7E2F6 | Dark: #181329

Recessed concave channel with reversed inset shadow and crisp white relief border rim.

--taste-clay-peach
Light: #FFEAE4 | Dark: #3A232D

Soft salmon/peach clay tile for pro membership, favorites, and high-priority alerts.

--taste-clay-shadow
inset 3px 4px 6px / inset -3px -4px 6px

Dual opposing inner shadow formula: top-left incident specular light + bottom-right form thickness.

--taste-clay-radius
9999px (Pill) / 28px–36px (Cards)

Plush organic curvature eliminating harsh 90-degree corners to preserve pliable playdough physics.

FAQ & Verification

Frequently Asked Questions

Everything you need to know about Taste Engine's Claymorphism fidelity standards, anti-slop rules, and dark mode math.

Why is Claymorphism not considered AI slop?
+
Claymorphism is an explicit material exception in Taste Engine because its depth is functional, tactile, and physically coherent. Opposing dual inner shadows simulate incident light (upper-left) and form thickness (lower-right), creating tangible presence rather than arbitrary decorative glow or unreadable transparency.
How does Dark Mode maintain volumetric 3D volume?
+
In dark mode, inner specular highlights soften to delicate translucent white tints (12–18% opacity) while form shadows deepen into rich dark obsidian-indigo, preserving the pliable 3D sensation without washing out the text contrast. Text automatically pairs with pale porcelain white for verified WCAG AA accessibility.
Can I install just the Claymorphism skill for my agents?
+
Yes! Run npx skills add kennedys0/taste-engine --skill taste-style-claymorphism to equip your AI agent with only this specific aesthetic pack, or install the full Taste Engine suite for multi-style auto-routing.
What is the difference between Neumorphism and Claymorphism?
+
Neumorphism extrudes directly from the exact same background color with soft outer blur, causing severe WCAG contrast failures. Claymorphism uses distinct high-contrast surfaces, dual inner shadows for thickness, and soft ambient drop shadows that float above the canvas with distinct color boundaries and 4.5:1+ text contrast.
COPIED TO CLIPBOARD