heartopia playful pastel

# Style Pack: Heartopia Playful Pastel
# 来源: clone-heartopia.gg
# 适用: 游戏、社交产品、消费级应用、儿童/教育、社区平台、创作者工具
# 情绪: 可爱、温暖、俏皮、快乐、轻松
# 主题: 浅色 (Light)

---
## 配色 Token (Colors)
---

--bg: #fff9f5
--bg-warm: #fff5f8
--bg-cool: #f0f8ff
--bg-raised: #ffffff
--bg-raised-glass: rgba(255, 255, 255, 0.9)
--fg: #5d4e60
--fg-deep: #3a3340
--fg-muted: #6b5c70
--fg-light: #8a7d8e
--border: rgba(93, 78, 96, 0.1)
--border-strong: rgba(93, 78, 96, 0.18)
--accent-primary: #f5916e
--accent-primary-hover: #e07a56
--accent-primary-fg: #ffffff
--accent-primary-soft: rgba(245, 145, 110, 0.15)
--accent-yellow: #f5d76e
--accent-yellow-fg: #5d4e60
--accent-yellow-soft: rgba(245, 215, 110, 0.2)
--accent-green: #8ed16c
--accent-green-hover: #6db855
--accent-green-fg: #ffffff
--accent-green-soft: rgba(142, 209, 108, 0.15)
--accent-pink: #f8a5b8
--accent-pink-light: #ffcad4
--accent-pink-deep: #e8899c
--accent-pink-soft: rgba(248, 165, 184, 0.15)
--accent-blue: #7bc8f6
--accent-blue-light: #a5ddfb
--accent-blue-deep: #5aade0
--accent-blue-soft: rgba(123, 200, 246, 0.12)
--accent-purple: #c9a0dc
--accent-purple-light: #dfc5ec
--accent-purple-deep: #a87dc2
--accent-purple-soft: rgba(201, 160, 220, 0.12)
--success: #8ed16c
--warning: #f5d76e
--danger: #f5916e

---
## 字体 (Typography)
---

# Display / 大标题
--font-display: "Quicksand", "Nunito", sans-serif
--font-size-display: clamp(2.5rem, 5vw, 3.5rem)
--font-weight-display: 700
--line-height-display: 1.05
--letter-spacing-display: -0.02em

# H1
--font-size-h1: clamp(2rem, 3.5vw, 2.75rem)
--font-weight-h1: 700
--line-height-h1: 1.08
--letter-spacing-h1: -0.015em

# H2
--font-size-h2: clamp(1.5rem, 2.5vw, 2rem)
--font-weight-h2: 650
--line-height-h2: 1.12

# H3
--font-size-h3: clamp(1.2rem, 1.8vw, 1.5rem)
--font-weight-h3: 600
--line-height-h3: 1.15

# Body / 正文
--font-sans: "Nunito", "Quicksand", system-ui, sans-serif
--font-size-body: 1rem
--font-weight-body: 400
--line-height-body: 1.65
--letter-spacing-body: 0em

# Body Large (特殊段落用)
--font-size-body-lg: 1.1rem
--font-weight-body-lg: 500
--line-height-body-lg: 1.6

# Handwriting / 手写体 (特殊装饰 — 谨慎使用)
--font-hand: "Caveat", cursive, handwriting
--font-size-hand: clamp(1.1rem, 2vw, 1.4rem)
--font-weight-hand: 600
--line-height-hand: 1.3

# Label / 标签
--font-size-label: 0.8rem
--font-weight-label: 600
--line-height-label: 1.2
--letter-spacing-label: 0.02em

# Small / 小字
--font-size-sm: 0.75rem
--font-weight-sm: 500
--line-height-sm: 1.35

# Mono / 代码
--font-mono: "Fira Code", ui-monospace, monospace
--font-size-mono: 0.813rem
--font-weight-mono: 500
--line-height-mono: 1.45

---
## 圆角 (Border Radius)
---

--radius-sm: 4px
--radius-md: 8px
--radius-lg: 12px
--radius-xl: 16px
--radius-2xl: 20px
--radius-full: 999px
--radius-round: 50%

---
## 间距 (Spacing)
---

--space-1: 4px
--space-2: 6px
--space-3: 8px
--space-4: 12px
--space-5: 16px
--space-6: 24px
--space-8: 32px
--space-10: 40px
--space-12: 48px
--space-16: 64px
--space-20: 80px

---
## 阴影 (Shadows) — 柔和浮起系统
---

--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04)
--shadow-md: 0 4px 18px rgba(0, 0, 0, 0.06)
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08)
--shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.1)
--shadow-float: 0 2px 12px rgba(0, 0, 0, 0.05)
--shadow-color: rgba(0, 0, 0, 0.08)

---
## 布局 (Layout)
---

# 桌面端 (>1024px)
--max-width: 1200px
--content-padding-desktop: 40px
--nav-height: 64px
--section-gap-desktop: 80px
--grid-columns-desktop: 12

# 平板端 (768px-1024px)
--content-padding-tablet: 28px
--nav-height-tablet: 56px
--section-gap-tablet: 56px
--grid-columns-tablet: 6

# 移动端 (<768px)
--content-padding-mobile: 20px
--nav-height-mobile: 52px
--section-gap-mobile: 40px
--grid-columns-mobile: 4

---
## 组件规格 (Component Tokens)
---

# 主按钮 (Primary Button) — 暖橙填充
--btn-primary-bg: var(--accent-primary)
--btn-primary-fg: var(--accent-primary-fg)
--btn-primary-hover-bg: var(--accent-primary-hover)
--btn-primary-radius: var(--radius-full)
--btn-primary-padding-x: 24px
--btn-primary-padding-y: 11px
--btn-primary-font-size: 0.95rem
--btn-primary-font-weight: 700
--btn-primary-shadow: var(--shadow-float)
--btn-primary-hover-shadow: var(--shadow-md)

# 次按钮 (Secondary Button)
--btn-secondary-bg: var(--bg-raised)
--btn-secondary-fg: var(--fg)
--btn-secondary-border: var(--border-strong)
--btn-secondary-hover-bg: var(--bg-warm)
--btn-secondary-radius: var(--radius-full)
--btn-secondary-padding-x: 24px
--btn-secondary-padding-y: 11px

# 彩色按钮变体 (Playful 彩色按钮)
--btn-yellow-bg: var(--accent-yellow)
--btn-yellow-fg: var(--accent-yellow-fg)
--btn-green-bg: var(--accent-green)
--btn-green-fg: var(--accent-green-fg)
--btn-pink-bg: var(--accent-pink)
--btn-pink-fg: var(--fg)
--btn-purple-bg: var(--accent-purple)
--btn-purple-fg: var(--fg)

# 卡片 (Card) — 软绵绵卡片
--card-bg: var(--bg-raised-glass)
--card-fg: var(--fg)
--card-border: var(--border)
--card-radius: var(--radius-xl)
--card-padding: 20px
--card-shadow: var(--shadow-float)
--card-hover-shadow: var(--shadow-md)
--card-hover-transform: translateY(-2px)

# 彩色卡片变体
--card-pink-bg: rgba(248, 165, 184, 0.06)
--card-yellow-bg: rgba(245, 215, 110, 0.08)
--card-blue-bg: rgba(123, 200, 246, 0.05)
--card-green-bg: rgba(142, 209, 108, 0.05)
--card-purple-bg: rgba(201, 160, 220, 0.05)

# 输入框 (Input) — 大触摸目标
--input-bg: var(--bg-raised)
--input-fg: var(--fg)
--input-placeholder: var(--fg-light)
--input-border: var(--border-strong)
--input-radius: var(--radius-lg)
--input-padding-x: 14px
--input-padding-y: 12px
--input-focus-border: var(--accent-primary)
--input-focus-ring: 0 0 0 3px var(--accent-primary-soft)
--input-height: 44px

# 徽章 (Badge) — 多彩标签
--badge-bg: var(--accent-pink-soft)
--badge-fg: var(--accent-pink-deep)
--badge-radius: var(--radius-full)
--badge-padding-x: 10px
--badge-padding-y: 4px
--badge-font-size: 0.75rem
--badge-font-weight: 700

# 彩色徽章变体
--badge-green-bg: var(--accent-green-soft)
--badge-green-fg: var(--accent-green-hover)
--badge-yellow-bg: var(--accent-yellow-soft)
--badge-yellow-fg: #8a7720
--badge-blue-bg: var(--accent-blue-soft)
--badge-blue-fg: var(--accent-blue-deep)
--badge-purple-bg: var(--accent-purple-soft)
--badge-purple-fg: var(--accent-purple-deep)

# 导航 (Navigation)
--nav-bg: rgba(255, 249, 245, 0.9)
--nav-backdrop: blur(10px)
--nav-border: var(--border)
--nav-link-fg: var(--fg-muted)
--nav-link-hover-fg: var(--fg)
--nav-link-active-fg: var(--accent-primary)

# 分割线 (Divider)
--divider-color: var(--border)
--divider-width: 1px

# 工具提示 (Tooltip)
--tooltip-bg: var(--fg)
--tooltip-fg: var(--bg-raised)
--tooltip-radius: var(--radius-lg)
--tooltip-padding: 8px 14px
--tooltip-shadow: var(--shadow-md)

# 模态框 (Modal)
--modal-bg: var(--bg-raised)
--modal-backdrop: rgba(93, 78, 96, 0.3)
--modal-backdrop-blur: blur(4px)
--modal-radius: var(--radius-2xl)
--modal-padding: 28px
--modal-shadow: var(--shadow-lg)

---
## 动效 (Motion)
---

--duration-fast: 130ms
--duration-normal: 200ms
--duration-slow: 300ms
--duration-reveal: 500ms
--duration-spring: 400ms
--easing-default: cubic-bezier(0.4, 0, 0.2, 1)
--easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1)
--easing-smooth: cubic-bezier(0.25, 0.1, 0.25, 1)

# 弹簧动效 (Spring) — 可爱弹跳
--spring-gentle: cubic-bezier(0.34, 1.4, 0.64, 1)
--spring-bouncy: cubic-bezier(0.34, 1.8, 0.64, 1)

# 浮动动画 (Float) — 柔和上下浮动
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

---
## 设计铁律 (Design Locks)
---

1. 颜色锁定：暖杏色 #f5916e 为主动交互色，黄/绿/粉/蓝/紫 5 色为辅助，每个颜色只用于一个语义角色
2. 形状锁定：全圆角体系，按钮 pill (999px)，卡片 16-20px，圆形图标 50%
3. 阴影锁定：柔和浮起阴影，无硬阴影
4. 主题锁定：浅色/暖色画布 (#fff9f5 / #fff5f8)
5. 字体锁定：圆润 Sans (Nunito + Quicksand)，Handwriting (Caveat) 仅用于装饰
6. 间距锁定：宽松间距 (4, 6, 8, 12, 16, 24, 32, 40, 48, 64, 80)

---
## 布局家族 (Layout Families)
---

1. 俏皮英雄区 (Playful Hero): 居中标题 + 浮动插图 + 彩色 CTA
2. 彩虹卡片网格 (Rainbow Card Grid): 彩色背景卡片混合排列
3. 大图叙事 (Large Image Narrative): 插图 + 简短文案并排
4. 步骤向导 (Onboarding Steps): 圆点进度 + 卡片横向滚动
5. 互动浮岛 (Interactive Islands): 漂浮元素不规则排列
6. 评价卡旋转 (Testimonial Carousel): 用户评价轮播
7. 价格对比 (Pricing Cards): 推荐方案彩色边框突出

---
## PC端布局规范
---

- 最大内容宽度: 1200px
- 内容区内边距: 40px
- 导航高度: 64px
- 段落垂直间距: 80px 至 100px
- 12列网格系统
- Hero 标题用 Quicksand，副标题不超过 24 字
- 主要 CTA 必须在首屏可见

---
## 移动端布局规范 (<768px)
---

- 内容区内边距: 20px
- 导航高度: 52px
- 段落垂直间距: 40px 至 56px
- 4列网格系统
- 卡片全宽，触摸目标 ≥44px
- 彩色背景色块占满宽度
- 大按钮，手指友好

---
## 平板端布局规范 (768px-1024px)
---

- 内容区内边距: 28px
- 导航高度: 56px
- 段落垂直间距: 56px 至 72px
- 6列网格系统
- 卡片 2列排列

---
## 组件状态 (Component States)
---

- hover: 卡片上浮 translateY(-2px) + 阴影加深
- focus-visible: 3px 暖杏色柔光环
- active: 轻微缩放 scale(0.98)
- disabled: 50% 透明度，无交互
- loading: 柔和骨架屏 (暖杏色 shimmer)
- error: 暖杏色边框 + 粉色背景提示

---
## 使用提示词模板 (Prompt Template)
---

使用 Heartopia Playful Pastel 风格。

项目：
- 产品：[名称]
- 受众：[目标用户]
- 页面类型：[landing / game / community]
- 转化目标：[目标 CTA]

要求：
- 暖色画布 (#fff9f5)，圆润 Quicksand + Nunito 字体
- 5色彩色系统：暖杏/亮黄/嫩绿/柔粉/天空蓝/淡紫
- 柔和浮起阴影，全圆角，大触摸目标
- 弹簧弹跳动效，可爱但不幼稚
- 避免硬阴影、避免暗色、避免粗糙排版
- 至少 4 种布局家族防止重复感
- 移动端大按钮优先，手指友好

---
## 禁止清单 (Anti-Slop Ban List)
---

- 不要使用硬边阴影 (box-shadow blur=0)
- 不要使用暗色背景 (除非特殊暗色段落)
- 不要使用尖锐圆角 (<4px)
- 不要过多使用手写字体
- 不要使用过分幼稚的元素
- 不要使用密集数据表格
- 不要使用工业/机械感设计元素
- 不要使用纯黑白对比
- 不要使用三个相同大小的卡片重复排列

本文档为站内渲染。原始文件本地路径：saas/source/knowledge-world/Knowledge-World-设计配色-heartopia-playful-pastel-e57eda.txt（仅本地保留，不入库不部署）