wm
b94eb706ff
- 建立 Lucide 子集 iconfont（49 字形），全站 emoji 替换为 fc-icon 组件 - 重塑 Design Token（冷中性近黑底 + Volt 荧光绿 #B6F24E），消除硬编码颜色 - 首页登录后个性化：我的计划 / 我的收藏 / 今日推荐（纯前端复用现有 API） - 后端 DEFAULT_EMOJI→Lucide 名，PALETTE 对齐 Kinetic Dark 语义色板 - 修复 person-standing 缺失字形；14 个官方组合 seed emoji 全部映射到现有字形
136 lines
7.2 KiB
JSON
136 lines
7.2 KiB
JSON
{
|
||
"$meta": {
|
||
"product": "FITCOACH",
|
||
"version": "2026-design-language-v2-draft",
|
||
"register": "product",
|
||
"platform": "wechat-miniprogram",
|
||
"designer": "颜好看",
|
||
"note": "小程序使用 rpx（750rpx=375pt 逻辑像素）。颜色给 hex/rgba 真值，尺寸给 rpx 真值 + px 等价注释。前端把本文件编译进 app.wxss 的 :root（page 选择器）变量与 JS 常量。",
|
||
"three_axis": { "DESIGN_VARIANCE": 5, "MOTION_INTENSITY": 4, "VISUAL_DENSITY": 4 },
|
||
"icon_set": "lucide (MIT) — 编译为 iconfont 子集，详情见 DESIGN 提案 §3"
|
||
},
|
||
|
||
"color": {
|
||
"bg": { "value": "#0B0F0E", "type": "color", "role": "A1 页面背景（近黑，中性偏冷，非纯黑）" },
|
||
"bg_gradient": { "value": "radial-gradient(120% 80% at 50% 0%, #11171400 0%, #0B0F0E 60%)", "type": "gradient", "role": "A1 hero 背景微光（极弱，不喧宾夺主）" },
|
||
"surface": { "value": "#141A18", "type": "color", "role": "A1 卡片/容器背景" },
|
||
"surface_2": { "value": "#1C2421", "type": "color", "role": "A1 次级表面（chip/输入/选中）" },
|
||
"surface_warm":{ "value": "#1A211E", "type": "color", "role": "B-slot 悬浮/高亮表面" },
|
||
|
||
"fg": { "value": "#ECF1EF", "type": "color", "role": "A1 主文本" },
|
||
"fg_2": { "value": "#9BA7A1", "type": "color", "role": "B-slot 次级文本" },
|
||
"fg_3": { "value": "#6B7670", "type": "color", "role": "B-slot 三级/元数据文本" },
|
||
|
||
"border": { "value": "rgba(255,255,255,0.08)", "type": "color", "role": "A1 默认边框/分隔线" },
|
||
"border_strong":{ "value": "rgba(255,255,255,0.14)", "type": "color", "role": "B-slot 强调边框（选中态）" },
|
||
"border_soft": { "value": "rgba(255,255,255,0.05)", "type": "color", "role": "B-slot 内部行分隔" },
|
||
|
||
"accent": { "value": "#FF6A3D", "type": "color", "role": "A1 品牌强调色 Pulse 珊瑚橙（CTA/激活导航/关键数据）" },
|
||
"accent_hover":{ "value": "#FF8263", "type": "color", "role": "A2 悬浮" },
|
||
"accent_active":{ "value": "#E8562B", "type": "color", "role": "A2 按下" },
|
||
"accent_on": { "value": "#20100A", "type": "color", "role": "A2 accent 背景上的前景（深暖色，对比 >7:1）" },
|
||
"accent_soft": { "value": "rgba(255,106,61,0.12)", "type": "color", "role": "C 强调色淡底（标签/选中底）" },
|
||
"accent_ring": { "value": "rgba(255,106,61,0.38)", "type": "color", "role": "C 聚焦光环/进度环发光" },
|
||
|
||
"success": { "value": "#2BD9A6", "type": "color", "role": "A2 正向/进度完成/连续天数（语义绿，非第二品牌色）" },
|
||
"success_on": { "value": "#04201A", "type": "color", "role": "A2 success 背景前景" },
|
||
"success_soft":{ "value": "rgba(43,217,166,0.12)", "type": "color", "role": "C 正向淡底" },
|
||
"warn": { "value": "#F2B53D", "type": "color", "role": "A2 警告" },
|
||
"danger": { "value": "#FF5C5C", "type": "color", "role": "A2 错误/删除（替代旧 #E5544B）" },
|
||
"danger_soft": { "value": "rgba(255,92,92,0.12)", "type": "color", "role": "C 错误淡底" },
|
||
"info": { "value": "#4FA8FF", "type": "color", "role": "A2 信息" },
|
||
|
||
"focus_ring": { "value": "0 0 0 3px rgba(255,106,61,0.45)", "type": "shadow", "role": "A2 键盘焦点环" }
|
||
},
|
||
|
||
"font": {
|
||
"display": { "value": "'Manrope', 'PingFang SC', 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Noto Sans CJK SC', sans-serif", "type": "fontFamily", "role": "A1 标题/数字（拉丁用 Manrope，中文回落系统黑体）" },
|
||
"body": { "value": "'PingFang SC', 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Noto Sans CJK SC', -apple-system, sans-serif", "type": "fontFamily", "role": "A1 正文（中文系统字体优先，避免打包 10MB+ CJK 字体）" },
|
||
"mono": { "value": "'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace", "type": "fontFamily", "role": "A2 数据/统计数字（等宽，tabular）" }
|
||
},
|
||
|
||
"fontSize": {
|
||
"xs": { "value": "22rpx", "px": 11, "role": "eyebrow 全大写标签" },
|
||
"sm": { "value": "24rpx", "px": 12, "role": "caption/辅助" },
|
||
"base":{ "value": "28rpx", "px": 14, "role": "正文基准" },
|
||
"md": { "value": "30rpx", "px": 15, "role": "正文略大" },
|
||
"lg": { "value": "32rpx", "px": 16, "role": "三级标题/h3" },
|
||
"xl": { "value": "36rpx", "px": 18, "role": "二级标题/h2" },
|
||
"2xl": { "value": "44rpx", "px": 22, "role": "一级标题/h1" },
|
||
"3xl": { "value": "56rpx", "px": 28, "role": "Hero 主标题" },
|
||
"4xl": { "value": "72rpx", "px": 36, "role": "巨型统计数字（偶尔）" }
|
||
},
|
||
|
||
"fontWeight": {
|
||
"regular": { "value": 400, "role": "正文" },
|
||
"medium": { "value": 510, "role": "按钮/小标题（注意：小程序需字体含此字重，或回落 500）" },
|
||
"semibold": { "value": 590, "role": "大标题/强调（或 600）" }
|
||
},
|
||
|
||
"letterSpacing": {
|
||
"eyebrow": { "value": "0.08em", "role": "ALL CAPS 标签" },
|
||
"title": { "value": "-0.02em", "role": "大标题负字距" },
|
||
"body": { "value": "0", "role": "正文" }
|
||
},
|
||
|
||
"spacing": {
|
||
"1": { "value": "8rpx", "px": 4 },
|
||
"2": { "value": "16rpx", "px": 8 },
|
||
"3": { "value": "24rpx", "px": 12 },
|
||
"4": { "value": "32rpx", "px": 16 },
|
||
"5": { "value": "40rpx", "px": 20 },
|
||
"6": { "value": "48rpx", "px": 24 },
|
||
"8": { "value": "64rpx", "px": 32 },
|
||
"10": { "value": "80rpx", "px": 40 },
|
||
"12": { "value": "96rpx", "px": 48 },
|
||
"16": { "value": "128rpx","px": 64, "role": "仅 Hero/大区块" }
|
||
},
|
||
|
||
"radius": {
|
||
"sm": { "value": "16rpx", "px": 8 },
|
||
"md": { "value": "24rpx", "px": 12 },
|
||
"lg": { "value": "32rpx", "px": 16 },
|
||
"xl": { "value": "40rpx", "px": 20 },
|
||
"pill": { "value": "9999rpx", "px": 9999 }
|
||
},
|
||
|
||
"shadow": {
|
||
"flat": { "value": "none", "role": "默认（用 hairline 边框代替阴影）" },
|
||
"ring": { "value": "0 0 0 1rpx rgba(255,255,255,0.08)", "role": "卡片默认：1px 发丝边框" },
|
||
"raised": { "value": "0 8rpx 24rpx rgba(0,0,0,0.32)", "role": "悬浮/选中抬升" },
|
||
"float": { "value": "0 12rpx 40rpx rgba(0,0,0,0.45)", "role": "底部导航/吸顶" },
|
||
"glow": { "value": "0 8rpx 24rpx rgba(255,106,61,0.28)", "role": "CTA 主按钮光晕（唯一允许的彩色阴影）" }
|
||
},
|
||
|
||
"motion": {
|
||
"fast": { "value": "150ms", "role": "即时反馈/hover" },
|
||
"base": { "value": "200ms", "role": "状态切换收敛值" },
|
||
"slow": { "value": "300ms", "role": "进入/布局变化" },
|
||
"ease": { "value": "cubic-bezier(0.2, 0, 0, 1)", "role": "标准缓动（无 bounce/elastic）" }
|
||
},
|
||
|
||
"z": {
|
||
"base": 0,
|
||
"sticky": 100,
|
||
"nav": 60,
|
||
"dropdown":1000,
|
||
"modal": 1200,
|
||
"toast": 1300
|
||
},
|
||
|
||
"icon": {
|
||
"set": "lucide",
|
||
"license": "MIT",
|
||
"sizes": { "inline": "16rpx", "button": "20rpx", "standalone": "24rpx" },
|
||
"stroke": "2px (编译为 iconfont 后对应字重)",
|
||
"delivery": "编译 Lucide 子集为 iconfont(.ttf/.woff2)，小程序用 <text class='fc-icon'> 引用；或用 base64 SVG <image>。禁止 emoji。"
|
||
},
|
||
|
||
"density": {
|
||
"register": "product",
|
||
"accent_per_screen": 2,
|
||
"touch_target_min": "44px (88rpx)",
|
||
"safe_area": "env(safe-area-inset-bottom)"
|
||
}
|
||
}
|