13 / 15

Claymorphism

Puffy, soft 3D shapes that look squeezable, with inner highlights and gentle shadows. Friendly and tactile.

  • Consumer apps
  • Kids learning
  • Games
Full preview (opens in a new tab)

Sample businesses are fictional.

AI prompt

Restyle my page in a Claymorphism style: friendly and tactile, as if every element were made of soft clay you could squeeze. Palette: background #E8EEF9 (powder blue), surfaces #F4F7FD, text #2C3550, secondary #596079, accent #6C8CFF (periwinkle) and peach #FFB4A2 as a second accent, plus mint #B8F2D9 for small shapes. Type: Nunito throughout. Headlines extra-bold 800, rounded, letter-spacing -0.02em, line-height 1.05, with a soft emboss: text-shadow 2px 2px 0 #FFFFFF plus 6px 8px 16px rgba(108,124,170,0.35). Body 16px, weight 500. For Chinese text pair the headlines with Noto Sans SC (800) and the body with Noto Sans SC (500), and never italicise or tighten Chinese. Layout: big rounded blocks with lots of padding, 3D-looking illustrations or icons that look inflated, cards floating at slightly different depths. Components: 32px radius on cards, buttons and images. The clay effect is two shadows plus an inner highlight: 12px 12px 24px rgba(108,124,170,0.35), -8px -8px 20px rgba(255,255,255,0.9), and inset 3px 3px 6px rgba(255,255,255,0.7) with inset -3px -3px 6px rgba(108,124,170,0.18). Primary button periwinkle with white text and the same puffy shadows; on press the outer shadows shrink and the button scales to 0.97. Motion: squishy presses, jelly wobble on hover, toggles that stretch, 250–350ms with a slight overshoot. Avoid: flat design, hairline borders, dark backgrounds, sharp corners, thin type.

Suggest an idea

Seen a motion or a theme you would like to find here? Describe it, and it opens as a prefilled GitHub issue for you to post.

What are you suggesting?

Needs a GitHub account. Suggestions are public.