wechat_wc/DESIGN.md

智绘微刻 Design System

Overview

智绘微刻是一个面向微信小程序的定制设计系统，服务于激光微雕笔记本、铜质杯垫、竹制笔盒、词云纪念等定制商品。它把现有手账感的装饰风格收敛为一套更克制、更现代、但仍保留品牌温度的设计语言。

整套系统以 design-system.html 交互样例为视觉基线，以 设计变更文档.md 为落地规则。落地到小程序时使用一套 token、两套主题（浅色 / 深色），所有组件行为都由统一变量驱动，不允许在页面内继续引入新的硬编码颜色、字号或组件形态。

---

Colors

所有颜色来自 :root 与 .theme-dark 的 CSS 变量，Web 版使用 px，小程序使用同一语义的 rpx。

• 页面背景 --bg-page: 浅色 #FAF7F2 / 深色 #191919，暖白与深墨底色
• 卡片背景 --bg-card: 浅色 #FFFFFF / 深色 #23201D，卡片、弹窗、浮层表面
• 弱化背景 --bg-muted: 浅色 #F3EEE7 / 深色 #2B2622，分组背景、Tabs 容器、骨架屏
• 输入背景 --bg-input: 浅色 #F5F1EB / 深色 #2B2622，输入框、搜索框
• 主文字 --text-primary: 浅色 #2E2622 / 深色 #F5EFE8
• 次要文字 --text-secondary: 浅色 #8A7E76 / 深色 #B3A79C
• 弱提示 --text-muted: 浅色 #B3A89E / 深色 #82766C，占位符、弱说明
• 主色 --accent-primary: 浅色 #D96C6A / 深色 #F09198，主按钮、选中态、价格
• 主色按压 --accent-primary-strong: 浅色 #C75B59 / 深色 #FFA7AD
• 主色浅底 --accent-primary-soft: 浅色 #F6E0DC / 深色 rgba(240,145,152,.14)
• 辅助蓝紫 --accent-secondary: 浅色 #6C7BDB / 深色 #8E97E8，链接、地址、聚焦
• 成功 --success: 浅色 #4FA477 / 深色 #67C58E
• 提醒 --warning: 浅色 #D99A4E / 深色 #E0AD68
• 危险 --danger: 浅色 #D85D5D / 深色 #EF7A7A，删除、错误、取消
• 常规边框 --border: 浅色 #EDE5DC / 深色 #37312C
• 强调边框 --border-strong: 浅色 #E0D5C8 / 深色 #463E37
• 毛玻璃 --glass: 浅色 rgba(255,255,255,.72) / 深色 rgba(25,25,25,.72)
• 毛玻璃描边 --glass-line: 浅色 rgba(255,255,255,.55) / 深色 rgba(255,255,255,.14)

禁止事项：

• 禁止整页彩色渐变背景。
• 禁止大面积使用超过 2 种高饱和色。
• 禁止浅色页使用纯黑 #000 作为正文，禁止深色页使用纯白 #fff 作为正文。
• 禁止在 UI 内使用 emoji 替代图标。

---

Typography

统一使用系统字体栈，不打包自定义字体：

-apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
'Noto Sans SC', 'Microsoft YaHei', 'Segoe UI', sans-serif

字号以 750rpx 设计稿为准：

• Display 56rpx / 800 / 1.15：品牌大字、营销页主标题
• Title-LG 44rpx / 700 / 1.2：页面主标题
• Title 36rpx / 700 / 1.25：区块标题、卡片标题
• Heading 32rpx / 600 / 1.3：小节标题、列表项名称
• Body 28rpx / 400 / 1.6：正文、表单内容
• Caption 24rpx / 400 / 1.4：说明文字、辅助信息
• Micro 20rpx / 500 / 1.2：标签、角标、时间

字重使用：

• 400：正文
• 500：次级强调、输入内容
• 600：按钮、小标题
• 700：页面标题、卡片标题
• 800：仅 Display 使用

排版规则：

• 标题不换行时使用 ellipsis 省略。
• 正文行高默认 1.6，长条款可用 1.8。
• 数字与货币使用 tabular-nums，避免跳动。
• 段落间距 16-24rpx，不靠空行制造层级。

---

Spacing

间距梯度：

4rpx · 8rpx · 12rpx · 16rpx · 24rpx · 32rpx · 48rpx · 64rpx · 96rpx

布局规则：

• 页面左右留白统一 32rpx。
• 页面底部安全区：calc(24rpx + env(safe-area-inset-bottom))。
• 卡片之间间隙 24rpx。
• 卡片内边距 24-32rpx。
• 分组标题与内容间距 24rpx。
• 顶部标题与内容之间至少保留 24rpx。

固定底栏的场景，需要在可滚动内容底部预留额外留白，避免悬浮栏遮挡内容：

• 页面正文底部留白不小于 88px（Web 样例值），小程序落地时按 112rpx + env(safe-area-inset-bottom) 计算。
• 只有真正不需要上下滚动的页面可以不加底部预留。

---

Border Radius

场景	圆角
输入框、小标签	16rpx
普通卡片	24rpx
弹窗、底部弹层	32rpx
按钮、胶囊、分页 chip	999rpx
圆形头像 / 圆形图标按钮	50%

小程序中不使用 3px dashed 卡片，不使用星星贴纸做装饰边框。

---

Elevation

阴影只表达层级，不做发光或浓重投影。

• 卡片阴影 --shadow-card：浅色 0 2px 10px rgba(46,38,34,.06)；深色 0 2px 12px rgba(0,0,0,.3)
• 浮层阴影 --shadow-elevated：浅色 0 12px 30px rgba(46,38,34,.14)；深色 0 12px 36px rgba(0,0,0,.48)

毛玻璃是本系统最重要的浮层质感，只用于需要浮在内容之上的场景。

.glass-surface {
  background: var(--glass);
  backdrop-filter: blur(24rpx);
  -webkit-backdrop-filter: blur(24rpx);
  border: 1rpx solid rgba(255, 255, 255, 0.42);
}

底部 TabBar 与底部操作栏需要比普通玻璃更透、更明显地透出内容，使用更低透明度与更强模糊：

.floating-glass {
  background: rgba(255, 255, 255, 0.55); /* dark: rgba(25, 25, 25, 0.55) */
  backdrop-filter: blur(32px) saturate(1.2);
  -webkit-backdrop-filter: blur(32px) saturate(1.2);
  border: 1rpx solid var(--glass-line);
}

毛玻璃使用场景：

• 自定义 TabBar
• 页面吸顶信息条
• 底部操作栏
• 底部弹窗背景
• 需要盖在图片上的卡片

---

Components

Buttons

变体	背景	文字	边框
Primary	--accent-primary	白	无
Secondary	--bg-card	--text-primary	1rpx --border-strong
Ghost	透明	--accent-primary	无
Destructive	--danger	白	无

尺寸：

• 大按钮：高度 96rpx，圆角 999rpx，字号 32rpx / 600
• 中按钮：高度 80rpx
• 小按钮：高度 64rpx，字号 26rpx / 600

状态：

• 按压：scale(0.98) + 主色加深 4%
• 禁用：opacity: 0.45，无点击反馈
• Loading：按钮内显示 24rpx 环形 loading 后再显示文案
• 危险操作必须二次确认（showModal）

Cards

• Surface Card：默认内容容器，--bg-card + 1rpx border + --shadow-card
• Glass Card：信息浮层 / 图片上覆盖，使用毛玻璃
• Media Card：图片在上或居左，使用 aspect-ratio 固定比例，文字区域带留白
• 卡片禁止再次嵌套 dashed-card，同一个视觉层最多出现一张卡片。

Forms

• 输入框高度 88rpx，圆角 16rpx，内边距 0 24rpx。
• 占位符用 --text-muted，输入文字用 --text-primary。
• 聚焦边框 --accent-primary，并保留轻位移 / 轻阴影反馈。
• 错误信息用 --danger，显示在控件下方 8rpx。
• textarea 最小高度 240rpx，内边距 24rpx，行高 1.6。
• 搜索框同样使用 --bg-input，聚焦时切到 --bg-card + 主色描边。

Lists

• 列表行最小高度 112rpx。
• 左侧图标 48rpx，标题 32rpx / 600，辅助信息 24rpx。
• 右侧箭头 28rpx，使用 --text-muted。
• 分隔线：1rpx solid var(--border)，默认左右留 32rpx。

Tags & Badges

• 标签高度 40rpx，圆角 999rpx，字号 22rpx / 600。
• 标签底色使用功能色的 12-15% 透明底，文字用对应功能色。
• 徽标数字使用深色底或主色底、白字，最小宽高 28rpx。

Tabs & Segmented Controls

• Tab 高度 88rpx，字号 28rpx / 500。
• 选中态：--accent-primary + 600 字重 + 48rpx 宽圆角指示条。
• 分段控件置于 --bg-muted 容器，选中项为 --bg-card 浮起。

Modals & Bottom Sheets

• 遮罩：rgba(0,0,0,.45)。
• 居中弹窗：圆角 32rpx，内边距 40rpx，最大宽度 640rpx。
• 底部弹层：顶部圆角 32rpx，底部延伸到安全区，顶部带 64rpx 宽拖动条。
• 内容超过一屏时允许滚动，操作按钮固定在弹层底部。

Empty States

• 图标 96rpx，主题色 12% 透明圆形底。
• 标题 32rpx / 700，说明 26rpx / --text-secondary。
• 主 CTA 默认 80rpx 高度。
• 空状态必须给出下一步动作。

Steppers & Sliders

• 步进器按钮 60rpx，圆角 16rpx，中缝数字宽度不小于 48rpx。
• 滑块轨道高度 8rpx，圆角 999rpx。
• 滑块圆点 32rpx，主色描边，拖动时 40rpx。
• 滑块值实时显示在右侧，格式如 80%、+12。

Toast & Skeleton

• Toast 使用 rgba(40,35,32,.92) 深色底、白字，圆角 24rpx。
• 短文案优先 icon: 'none'，成功才使用 icon: 'success'。
• 骨架屏用 --bg-muted，以 1.4s 透明度呼吸动画，不闪烁。

Custom Navigation & TabBar

• 所有页面使用 navigationStyle: custom，自行避让状态栏和胶囊。
• 页面结构：状态栏空白 + 返回/标题/右侧操作，同一水平线，左右留 24rpx。
• 返回按钮触控区 48rpx，旧 ← 字符替换为线性返回图标。
• 标题 34rpx / 600，居中，最多 8 个字。
• 右侧操作与左侧占位保持同宽，保证标题真正居中。

自定义 TabBar：

• 高度 96rpx + env(safe-area-inset-bottom)。
• 毛玻璃半透明底，悬浮在内容之上。
• 图标 44rpx，选中态填充 + 轻放大；文字 20rpx / 600。
• 5 个 tab 均分，最大宽度 160rpx。

固定操作栏：

• 高度 112rpx + 安全区。
• 背景使用毛玻璃，不透明底 --bg-card 作为降级。
• 主 CTA 永远在屏幕右下角或通栏。

---

Motion

• 时长：160-240ms。
• 缓动：cubic-bezier(0.22, 1, 0.36, 1)。
• 只动画 opacity 和 transform，避免重排。
• 按压反馈：按钮 scale(0.98)，卡片 scale(0.975)。
• 页面进入：内容区上移 24rpx + 淡入，不做满屏位移动画。
• Tab 切换、列表筛选不添加横向滑动动画，除非用户手势触发。

---

Do's and Don'ts

1. Do 使用统一 token 管理颜色、字号、间距、圆角、阴影与毛玻璃。
2. Don't 在页面里写硬编码颜色，尤其不要继续出现 #b08d8d、#fce4ec 等旧值。
3. Do 用留白和字重建立层级，卡片和边框只表达真实容器。
4. Don't 恢复 3px dashed 卡片和 star-badge 星星贴纸装饰。
5. Do 让固定 TabBar 和底部操作栏保持悬浮毛玻璃，可滚动页面底部要预留空白，内容滑到顶部时不被底栏遮挡。
6. Don't 把底栏做成完全不透明的纯色块，除非是降级兜底。
7. Do 在深色模式下检查所有文字与背景对比度，页面背景由系统实时同步，避免顶部闪白。
8. Don't 使用 emoji 代替图标，功能图标优先线性，选中态使用填充变体。
9. Do 保证主要点击目标不小于 88rpx，所有尺寸基于 750rpx 设计稿。
10. Don't 在一个视觉层里嵌套多个卡片，或把页面区块全部做成浮起的可滚动卡片。

---

Acceptance

• 所有页面使用同一套 CSS 变量，无新增硬编码颜色。
• 页面没有 3px dashed 卡片和星星装饰。
• 自定义导航在所有机型避让状态栏与胶囊按钮。
• 深浅色切换后页面文字与背景可读。
• 主要点击目标 ≥ 88rpx。
• 表单有聚焦、错误、禁用状态。
• 空状态都有下一步动作。
• TabBar、吸顶栏、底部弹层为毛玻璃。
• 页面横向留白统一 32rpx。
• 图片有固定比例，加载前后不跳动。
• 可滚动页面在底部悬浮栏下预留足够空白。