Claymorphism

Also called: Clay UI, Clay 3D, Plasticine UI

Chunky pastel shapes that look squeezed from modelling clay: huge radii, a bright inner highlight and a soft coloured shadow underneath.

“Puffy clay”Soft & DimensionalEra: 2022 → todayPlayfulFriendlyDreamy

Open full screen ↗

claymorphism / landingEN

claymorphism / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm16pxRadius md22pxRadius lg32pxRadius xl44pxDensity×1.1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

puffy clay cardspastel fillshuge rounded cornersinner highlight + inner shadecoloured soft drop shadowchunky rounded typeclay ball iconssquishy press

Claymorphism makes every card and button look like a soft, inflated piece of plasticine. Each surface gets a pastel fill, very large rounded corners (24–44px), two inner shadows — a white highlight top-left and a darker tint bottom-right — and a blurred, colour-tinted drop shadow that lifts it off a light lilac page. Type is chunky and rounded, icons sit in glossy clay balls, and the overall feel is playful, tactile and friendly — perfect for learning, kids and casual consumer apps.

Best for

Learning and course apps for students and kids
Onboarding and empty-state illustrations
Casual games, habit trackers and rewards
Friendly consumer landing pages

Avoid for

Serious finance, legal or government products
Dense data dashboards
Luxury or minimal brands

✓ Do

Use radii of 22–44px and keep shapes plump, never sharp
Stack two inner shadows (white highlight top-left, tinted shade bottom-right) plus one coloured outer shadow
Rotate 6 pastel fills across cards: lilac #E9E0FF, mint #D3F5E8, peach #FFE2D2, sky #DAEDFF, butter #FFF1BF, pink #FFE0EC
Make presses squish: translateY(2px) scale(.97) and a shorter outer shadow

✕ Don't

Don’t use thin outlines or hairline borders
Don’t use grey or black drop shadows — tint them with the primary colour
Don’t pair it with thin or condensed type
Don’t put multi-line body text on saturated fills; keep paragraphs on pale pastels

Not to be confused with

Neumorphism →Neumorphism is one monochrome colour with shadows matching the page; Claymorphism uses many pastel fills, inner highlights and a coloured drop shadow.Kawaii / Cute →Kawaii is about cute faces, sparkles and stickers; Claymorphism is about the puffy 3D material of the components themselves.Tactile Digital / Deformable UI →Tactile/deformable UI animates squash-and-stretch and chrome hybrids; Claymorphism is mostly static matte clay.

On mobile

Clay is great under the thumb: plump 52px buttons that squish on press, pastel lesson cards, clay-ball icons and a floating white clay tab bar where the active icon sits in a purple clay blob. Keep inner shadows but shorten outer shadows to ~12px on long lists.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinFredoka · 500/600/700

The quick brown fox

Heading · ThaiMitr · 500/600

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinLexend · 400/500/600

Clear words make shared decisions.

Body · ThaiMitr · 300/400/500

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Mitr is a chunky, rounded loopless Thai that has the same soft, inflated stroke ends as Fredoka and stays readable at body sizes next to Lexend.

Colour palette

Design tokens

Radius	`sm 16px · md 22px · lg 32px · xl 44px · pill 999px`
Border	`0px`
Shadow	`inset -6px -8px 16px rgba(70,40,160,0.12), inset 6px 8px 16px rgba(255,255,255,0.9), 0 18px 30px -12px rgba(109,74,232,0.32)`
Display	`clamp(2.75rem, 5.8vw, 4.6rem)`
Motion	`260ms cubic-bezier(.34,1.56,.64,1)`
Density	`×1.1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Claymorphism (claymorphism) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Only a light mode: its colours sit on :root.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Lexend:wght@400;500;600&family=Mitr:wght@300;400;500;600&display=swap
 */
:root {
  --radius: 32px;
  --background: #F6F0FF;
  --foreground: #2B2257;
  --card: #FFFFFF;
  --card-foreground: #2B2257;
  --popover: #FFFFFF;
  --popover-foreground: #2B2257;
  --primary: #6D4AE8;
  --primary-foreground: #FFFFFF;
  --secondary: #FF9EC4;
  --secondary-foreground: #2B2257;
  --muted: #EFE6FF;
  --muted-foreground: #57507F;
  --accent: #EFE6FF;
  --accent-foreground: #2B2257;
  --destructive: #C9344A;
  --border: #E4D9FF;
  --input: #E4D9FF;
  --ring: #6D4AE8;
  --chart-1: #6D4AE8;
  --chart-2: #FF7FAE;
  --chart-3: #3FC29E;
  --chart-4: #FFB547;
  --chart-5: #5AB3FF;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #2B2257;
  --sidebar-primary: #6D4AE8;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #EFE6FF;
  --sidebar-accent-foreground: #2B2257;
  --sidebar-border: #E4D9FF;
  --sidebar-ring: #6D4AE8;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Claymorphism (claymorphism) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Only a light mode: its colours sit on :root.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Lexend:wght@400;500;600&family=Mitr:wght@300;400;500;600&display=swap
 */
@theme {
  --color-bg: #F6F0FF;
  --color-surface: #FFFFFF;
  --color-surface-2: #EFE6FF;
  --color-text: #2B2257;
  --color-text-muted: #57507F;
  --color-primary: #6D4AE8;
  --color-on-primary: #FFFFFF;
  --color-secondary: #FF9EC4;
  --color-on-secondary: #2B2257;
  --color-accent: #3FC29E;
  --color-border: #E4D9FF;
  --color-success: #1E8455;
  --color-warning: #9E5A00;
  --color-danger: #C9344A;
  --color-chart-1: #6D4AE8;
  --color-chart-2: #FF7FAE;
  --color-chart-3: #3FC29E;
  --color-chart-4: #FFB547;
  --color-chart-5: #5AB3FF;
  --radius-sm: 16px;
  --radius-md: 22px;
  --radius-lg: 32px;
  --radius-xl: 44px;
  --radius-pill: 999px;
  --shadow-sm: inset -3px -4px 8px rgba(70,40,160,0.12), inset 3px 4px 8px rgba(255,255,255,0.9), 0 8px 14px -6px rgba(109,74,232,0.28);
  --shadow-md: inset -6px -8px 16px rgba(70,40,160,0.12), inset 6px 8px 16px rgba(255,255,255,0.9), 0 18px 30px -12px rgba(109,74,232,0.32);
  --shadow-lg: inset -10px -12px 24px rgba(70,40,160,0.14), inset 10px 12px 24px rgba(255,255,255,0.9), 0 30px 50px -18px rgba(109,74,232,0.4);
  --font-heading: "Fredoka", "Mitr", system-ui, sans-serif;
  --font-body: "Lexend", "Mitr", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Mitr", monospace;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Claymorphism (claymorphism). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Lexend:wght@400;500;600&family=Mitr:wght@300;400;500;600&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9412,
            1
          ],
          "hex": "#f6f0ff"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9373,
            0.902,
            1
          ],
          "hex": "#efe6ff"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.1333,
            0.3412
          ],
          "hex": "#2b2257"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3412,
            0.3137,
            0.498
          ],
          "hex": "#57507f"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4275,
            0.2902,
            0.9098
          ],
          "hex": "#6d4ae8"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.6196,
            0.7686
          ],
          "hex": "#ff9ec4"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.1333,
            0.3412
          ],
          "hex": "#2b2257"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.7608,
            0.6196
          ],
          "hex": "#3fc29e"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8941,
            0.851,
            1
          ],
          "hex": "#e4d9ff"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.5176,
            0.3333
          ],
          "hex": "#1e8455"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6196,
            0.3529,
            0
          ],
          "hex": "#9e5a00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.2039,
            0.2902
          ],
          "hex": "#c9344a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4275,
            0.2902,
            0.9098
          ],
          "hex": "#6d4ae8"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.498,
            0.6824
          ],
          "hex": "#ff7fae"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.7608,
            0.6196
          ],
          "hex": "#3fc29e"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7098,
            0.2784
          ],
          "hex": "#ffb547"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3529,
            0.702,
            1
          ],
          "hex": "#5ab3ff"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 22,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 32,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 44,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 0,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2745,
              0.1569,
              0.6275
            ],
            "hex": "#4628a0",
            "alpha": 0.12
          },
          "offsetX": {
            "value": -3,
            "unit": "px"
          },
          "offsetY": {
            "value": -4,
            "unit": "px"
          },
          "blur": {
            "value": 8,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "hex": "#ffffff",
            "alpha": 0.9
          },
          "offsetX": {
            "value": 3,
            "unit": "px"
          },
          "offsetY": {
            "value": 4,
            "unit": "px"
          },
          "blur": {
            "value": 8,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.4275,
              0.2902,
              0.9098
            ],
            "hex": "#6d4ae8",
            "alpha": 0.28
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 8,
            "unit": "px"
          },
          "blur": {
            "value": 14,
            "unit": "px"
          },
          "spread": {
            "value": -6,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2745,
              0.1569,
              0.6275
            ],
            "hex": "#4628a0",
            "alpha": 0.12
          },
          "offsetX": {
            "value": -6,
            "unit": "px"
          },
          "offsetY": {
            "value": -8,
            "unit": "px"
          },
          "blur": {
            "value": 16,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "hex": "#ffffff",
            "alpha": 0.9
          },
          "offsetX": {
            "value": 6,
            "unit": "px"
          },
          "offsetY": {
            "value": 8,
            "unit": "px"
          },
          "blur": {
            "value": 16,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.4275,
              0.2902,
              0.9098
            ],
            "hex": "#6d4ae8",
            "alpha": 0.32
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 18,
            "unit": "px"
          },
          "blur": {
            "value": 30,
            "unit": "px"
          },
          "spread": {
            "value": -12,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2745,
              0.1569,
              0.6275
            ],
            "hex": "#4628a0",
            "alpha": 0.14
          },
          "offsetX": {
            "value": -10,
            "unit": "px"
          },
          "offsetY": {
            "value": -12,
            "unit": "px"
          },
          "blur": {
            "value": 24,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              1,
              1,
              1
            ],
            "hex": "#ffffff",
            "alpha": 0.9
          },
          "offsetX": {
            "value": 10,
            "unit": "px"
          },
          "offsetY": {
            "value": 12,
            "unit": "px"
          },
          "blur": {
            "value": 24,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": true
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.4275,
              0.2902,
              0.9098
            ],
            "hex": "#6d4ae8",
            "alpha": 0.4
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 30,
            "unit": "px"
          },
          "blur": {
            "value": 50,
            "unit": "px"
          },
          "spread": {
            "value": -18,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Fredoka",
        "Mitr",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Lexend",
        "Mitr",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Mitr",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 600
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 260,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.34,
      1.56,
      0.64,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!