黏土拟态（移动）Claymorphism (Mobile)
大圆角、多层黏土阴影与粉紫渐变按钮，配缓慢漂浮的光斑。柔软友好，触控目标大，适合低压力场景。
典型场景儿童/教育 App · 冥想 · 生活服务
效果示例
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
大圆角、多层黏土阴影与粉紫渐变按钮，配缓慢漂浮的光斑。柔软友好，触控目标大，适合低压力场景。
关键词
效果与动效
Multi-layer shadow stacks (nested View) to simulate clay depth, LinearGradient #A78BFA→#7C3AED buttons, borderRadius 40–50 outer / 32 cards / 20 buttons, Reanimated spring squish (scale 0.92 on press), BlurView glass-clay hybrid cards, floating blobs with slow ±20px drift, Haptics Light on every press
设计系统变量
--bg#F4F1FA--card-bgrgba(255,255,255,0.7)--text#332F3A--muted#635F69--accent#7C3AED--accent2#DB2777--success#10B981--warning#F59E0B--radius-outer50px--radius-card32px--radius-button20px--font-headingNunito Black--font-bodyDM Sans配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Vivid Violet #7C3AED, Hot Pink #DB2777
辅色 / Secondary
Canvas #F4F1FA, Soft Charcoal #332F3A, Emerald #10B981, Amber #F59E0B, Lavender-Gray #635F69
强调色在页面底色上的对比度约 5.1:1，可用于正文与图标。
适用场景
适合 / Best For
- Children education apps
- teen social products
- crypto gamification
- creative tools
- brand mascot-led apps
避开 / Do Not Use For
- Serious enterprise
- high-density data
- editorial reading apps
- fintech trust signals
框架兼容
能力矩阵
实现要点
落地清单
- Background uses #F4F1FA (no pure white),
- Multi-layer clay shadow stack applied,
- Cards use blurred glass-clay hybrid,
- Buttons squish to scale 0.92 on press,
- Spring physics on all interactions,
- Nunito Black for headings,
- Background blobs drifting,
- Haptics on every press,
- Nested border radius (card 32, inner 24),
- Bento layout with hero span
CSS / 技术关键词
backgroundColor: '#F4F1FA', cardBg: 'rgba(255,255,255,0.7)', textPrimary: '#332F3A', textMuted: '#635F69', accentPrimary: '#7C3AED', accentSecondary: '#DB2777', success: '#10B981', warning: '#F59E0B', radiusOuter: 50, radiusCard: 32, radiusButton: 20, shadowStack: 'nested View', gradientButton: ['#A78BFA', '#7C3AED'], springDamping: 10
AI 提示词
Design a Claymorphism (Mobile) mobile interface using claymorphism, clay, 3d, soft, bubbly, candy, playful, rounded. Prioritize clear hierarchy, safe areas, touch targets, visible focus, and reduced-motion alternatives.