金融科技

Soft Clay

粘土拟物 × 马卡龙色的轻快金融 App 落地页

奶油底色上的白色“粘土”卡片：大圆角、顶部高光、底部内阴影与紫调长投影。纯 CSS 手机样机漂浮其上，存钱目标用锥形渐变圆环表示，还有可交互的储蓄计算器。适合消费金融、记账、教育、健康等需要亲和力的产品。

免费 · 更新于 · Live demo

签名细节

  • 漂浮的纯 CSS 手机样机与金币
  • 倾斜的蜜桃色荧光笔高亮
  • 粘土质感滑块计算器

页面区块

  1. 粘土导航
  2. Hero + CSS 手机样机
  3. 三步流程
  4. 储蓄计算器
  5. 用户评价
  6. 深色 CTA
  7. 页脚

色板

  • Cream #FBF6F0 — background
  • Aubergine #2B2140 — text
  • Grape #6C4BF4 — accent
  • Peach #FFC9AE — pastel
  • Lilac #D8CFFF — pastel
  • Mint #BFEBD6 — pastel
  • Butter #FFE9A8 — pastel

字体

  • Bricolage Grotesque — display
  • Plus Jakarta Sans — body

提示词目录

  1. Design Intent
  2. Design Tokens
  3. Typography
  4. Color & Material
  5. Layout & Grid
  6. Page Blueprint
  7. Components
  8. Motion & Interaction
  9. Responsive Behavior
  10. Accessibility
  11. Do / Don't
  12. Output Requirements

如何使用这套风格

复制提示词全文粘贴给任意 AI；或下载 Agent 技能 / Cursor 规则 / AGENTS.md；或在接入 MCP 的工具里说：“用 ui-atlas 的 soft-clay-fintech 风格做这个页面”。

免费预览

# 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.