TokenTokens

唯一真相源是 @wutong/tokens 的 tokens.json；CSS 变量、Tailwind 映射、SwiftUI / Compose / 小程序文件都从它生成。色块从左到右：梧桐蓝 · 默认 · 梧桐蓝 · 暗色 · 墨黑 · 墨黑 · 暗色 · 石板青 · 梧桐品牌 · 石板青 · 暗色。

颜色

--background#f3f4f3
页底。整页的浅灰地，主面板浮在它上面。层次靠它与 card 的明度差，不靠边框。暗色不用纯黑（OLED 拖影）。

--card#ffffff
主面板、卡片、侧栏选中态的白块、弹层。放在 background 上，圆角 radius-md。

--popover= {card}
下拉、气泡、命令面板的底。card 的别名，配 shadow-overlay。

--muted#f9f9f8
内嵌的次级区域：表头行、代码块底、已选表格行、统计分组的底。比 card 只低一点。

--secondary#eeeeed
次级按钮与筛选芯片的底，文字用 secondary-foreground。

--accent#e8e8e7
hover 与键盘高亮的底（菜单项、表格行、侧栏项）。文字用 accent-foreground。

--foreground#1a1c1c
一级文字：正文、标题、数字。放在 background / card / muted 上。

--card-foreground= {foreground}
card 上的文字，foreground 的别名。

--muted-foreground#3d4947
二级文字：辅助信息、时间、分组小标题、指标后缀。放在 background / card / muted 上，≥4.5:1。

--subtle#6d7a77
三级文字：占位符、禁用态、表头大写小字、装饰性标注。对比约 2.7:1，故只能承载不必读的信息——必读内容一律用 muted-foreground。

--secondary-foreground#3d4947
secondary 底上的文字。

--accent-foreground#1a1c1c
accent 底上的文字。

--border#e2e2e2
所有分隔线、输入框描边、卡片发丝线。表格行之间不画线（靠行高与留白）。

--input= {border}
输入框默认描边，border 的别名。现场端加粗到 1.5px。

--ring= {primary}
键盘焦点环：2px 实线 + 2px 外距，primary 的别名，随主题走。

--primary#1565c0
主色。默认梧桐蓝（智算客户端同色），只出现在：主按钮、选中的复选框、底部浮动条，以及链接文字。其余一律中性。墨黑主题下是深色实心块。

--primary-foreground#ffffff
primary 实心块上的文字与图标。

--float= {primary}
底部浮动批量操作条的深色底，primary 的别名。

--on-float= {primary-foreground}
浮动条上的文字与图标。

--successhsl(150 48% 30%)
正常 / 已验收 / 完成。作文字放在 success-soft 或 card 上；作实心底时文字用 on-status。跨主题恒定。

--success-softhsl(145 48% 92%)
success 状态芯片的浅底。

--warninghsl(32 75% 36%)
超期 / 需关注 / 待确认。文字放在 warning-soft 或 card 上。跨主题恒定，所以主色不能取琥珀系。

--warning-softhsl(42 85% 90%)
warning 状态芯片的浅底。

--destructivehsl(0 62% 45%)
故障 / 失败 / 破坏性操作。危险按钮的实心底（文字用 on-status），错误块的文字色。跨主题恒定。

--destructive-softhsl(0 70% 95%)
destructive 状态芯片与页内错误块的浅底。

--infohsl(214 60% 42%)
进行中 / 已派单 / 提示。文字放在 info-soft 或 card 上。

--info-softhsl(212 72% 93%)
info 状态芯片的浅底。

--pendinghsl(220 8% 45%)
待派单 / 未开始 / 草稿。中性灰，表示还没进入流程。

--pending-softhsl(220 12% 92%)
pending 状态芯片的浅底。

--on-status#ffffff
实心状态底（危险按钮、松墨主题下的实心完成芯片）上的文字。暗色下状态色被提亮，所以文字反转成深色。

--rise= {destructive}
上涨 / 增加 / 同比正。红涨绿跌——与西方相反，凡显示增减的地方一律按此，否则管理层第一眼读反。

--fall= {success}
下跌 / 减少 / 同比负。红涨绿跌。

--chart-1hsl(191 60% 38%)
图表分类色 1（石板青）。六个分类色是六套主题主色提到同一明度，图表在任何主题下都一样。只用于图表、进度、分类标记，不染文字与背景。

--chart-2hsl(215 55% 50%)
图表分类色 2（钢蓝）。

--chart-3hsl(24 55% 48%)
图表分类色 3（赭褐）。

--chart-4hsl(265 40% 55%)
图表分类色 4（玄紫）。

--chart-5hsl(158 45% 38%)
图表分类色 5（松墨）。

--chart-6hsl(220 8% 55%)
图表分类色 6（中性灰）。「其他」「未分类」固定用它。

--chart-gridhsl(30 6% 91%)
图表网格线与坐标轴。比 border 再淡一点，退到数据后面。

--brand-gold#b8862b
品牌金。官网 / 营销层的强调色：主 CTA、eyebrow 小字、推荐标记。产品 UI 里不用（那里橙系归 warning）。

--brand-gold-2#d4a54a
品牌金的亮档，只用于 logo 渐变与主 CTA 的高光。

--brand-gold-soft#f7f0df
品牌金的浅底：徽章、高亮卡、推荐套餐的外圈。

--brand-gold-ink#6f4f12
品牌金浅底上的文字。

--brand-navy#0b1929
品牌藏青。深色带（知库、数据大屏）的底，与 logo 藏青同源；登录 / 次 CTA 的实心按钮。

--brand-navy-2#12243a
藏青带里的卡片底。

--brand-navy-text#dde6ef
藏青带上的正文。

--brand-navy-muted#8aa0b4
藏青带上的辅助文字。

--brand-cyan#6edcca
藏青带上唯一的亮色：eyebrow、HUD 数字、青色 CTA。只在深色带里出现。

--brand-paper#f7f7f5
官网页底：比产品的 background 更暖、更浅。

--brand-ink#171c26
官网正文，偏蓝的墨色。

--brand-ink-2#3b4353
官网二级文字（lede、说明）。

--brand-muted#6c7484
官网三级文字（meta、表头）。

--brand-line#e4e6ea
官网分隔线与卡片边（营销层卡片画 1px 实线边，不用发丝线阴影）。

--brand-line-2#cdd2da
官网输入框与次级按钮的描边，比 line 深一档。

字阶

桌面端

办公室坐着看的尺寸：管理层看报表、交付人员配系统。一律系统字体栈，不加载 web font。数字 tabular-nums。

.title · 26px/32px · 700华东风场运维页面主标题。每页只有一个。

.heading · 19px/26px · 700巡检工单区块标题。

.body · 14px/22px · 4003 号机组齿轮箱月度巡检，听声音判断是轴承内圈剥落。基准正文。桌面 14px 是办公室坐着看的尺寸，现场端不能用它。

.input · 15px/22px · 5003 号机组齿轮箱输入框里的值。

.label · 13px/18px · 500风速（m/s）表单标签、表格里的主字段。

.meta · 12px/16px · 4002026-09-11 14:32 · 张建国辅助信息：时间、责任人、分组小标题。颜色 muted-foreground。

.chip · 12.5px/16px · 700已验收状态芯片文字，配 4px 圆角浅底。

.th · 11px/16px · 600工单号表头：全大写英文 / 小号中文，颜色 subtle，字间距拉开，让表头退到内容后面。

.metric · 28px/32px · 600156指标大数字。等宽数字，后缀（%、天、正常）用 meta 跟在旁边。

.code · 13px/20px · 400WO-20941工单号、设备编号、代码块。mono 族。

现场端

塔筒下、车间里、阳光下戴手套用的尺寸。视觉语言与桌面端共用，字号与灰度不共用。

.f-title · 28px/35px · 700华东风场现场端页面主标题。

.f-heading · 21px/30px · 700今日待办现场端区块标题。

.f-body · 17px/27px · 4003 号机组齿轮箱月度巡检现场端基准正文。戴手套、强光、50 岁以上的下限，不要再小。

.f-body-large · 20px/32px · 4003 号机组齿轮箱月度巡检大字模式正文。应用内一键切换，不依赖系统缩放。

.f-input · 17px/24px · 5003 号机组齿轮箱现场端输入值，输入框高 48px。

.f-label · 15px/20px · 500风速（m/s）现场端表单标签。

.f-meta · 13.5px/20px · 4002026-09-11 14:32 · 张建国现场端辅助信息。颜色 muted-foreground，对比 ≥4.5:1。

.f-chip · 12.5px/16px · 700已验收现场端状态芯片，与桌面同尺寸，但必须带图标。

营销层（官网）

只用于官网与营销页。允许加载 Google Fonts（Noto Serif SC / Noto Sans SC / JetBrains Mono）——办公室里看的页面，不是现场。产品 UI 仍然禁止 web font。

.m-display · 52px/58px · 900产业决策 AI 工作台首屏主标题，衬线 900。小屏 clamp 到 32。

.m-display-en · 36px/41px · 500from knowledge to reports.主标题下的英文副题，mono。

.m-h2 · 28px/36px · 600从资料到报告，每一步都有数字区块标题（无衬线，衬线只给首屏）。

.m-h3 · 20px/26px · 600几十份政策，问什么答什么卡片标题。

.m-lede · 16px/27px · 400每个场景都是客户端里跑过的真实流程区块引言，颜色 brand-ink-2，行长 60ch。

.m-body · 15px/25px · 400面向工程咨询与产业决策官网正文 15，比产品的 14 大一号。

.m-eyebrow · 11px/11px · 500WUTONG AI · MAIN SITE区块上方的小字标签，全大写 mono，brand-gold；深色带里用 brand-cyan。

.m-stat · 32px/32px · 7002,859数据条大数字，mono 等宽。

.m-stat-sm · 22px/22px · 60060+首屏统计行的数字。

.m-tag · 11px/16px · 500AGENTmono 小标签，4px 圆角，brand-gold-soft 底。状态语义仍用产品的状态五色。

.m-chip · 11px/16px · 400政策法规描边 chip，6px 圆角，brand-line-2 边；点亮态换 brand-gold 边 + soft 底。

间距

--space-1 · 4px微调：图标与文字之间、芯片内的图标间距。

--space-2 · 8px紧凑：芯片左右内边距、按钮内图标间距、指标与后缀之间。

--space-3 · 12px按钮左右内边距、表格单元格内边距、侧栏项内边距。

--space-4 · 16px标准：页面边距、卡片内边距、表单控件间。

--space-5 · 20px表单字段之间。

--space-6 · 24px区块之间、弹窗内边距。

--space-8 · 32px大区块分隔、页面顶部到标题。

--space-12 · 48px空状态与引导页的大留白。

--space-16 · 64px官网区块上边距。

圆角

radius-chip 4px

radius-sm 6px

radius-md 8px

radius-lg 12px

radius-m-btn 10px

radius-m-card 14px

radius-m-app 16px

阴影

shadow-hairline

shadow-raised

shadow-overlay

shadow-float

尺寸与层级

token	值	用途
control-xs	24px	表格行内的小按钮、芯片旁的图标按钮。字 12、图标 12、内距 8、radius-sm。
control-sm	32px	工具行、次要操作、菜单项、侧栏项。字 13、图标 14、内距 10、radius-sm。
control-md	36px	桌面默认：按钮、输入框、选择器。字 13（按钮）/ 15（输入）、图标 14、内距 12、radius-md。
control-lg	40px	页面级主按钮、办公型移动端。字 14、图标 16、内距 14、radius-md。
control-xl	48px	现场端输入框、办公型移动端主按钮。字 17、图标 18、内距 16、radius-md。
control-field	56px	现场端按钮与触控下限（戴手套）。字 17、图标 20、内距 24、radius-md、通宽。
tap-min	44px	办公型移动端触控下限（HIG / Material）。现场型用 control-field。
row-desk	44px	桌面端表格行高。
row-field	64px	现场端列表行高，整行可点。
chip	22px	状态芯片高度。
icon-xs	14px	芯片内图标。
icon-sm	16px	表格、菜单、输入框内图标。
icon-md	20px	按钮、导航图标（默认）。
icon-lg	24px	空状态、移动端 tab 图标。
sidebar	224px	桌面端侧栏宽度。
topbar	48px	桌面端顶栏高度。
panel	480px	侧滑详情面板宽度。
dialog	400px	确认框宽度；表单弹窗 520。
content-max	1280px	内容区最大宽度，超出居中留白。
nav-m	62px	官网顶部导航高度。
content-max-m	1140px	官网内容区最大宽（产品是 1280）。
z-dropdown	10	下拉菜单、气泡、tooltip。
z-sticky	20	吸顶表头、吸顶离线条。
z-float	30	底部浮动操作条、轻提示。
z-overlay	40	侧滑面板、底部抽屉及其遮罩。
z-dialog	50	确认框、进度面板。最高层，之上不再有东西。