Style · 16
Claymorphism Claymorphism = fat radii, pastel surfaces, and inner light that makes elements look inflatable.
Fat radii, pastel inflatables, inner light.
Preview North Play Parents Privacy Find a game Join Inflated. Pastel. Inner light. Inflated pastels for playful SaaS. Kids ship. Parents stay close.
Start playing Clay board
Steps
01
Create A clay board of your own.
02
Play Soft tiles. Inner light.
03
Share Parents see the trail.
Play
Play home Clay · Kids
Parents Clay
Join strip Login Page Overall Page Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
BUILD
- Build a complete Claymorphism playful SaaS / onboarding homepage. Not a card, not an isolated navbar, not a full-page login, not tabs.
- Domain from Use on: Kids and Playful SaaS. Login is a soft strip, never the whole page.
STYLE
- Claymorphism: fat radius, pastel fill, inner light
- Ground #F3E6D8. Tiles #F7D9C4. Radius 32px. Inner glow inset 0 -10px 18px rgba(255,255,255,0.7) plus soft clay shadow 0 10px 18px rgba(160,110,80,0.18)
- Type #1D1D1F. Join CTA #00C2B3, white type, inner highlight. Font on the generated page: Nunito. No Inter
LAYOUT
- Inflated North bar as chrome: separate Play / Parents / Privacy, search, Join
- Container max-width 1120px. Finished onboarding home: split clay hero, three steps, mosaic, join strip, three-column footer
- Tiles sit on the pastel ground; the page is not one giant clay blob
SECTIONS
1. Inflated hero: "Inflated. Pastel. Inner light." plus a clay-board visual. CTA Start playing
2. Three onboarding tiles: Create, Play, Share
3. Mosaic: Play home (lead) + Parents + Join strip
4. Soft login strip: white pill name field + Continue — Login use-on, not a sign-in page
5. Three-column footer: Play / Parents / Help
INTERACTION
- Hover lifts 2px and the clay shadow softens. Not Neumorphism inset. Not a press translate
TECHNICAL
- React, Tailwind CSS, restyle shadcn/ui — not default shadcn. One homepage route.
DON'Ts
- No purple, violet, indigo, fuchsia. No Inter. No emoji icons
- Keep 32px and inner glow. Do not flatten into a generic rounded card page
- Do not make login the whole homepage. Do not output only a headline plus two empty cells
MOTION
- Press: inner shadow deepens with scale(0.97), 160ms ease-out.
- Rest lift: 4px over 200ms. Slower than the press, and softer.
- No spring, no bounce. Clay is heavy; it should not wobble.
- prefers-reduced-motion: shadow change only.
Preview Specimen
Claymorphism Fat radii, pastel inflatables, inner light.
Continue Card Card Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a single Claymorphism card. Not a page, not a dashboard.
STYLE
- Ground #F3E6D8. Card fill #F7D9C4, fat 32px radius, inner glow (inset white light) plus a soft outer clay shadow
- Title #1D1D1F, body #6E6E73. Continue: #00C2B3, white type, pill, inner highlight — not a neo inset press
LAYOUT
- One inflated card: kicker SPECIMEN, title, summary, one primary button
- No login strip on this card (that lives on the page)
INTERACTION
- Hover lifts 2px and the outer shadow gets softer/larger. Not a neumorphic inset press
CONSTRAINTS
- 32px + inner glow. Do not render this as Neo or a generic drop-shadow card. No purple. No Inter
TECHNICAL
- React, Tailwind CSS, shadcn/ui restyled to clay inflate — not default shadcn
Buttons Buttons Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a Claymorphism button row only: Continue (solid), Save (outline), Skip (ghost). Not a card, not a page.
STYLE
- Stage #F3E6D8. Continue: #00C2B3, fat pill, inner highlight
- Save: white fill, fat pill, inner light. Skip: ghost #6E6E73
- 32px-class rounding on solids (pill)
LAYOUT
- One horizontal row of inflated controls. No card, no login field
INTERACTION
- Hover lifts 2px, shadow softer. Not Neo inset
CONSTRAINTS
- Fat radius + inner glow. No purple. No Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn Button — do not keep default shadcn look
Preview North Overview Billing Open
Navbar Navbar Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a Claymorphism site navbar only. Not tabs, not a page, not the page login strip.
STYLE
- Inflated bar: fill #F7D9C4, pill/980 radius, inner glow + soft clay shadow on #F3E6D8
- Wordmark North #1D1D1F; links #6E6E73; Open #00C2B3 pill with inner light
LAYOUT
- Single horizontal chrome. No panel, no email field
INTERACTION
- Open lifts 2px, shadow softer
CONSTRAINTS
- Soft extruded clay bar, not Neo same-hue grey. No purple. No Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn navigation — not default shadcn
Preview Overview Billing Activity
SECTION
Two lines of English dummy for Overview. Plan usage and upcoming invoices stay in this panel.
Tabs Tabs Copy Prompt
Formulas stay in English so you can paste them straight into your tool.
Build a Claymorphism Tabs component with three tabs: Overview (selected), Billing, Activity. Not a navbar, not a page.
STYLE
- Selected tab: fat pill fill #00C2B3, white type, inner glow
- Unselected: quiet type #6E6E73 on the #F3E6D8 well
- Panel: #F7D9C4, 32px radius, inner glow, 16px padding, readable #1D1D1F
LAYOUT
- Horizontal tablist + one panel. No wordmark, no Open, no login field
INTERACTION
- Hover on unselected lifts that chip 2px with a softer shadow. Not an inset press
CONSTRAINTS
- 32px + inner glow. Tabs are not the navbar and not the page login strip. No purple. No Inter
TECHNICAL
- React, Tailwind CSS, restyle shadcn Tabs — do not keep default shadcn look
What is Claymorphism? Claymorphism looks inflated. Call fat radius, pastel fill, and inner light.
Elements Fat radius Pastel fill Inner light Put this word in the prompt.
Copy Prompt BUILD
- Build a complete Claymorphism playful SaaS / onboarding homepage. Not a card, not an isolated navbar, not a full-page login, not tabs.
- Domain from Use on: Kids and Playful SaaS. Login is a soft strip, never the whole page.
STYLE
- Claymorphism: fat radius, pastel fill, inner light
- Ground #F3E6D8. Tiles #F7D9C4. Radius 32px. Inner glow inset 0 -10px 18px rgba(255,255,255,0.7) plus soft clay shadow 0 10px 18px rgba(160,110,80,0.18)
- Type #1D1D1F. Join CTA #00C2B3, white type, inner highlight. Font on the generated page: Nunito. No Inter
LAYOUT
- Inflated North bar as chrome: separate Play / Parents / Privacy, search, Join
- Container max-width 1120px. Finished onboarding home: split clay hero, three steps, mosaic, join strip, three-column footer
- Tiles sit on the pastel ground; the page is not one giant clay blob
SECTIONS
1. Inflated hero: "Inflated. Pastel. Inner light." plus a clay-board visual. CTA Start playing
2. Three onboarding tiles: Create, Play, Share
3. Mosaic: Play home (lead) + Parents + Join strip
4. Soft login strip: white pill name field + Continue — Login use-on, not a sign-in page
5. Three-column footer: Play / Parents / Help
INTERACTION
- Hover lifts 2px and the clay shadow softens. Not Neumorphism inset. Not a press translate
TECHNICAL
- React, Tailwind CSS, restyle shadcn/ui — not default shadcn. One homepage route.
DON'Ts
- No purple, violet, indigo, fuchsia. No Inter. No emoji icons
- Keep 32px and inner glow. Do not flatten into a generic rounded card page
- Do not make login the whole homepage. Do not output only a headline plus two empty cells
MOTION
- Press: inner shadow deepens with scale(0.97), 160ms ease-out.
- Rest lift: 4px over 200ms. Slower than the press, and softer.
- No spring, no bounce. Clay is heavy; it should not wobble.
- prefers-reduced-motion: shadow change only.