设计令牌
设计令牌就是把颜色、字号、间距、圆角、投影、动效写成一份数据，所有端从这一份数据取值。改一处，网页、H5、小程序、后台同步更新，不会出现「这个页面的红和那个页面不一样」。
tokens.json（唯一数据源）经 build.mjs 自动生成六种产物：
tokens.css：网页 CSS 变量_tokens.scss：SCSS 变量vant-theme.js / .css：H5（Vant 4）主题element-plus-theme.css：后台（Element Plus）主题tokens.wxss：微信小程序tailwind-preset.cjs：Tailwind 预设
怎么引入
| 端 | 引入方式 |
|---|---|
| 普通网页 | import '@jiaoshanshi/tokens/css'，然后用 var(--jss-color-red-500) |
| SCSS 项目 | @use '@jiaoshanshi/tokens/scss' as *;，然后用 $jss-color-red-500 |
| Vant 4（H5） | <van-config-provider :theme-vars="vantTheme">，import { vantTheme } from '@jiaoshanshi/tokens/vant' |
| Element Plus（后台） | import '@jiaoshanshi/tokens/element-plus'，放在 Element Plus 样式之后 |
| 微信小程序 | 把 tokens.wxss 放进项目，在 app.wxss 里 @import "tokens.wxss"; |
| Tailwind | presets: [require('@jiaoshanshi/tokens/tailwind')] |
| JS 取值 | import { flat, palette } from '@jiaoshanshi/tokens' |
还没有接入私有 npm 时，可以直接在下载中心 · 开发下载打包好的文件。
颜色
标准色与色阶
500 是标准色本身。50～400 是加白变浅，600～900 是加深（暖米白加深时混深酱棕，保持暖调）。只能从色阶里取值，不得另调新色。
暖米白
cream阿胶枣红
red金汤金
gold深酱棕
brown语义色
页面开发优先用语义变量，不直接写色阶。这样以后换肤只改映射。
| 变量 | 取值 | 用途 |
|---|---|---|
--jss-color-bg-page | cream.500 #F7EEDF | 页面底色 |
--jss-color-bg-surface | #FFFBF4 | 卡片、弹窗底色 |
--jss-color-bg-sunken | cream.600 | 凹陷区、分组底 |
--jss-color-text-primary | brown.500 #412011 | 正文 |
--jss-color-text-secondary | brown.400 | 次要文字 |
--jss-color-text-brand | red.500 #95190D | 品牌字、标题强调 |
--jss-color-text-on-brand | cream.500 | 枣红底上的文字 |
--jss-color-action-primary | red.500 | 主按钮 |
--jss-color-action-secondary | gold.500 #D09137 | 次按钮（金色底，字用深酱棕） |
--jss-color-price | red.500 | 价格 |
--jss-color-border | brown.100 | 分割线、边框 |
--jss-color-line-gold | gold.500 | 金色装饰线 |
状态色
宪章不允许蓝、绿、紫，所以状态色全部由四色派生。为了不靠颜色区分（长辈和色弱用户分不清相近的颜色），每种状态都必须同时有图标和文字，组件已内置。
| 状态 | 文字色 | 底色 | 图标 | 例子 |
|---|---|---|---|---|
| 错误 | red.500 | red.50 | 叉号 | 手机号格式不对 |
| 警告 | gold.800 | gold.50 | 感叹号 | 优惠券今天到期 |
| 成功 | brown.500 | cream.600 | 对勾 | 预约成功 |
| 提示 | brown.400 | cream.400 | 圆圈 i | 结果供健康参考 |
状态提示
字体与字号
| 变量 | 值 | 用途 |
|---|---|---|
--jss-font-serif | 思源宋体 / Noto Serif SC | 标题 |
--jss-font-sans | 思源黑体 / Noto Sans SC / 苹方 | 正文 |
--jss-font-size-caption | 14px | 辅助说明（最小，不能更小） |
--jss-font-size-body | 16px | 正文 |
--jss-font-size-body-lg | 18px | 长辈模式正文、重点说明 |
--jss-font-size-title-sm | 20px | 卡片标题 |
--jss-font-size-title | 24px | 页面标题 |
--jss-font-size-title-lg | 28px | 大标题 |
--jss-font-size-display | 36px | 首屏口号 |
--jss-font-size-price | 22px | 价格 |
--jss-font-size-price-lg | 32px | 详情页主价格 |
小程序版本自动换算为 rpx（×2）。网页字体用 @jiaoshanshi/ui/src/fonts.css 引入，已经按字符分片，只下载页面用到的字。
间距、圆角、投影、动效
| 类别 | 取值 |
|---|---|
| 间距 | 4 的倍数：0 / 4 / 8 / 12 / 16 / 20 / 24 / 32 / 40 / 48 / 64 |
| 圆角 | sm 4 / md 8 / lg 12 / xl 16；拱门形状用 arch |
| 投影 | 光源统一来自左上方，投影偏右下，用深酱棕而不是纯黑：sm md lg 三档 |
| 动效 | fast 150ms / normal 240ms / slow 400ms；热气类动效用 steam 缓动 |
对比度自动检查
tokens.json 里登记了所有「文字色 + 背景色」配对，站点构建时自动计算对比度，正文低于 4.5 : 1、大字低于 3 : 1 就构建失败。新增配色时先在 色彩对比检查 里试一下。
停用色
#FBF6EC、#D9A441、#7A2E22 已停用，登记在 tokens.json 的 deprecated 里，色彩检查工具输入这几个值会直接报错。