Tokens
SmoUI Tokens
Token 是生成稳定界面的约束，不是装饰素材。SmoUI 先承载全局语义 token，再按产品沉淀已经在真实项目里校准过的专属 token。
语义色
Brand
主品牌色
--smo-brand主操作、关键状态、品牌识别。
Warm
暖色强调
--smo-brand-warm转化提示、辅助强调、轻量高亮。
Foreground
主文字
--smo-foreground标题、关键字段、表格主列。
Muted
辅助文字
--smo-muted描述、元信息、次级标签。
Surface
内容表面
--smo-surface文档正文、预览容器、轻量面板。
Success
成功状态
--smo-success完成、通过、可用状态。
Warning
警示状态
--smo-warning待确认、受限、需要关注。
Danger
危险状态
--smo-danger删除、停用、不可逆操作。
产品 Tokens
每个产品独立沉淀，不互相套用。只有经过真实页面和运行环境校准的项目才标记为已校准；其它产品保持待沉淀。
SmoFan 小程序
项目全局文字规范
已从 SmoFan 小程序首轮原型和微信开发者工具校准，沉淀为项目全局文字层级，不绑定单个页面、组件或业务字段。
SmoMark
待沉淀
等待真实页面校准后再沉淀增长计划、报名、核销和复盘分析相关 token。
SmoLink
待沉淀
等待客户端入口、轻量任务面板和应用级体验完成校准后再沉淀。
SmoArch
待沉淀
等待平台底座、身份、权限、支付、审计等控制台场景完成校准后再沉淀。
smolink-online
待沉淀
等待云端控制台、模块开通、套餐和工作区页面完成校准后再沉淀。
SmoFan / 项目全局文字规范
这是当前唯一已校准的产品 token 分区：数值来自 SmoFan 小程序首轮原型和微信开发者工具校准，但命名按项目全局视觉层级沉淀，不绑定某个页面、功能、组件或业务字段。 下方样张只展示层级效果，不代表昵称、活动名、券码等字段必须固定使用某个 token。
SmoFan · 项目全局 / typography
SmoFan 小程序首轮原型与微信开发者工具校准，已抽象为层级规范
smoFan.type.displaysmoFan.type.titleLgsmoFan.type.titleMdsmoFan.type.labelTightsmoFan.type.titleMdRegularsmoFan.type.bodysmoFan.type.metasmoFan.type.captionsmoFan.type.badgesmoFan.type.actionSmsmoFan.type.actionMdQuietsmoFan.type.actionLgsmoFan.type.numberXlsmoFan.type.numberMd| Token | 角色 | 层级样张 | 字号 / 行高 | 字重 | 可映射场景 |
|---|---|---|---|---|---|
smoFan.type.display | 一级标题 | 一级标题样张 | 42rpx / 52rpx | 900 | 可映射场景：任何业务字段在当前页面承担首屏主对象或最高视觉层级时使用；如果只是列表字段或说明文字，应降级到对应层级。 |
smoFan.type.titleLg | 模块标题 | 模块标题样张 | 34rpx / 42rpx | 700 | 可映射场景：页面模块、卡组标题、重要分区名和同级结构标题；不承担首屏主对象时不使用 900。 |
smoFan.type.titleMd | 条目标题 | 条目标题样张 | 30rpx / 38rpx | 600 | 可映射场景：列表条目、记录标题、紧凑卡片标题和次一级内容标题。 |
smoFan.type.labelTight | 紧凑组件眉题 | 近期互动 | 26rpx / 26rpx | 500 | 可映射场景：高度受限卡片中的模块眉题；用于建立层级锚点，不作为普通段落正文。 |
smoFan.type.titleMdRegular | 常规卡片标题 | 春日咖啡券免费送 | 30rpx / 36rpx | 400 | 可映射场景：同时并列图片、状态和操作的信息密集卡片；标准 titleMd / 600 在 Skyline 中视觉过重时使用。 |
smoFan.type.body | 正文说明 | 正文说明样张 | 26rpx / 34rpx | 400 | 可映射场景：普通说明、参与说明、规则正文和承载信息解释的文本。 |
smoFan.type.meta | 来源元信息 | 元信息样张 | 24-26rpx / 34rpx | 500 | 可映射场景：来源、归属、时间、上下文和其它低层级元信息。 |
smoFan.type.caption | 辅助摘要 | 辅助说明样张 | 24rpx / 30rpx | 400 | 可映射场景：灰色摘要、副标题、补充说明和低优先级状态解释。 |
smoFan.type.badge | 状态标签 | 到店可用 | 22-24rpx / 38rpx | 500 | 可映射场景：状态胶囊、可用状态、参与状态和其它短标签。 |
smoFan.type.actionSm | 紧凑操作 | 出示券码 | 24rpx / 58rpx | 500 | 可映射场景：票券、列表和卡片里的小胶囊操作按钮。 |
smoFan.type.actionMdQuiet | 中型轻操作 | 查看结果 | 26rpx / 30rpx | 500 | 可映射场景：卡片右侧的中型文字操作；需要清晰可见但不与主标题争夺层级。 |
smoFan.type.actionLg | 主操作 | 马上参与 | 32rpx / 76rpx | 700 | 可映射场景：页面底部主 CTA、主按钮和强转化入口；极少数需要更强压迫感时可升到 800，不使用 900。 |
smoFan.type.numberXl | 主数字 | 2 | 128rpx / 124rpx | 900 | 可映射场景：页面首要统计数字、强视觉指标和独立展示的核心数值。 |
smoFan.type.numberMd | 普通数字 | 5 | 32rpx / 34rpx | 700 | 可映射场景：统计组里的次级数字、内联强调数值和普通计数。 |
SmoFan 文字规则
项目全局，不按字段命名
这套文字规范属于 SmoFan 小程序项目全局，token 按视觉层级命名，不按微信昵称、活动名、券码标题这类业务字段命名。
页面变化时按层级复用
如果页面功能变化，先判断新内容在当前页面承担的视觉层级；只有出现无法覆盖的新层级时，才扩展 SmoFan 全局 token。
900 只给少数最高层级
900 只用于首屏主对象、页面级主标题和少数核心数字。模块标题、卡片标题、列表标题、标签和普通按钮不得默认使用 900。
小程序端只使用稳定字重
SmoFan 小程序端字重只落到 400 / 500 / 600 / 700 / 800 / 900，避免 650 / 760 / 850 / 930 / 950 这类在微信环境里表现不稳定的档位。
按设计稿逻辑宽度换算 rpx
统一使用 rpx = 设计稿 px × 750 ÷ 设计稿逻辑宽度。390px 设计稿约乘1.923，禁止默认乘2；取整后必须重新核算组件总宽度。
先做空间预算再确定字号
横向组件先扣除内边距、固定图片区、操作区和列间距，再验证最长标题、状态、摘要和箭头。不能把列宽不足误判为字号过大，也不能通过裁切标题换取对齐。
Skyline 默认使用 Flex 安全骨架
Grid-like 轨道只表达结构。grid-template-columns 必须经过目标 Skyline 版本独立截图验证；未验证时使用固定区 flex:none、信息区 flex:1 和 min-width:0 的 Flex 等价实现。
字体按真实渲染重量校准
设计工具与微信端相同字号和字重不保证视觉一致。出现偏重时先检查字体 fallback、字号换算、行高、背景对比和文字阴影，再调整字重。
标题从 700 和 600 起步
模块标题默认 700，卡片标题和列表标题默认 600；只有当前标题承担页面主对象时，才升级到 900。
按钮文字跟随按钮尺寸
小胶囊按钮使用 24rpx/500，中型按钮使用 28rpx/600，页面主 CTA 使用 32rpx/700；只有极少数强转化按钮可升到 800，不使用 900。
辅助文字先降字重，再降字号
SmoFan 的灰色摘要、来源和状态说明优先使用 400-500 字重。只有仍然抢视觉时，才把字号降到 22-24rpx。
不使用负字距和视口字号
SmoFan 小程序文字默认 letter-spacing 为 0，不使用 viewport 动态缩放字号；固定格式控件通过容器约束保证不溢出。
使用规则
| 变量 | 值 | 规则 |
|---|---|---|
--smo-brand | rgb(255 49 90) | 主操作、关键状态、品牌识别。 |
--smo-brand-warm | rgb(255 95 75) | 转化提示、辅助强调、轻量高亮。 |
--smo-foreground | rgb(22 18 15) | 标题、关键字段、表格主列。 |
--smo-muted | rgb(124 113 104) | 描述、元信息、次级标签。 |
--smo-surface | rgb(255 253 249) | 文档正文、预览容器、轻量面板。 |
--smo-success | rgb(40 184 90) | 完成、通过、可用状态。 |
--smo-warning | rgb(255 159 46) | 待确认、受限、需要关注。 |
--smo-danger | rgb(255 49 90) | 删除、停用、不可逆操作。 |
主操作只使用 Brand，不为单个页面临时发明新主色。
危险状态必须使用 Danger，并配合文案说明影响范围。
行业色只用于行业识别，不替代成功、警示、危险等功能色。
高密度后台页面优先保持白底、浅灰边框和克制强调。