Claymorphism

Claymorphism

"Like interacting with a pristine, digital claymation set. Soft, bubbly, and incredibly approachable."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Fluffy 3D Volume: Elements look like inflated balloons or soft clay blocks.
2. Double Inner Shadows: The signature of claymorphism is an inset light shadow on the top-left and an inset dark shadow on the bottom-right, giving 3D volume to a solid shape.
3. Continuous Curves: Maximum border-radius. No sharp edges exist in this universe.

Visual DNA

• Colors: Thrives on pastels and bright, friendly hues. Desert Mirage, Earth-Grounded Elegance, or custom pastel palettes work best.
• Typography: Playful, thick, rounded fonts (e.g., Sniglet, Fredoka One, Nunito).
• Shapes: 'Squicles' (squares with heavily rounded, continuous corners) and perfect circles.

Web Implementation

• Distinct from Neumorphism: Claymorphism elements detach from the background (they have drop shadows) and use inner shadows to create volume, often using colors that contrast with the background.
• CSS Example:

.clay-card {
  background-color: #F8B4A6; /* Soft coral */
  border-radius: 32px;
  padding: 40px;
  
  /* 
    1. Outer drop shadow (detaches from background)
    2. Inner top-left highlight (volume)
    3. Inner bottom-right shadow (volume)
  */
  box-shadow: 
    8px 8px 24px rgba(0, 0, 0, 0.15),           /* Outer */
    inset -8px -8px 16px rgba(0, 0, 0, 0.1),    /* Inner dark */
    inset 8px 8px 16px rgba(255, 255, 255, 0.4); /* Inner light */
    
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy */
}