claymorphism

name	Claymorphism
description	Soft, playful 3D clay-like design with rounded shapes and pastel colors. Use this when targeting young audiences, playful brands, or apps that want to feel friendly and approachable—perfect for kids' apps, design tools, wellness apps, and creative platforms.

What is Claymorphism?

Claymorphism is a modern design aesthetic inspired by digital clay: soft, rounded, and gently three-dimensional. Core philosophy:

• Tactile 3D illusion: Double-shadow system creates believable depth without photorealism
• Playful energy: Rounded forms and pastels evoke childhood, creativity, safety
• Soft gradients: Colors flow smoothly, suggesting curved surfaces under gentle light
• Approachability: No sharp edges or aggression; everything feels touchable and friendly
• Motion-ready: Built for micro-interactions and animations

Historical context: Evolved from neumorphism (2020) but softer. Popularized by Figma, Dribbble design trends, and Gen-Z-focused apps. Dominant in design tools, wellness platforms, and play-focused interfaces.

Core Principles

1. Aggressive border-radius (20-32px) — Soft, pillowy shapes that feel organic and safe
2. Pastel color palette — Soft pinks (#FFB5D0), sky blues (#B4E7FF), mint greens (#B4FFD0), warm yellows (#FFE4B4)
3. Double shadow system:
   • Outer shadow: Colored, large blur, communicates object type (warm shadow = warm object)
   • Inner light highlight: Inset white/light shadow on top-left to simulate curved surface catching light
   • Inner dark shadow: Inset dark on bottom-right to simulate curve turning away from light
4. Subtle background gradients — Linear or radial shifts within each element (135deg, light-to-dark pastels)
5. Soft typography: Round sans-serif (Comfortaa, Quicksand, Poppins) with generous line-height
6. Transparency & layering: Overlapping elements with slight opacity create depth

Visual Language

/* Claymorphism base: pastel + rounded + double shadow */

/* Pastel color palette */
--clay-pink: #FFB5D0;
--clay-blue: #B4E7FF;
--clay-mint: #B4FFD0;
--clay-yellow: #FFE4B4;
--clay-purple: #D5C4FF;
--clay-peach: #FFD0B4;

/* Core shadow + gradient formula */
border-radius: 24px;
background: linear-gradient(135deg, [lighter-pastel] 0%, [darker-pastel] 100%);
box-shadow:
  /* Outer colored shadow (large blur = soft, distant) */
  8px 8px 16px rgba([pastel-color], 0.3),
  /* Inner highlight (light top-left) */
  inset 0 4px 8px rgba(255, 255, 255, 0.4),
  /* Inner shadow (dark bottom-right) */
  inset 0 -4px 8px rgba(0, 0, 0, 0.1);

/* Examples */
.clay-item-pink {
  background: linear-gradient(135deg, #FFD0E0 0%, #FFB5D0 100%);
  border-radius: 24px;
  box-shadow:
    8px 8px 16px rgba(255, 181, 208, 0.3),
    inset 0 4px 8px rgba(255, 255, 255, 0.4),
    inset 0 -4px 8px rgba(0, 0, 0, 0.1);
}

.clay-item-blue {
  background: linear-gradient(135deg, #D4F2FF 0%, #B4E7FF 100%);
  border-radius: 28px;
  box-shadow:
    8px 8px 16px rgba(180, 231, 255, 0.3),
    inset 0 4px 8px rgba(255, 255, 255, 0.4),
    inset 0 -4px 8px rgba(0, 0, 0, 0.1);
}

/* Large rounded corners = softer feel */
border-radius: 32px;

/* Soft typography */
font-family: 'Poppins', 'Quicksand', sans-serif;
font-weight: 600;
line-height: 1.6;

Component Patterns

Button (Clay Blue)

.btn-clay {
  border: none;
  border-radius: 28px;
  background: linear-gradient(135deg, #D4F2FF 0%, #B4E7FF 100%);
  padding: 14px 32px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #1A7BA0;
  box-shadow:
    8px 8px 16px rgba(180, 231, 255, 0.3),
    inset 0 4px 8px rgba(255, 255, 255, 0.4),
    inset 0 -4px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-clay:hover {
  transform: translateY(-2px);
  box-shadow:
    10px 10px 20px rgba(180, 231, 255, 0.35),
    inset 0 4px 8px rgba(255, 255, 255, 0.4),
    inset 0 -4px 8px rgba(0, 0, 0, 0.1);
}

.btn-clay:active {
  transform: translateY(0px);
  box-shadow:
    4px 4px 12px rgba(180, 231, 255, 0.25),
    inset 0 4px 8px rgba(255, 255, 255, 0.4),
    inset 0 -4px 8px rgba(0, 0, 0, 0.15);
}

Card (Clay Mint)

.card-clay {
  border-radius: 32px;
  background: linear-gradient(135deg, #D4FFE8 0%, #B4FFD0 100%);
  padding: 32px;
  box-shadow:
    12px 12px 24px rgba(180, 255, 208, 0.35),
    inset 0 4px 8px rgba(255, 255, 255, 0.5),
    inset 0 -4px 8px rgba(0, 0, 0, 0.08);
  font-family: 'Poppins', sans-serif;
}

.card-clay h3 {
  color: #0B7F56;
  font-weight: 700;
  margin-bottom: 12px;
}

.card-clay p {
  color: #2A9C6F;
  line-height: 1.6;
}

Input Field (Clay Peach)

.input-clay {
  border: none;
  border-radius: 20px;
  background: linear-gradient(135deg, #FFE4CC 0%, #FFD0B4 100%);
  padding: 12px 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: #8B5A2B;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.08),
    inset 0 -2px 4px rgba(255, 255, 255, 0.3);
}

.input-clay::placeholder {
  color: rgba(139, 90, 43, 0.5);
}

.input-clay:focus {
  outline: none;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.08),
    inset 0 -2px 4px rgba(255, 255, 255, 0.3),
    0 0 0 4px rgba(255, 208, 180, 0.4);
}

Code Generation Guidance

When generating claymorphism:

1. Start with pastel color choice (pink, blue, mint, yellow, purple, peach)
2. Create 135deg gradient from 10-15% lighter shade to chosen pastel
3. Apply double-shadow formula:
   • Outer: 8-12px blur, rgba(color, 0.3)
   • Inset light: 0 4px 8px rgba(255,255,255,0.4) (or 0.5)
   • Inset dark: 0 -4px 8px rgba(0,0,0,0.08-0.15)
4. border-radius minimum 24px (28px for buttons, 32px for cards)
5. Use Poppins, Quicksand, or Comfortaa for typography
6. Hover state: Lift slightly (translateY(-2-3px)) and increase shadow blur by 2-4px

For React (Interactive Clay Button):

const ClayButton = ({ label, color = 'blue', onClick }) => {
  const colorMap = {
    blue: { gradient: 'linear-gradient(135deg, #D4F2FF, #B4E7FF)', shadow: 'rgba(180,231,255,0.3)', text: '#1A7BA0' },
    pink: { gradient: 'linear-gradient(135deg, #FFD0E0, #FFB5D0)', shadow: 'rgba(255,181,208,0.3)', text: '#A01A5A' },
    mint: { gradient: 'linear-gradient(135deg, #D4FFE8, #B4FFD0)', shadow: 'rgba(180,255,208,0.3)', text: '#0B7F56' },
  };

  const c = colorMap[color];

  return (
    <button
      onClick={onClick}
      style={{
        border: 'none',
        borderRadius: '28px',
        background: c.gradient,
        padding: '14px 32px',
        fontFamily: 'Poppins, sans-serif',
        fontWeight: 600,
        fontSize: '1rem',
        color: c.text,
        boxShadow: `8px 8px 16px ${c.shadow}, inset 0 4px 8px rgba(255,255,255,0.4), inset 0 -4px 8px rgba(0,0,0,0.1)`,
        cursor: 'pointer',
        transition: 'all 0.2s ease',
      }}
    >
      {label}
    </button>
  );
};

Accessibility Notes

• Pastel contrast: Pastels are inherently low-contrast. Pair with dark text (≥4.5:1 WCAG AA). Test all color combinations.
• Gradients + text: Ensure text color works at both gradient endpoints
• Rounded corners don't aid: Focus states must be explicit (outline or box-shadow: 0 0 0 3px)
• Motion sensitivity: Hover animations (translateY) should respect prefers-reduced-motion
• Icon sizing: Soft UI requires larger touch targets (48px minimum) due to rounded edges

Examples

Input: Task Reminder App Card

Output (Claymorphism/Mint):

<div style={{
  borderRadius: '32px',
  background: 'linear-gradient(135deg, #D4FFE8 0%, #B4FFD0 100%)',
  padding: '28px',
  boxShadow: '12px 12px 24px rgba(180,255,208,0.35), inset 0 4px 8px rgba(255,255,255,0.5), inset 0 -4px 8px rgba(0,0,0,0.08)',
  fontFamily: 'Poppins, sans-serif',
}}>
  <h3 style={{ color: '#0B7F56', fontSize: '1.25rem', fontWeight: 700, margin: '0 0 12px 0' }}>
    Take a break!
  </h3>
  <p style={{ color: '#2A9C6F', fontSize: '0.95rem', margin: '0 0 16px 0', lineHeight: 1.6 }}>
    You've been working for 2 hours. Stand up and stretch.
  </p>
  <button style={{
    borderRadius: '20px',
    background: 'linear-gradient(135deg, #B4FFD0, #9CFFC0)',
    border: 'none',
    padding: '10px 20px',
    fontFamily: 'Poppins, sans-serif',
    fontWeight: 600,
    color: '#0B7F56',
    boxShadow: '6px 6px 12px rgba(180,255,208,0.3), inset 0 2px 4px rgba(255,255,255,0.4)',
    cursor: 'pointer',
  }}>
    Got it!
  </button>
</div>

Input: Wellness App Stat Widget

Output (Claymorphism/Pink):

<div style={{
  borderRadius: '28px',
  background: 'linear-gradient(135deg, #FFD0E0 0%, #FFB5D0 100%)',
  padding: '24px',
  boxShadow: '8px 8px 16px rgba(255,181,208,0.3), inset 0 4px 8px rgba(255,255,255,0.4), inset 0 -4px 8px rgba(0,0,0,0.1)',
  textAlign: 'center',
  fontFamily: 'Poppins, sans-serif',
}}>
  <p style={{ fontSize: '0.875rem', color: '#A0527A', margin: '0 0 8px 0', fontWeight: 500 }}>
    Steps Today
  </p>
  <h2 style={{ fontSize: '2.5rem', fontWeight: 700, color: '#8B1A5A', margin: 0 }}>
    8,432
  </h2>
  <p style={{ fontSize: '0.875rem', color: '#A0527A', margin: '8px 0 0 0' }}>
    64% of goal
  </p>
</div>