13 / 15
Claymorphism
Puffy, soft 3D shapes that look squeezable, with inner highlights and gentle shadows. Friendly and tactile.
Full preview (opens in a new tab)Language learning app
A new language, five minutes a day.
Short, playful lessons with real voices, for Mandarin, Malay and Japanese.
- 01
Daily bites
One five-minute lesson a day.
Beginner - 02
Speak & check
Say it out loud, get instant feedback.
Speaking - 03
Streaks
Keep the habit going, earn rewards.
Daily
Sample businesses are fictional.
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.