Soft Clay
Claymorphism × pastel candy colors, a playful fintech app landing page
White clay cards on a cream canvas: big radii, a top highlight, a soft inner shadow and a long lilac drop shadow. A pure-CSS phone floats above, savings goals drawn as conic progress rings, plus an interactive savings calculator. For consumer finance, budgeting, education and wellness products that need warmth.
Free · Updated · Live demo
Signature details
- A floating pure-CSS phone with coins
- A tilted peach highlighter stroke
- Clay-textured slider calculator
Page sections
- Clay navigation
- Hero + CSS phone mockup
- Three steps
- Savings calculator
- Reviews
- Dark CTA
- Footer
Palette
- Cream
#FBF6F0— background - Aubergine
#2B2140— text - Grape
#6C4BF4— accent - Peach
#FFC9AE— pastel - Lilac
#D8CFFF— pastel - Mint
#BFEBD6— pastel - Butter
#FFE9A8— pastel
Typefaces
- Bricolage Grotesque — display
- Plus Jakarta Sans — body
Prompt outline
- Design Intent
- Design Tokens
- Typography
- Color & Material
- Layout & Grid
- Page Blueprint
- Components
- Motion & Interaction
- Responsive Behavior
- Accessibility
- Do / Don't
- Output Requirements
How to use this style
Copy the full prompt into any AI; or download it as an agent skill / Cursor rule / AGENTS.md; or, in any MCP-connected tool, say: “Build this page in the soft-clay-fintech style from ui-atlas”.
Free preview
# Soft Clay — Playful Fintech App Landing Page You are a senior brand & product designer known for friendly, tactile consumer apps, and a front-end engineer who can model "clay" depth with layered CSS shadows. Build the marketing landing page for a fictional micro-savings app called **"Pebble"** in the **Soft Clay** style described below. Every value is a specification, not a suggestion. ## 1. Design Intent Soft, optimistic, squeezable — like pastel modelling clay arranged on a warm kitchen table. Money is usually presented as cold and serious; this page makes it feel like play without losing trust. Surfaces look slightly puffy: generous radii, a white top highlight, a faint inner shadow at the bottom and a long, lilac-tinted drop shadow. Pastel peach, lilac, mint and butter are used as large calm fields; a saturated grape violet is the only "serious" color, reserved for actions.