梧桐设计语言一句话
像一本印得很好的台账，而不是一个 SaaS 落地页。 方一点、灰一点、字小一点（桌面端）、留白多一点；数字对齐、状态一眼能读；没有渐变、没有胶囊、没有 emoji、没有为了好看而存在的东西。
下面这一屏就是全部：一个风电运维的工单台账。十条结构规则都在里面，可以点、可以选、可以换主题（右上角）。
巡检工单
8 条超期| 工单号 | 设备 | 负责人 | 更新 | 状态 | |
|---|---|---|---|---|---|
| WO-20941 | 3 号机组 · 齿轮箱月度巡检 | 张张建国 | 今天 14:32 | 已验收 | |
| WO-20938 | 7 号机组 · 偏航系统故障报修 | 李李伟 | 昨天 09:15 | 故障 | |
| WO-20935 | 12 号机组 · 叶片季度检修 | 未指派 | 昨天 16:40 | 待派单 | |
| WO-20931 | 5 号机组 · 变桨系统月度巡检 | 王王强 | 3 天前 | 超期 2 天 | |
| WO-20927 | 1 号升压站 · 主变专项检查 | 陈陈海涛 | 3 天前 | 进行中 |
十条结构规则
与配色无关，六套主题、四端共用。改掉任何一条，就不再是这套语言。
- 01浅灰页底 + 纯白面板
层次靠明度差，不靠边框和阴影。面板用发丝线 ring，不画 border。
- 02主色只出现在三处
主按钮、选中的复选框、底部浮动条（链接文字可用主色）。其余一律中性。
- 03侧栏选中态是白块浮起来
card 底 + 一点点阴影。不用彩色底，不用左侧色条。
- 04分组小标题小号浅灰
「现场」「知识」这种两三个字，不加粗、不拉间距、不全大写。
- 05指标 = 大数字 + 小后缀
数字等宽；「%」「天」「正常」小一号灰色跟在旁边。
- 06两种极简 sparkline
趋势用细折线带端点；分布用竖刻度带指针。无面积、无坐标轴。
- 07表头退到内容后面
小号、浅灰、拉开字距，可排序列带小箭头。
- 08状态用浅底同色深字的 pill
4px 圆角、必须带图标。不用胶囊、不描边。
- 09行间不画线
靠行高和留白；选中行浅灰底；首字圆头像做锚点。
- 10批量操作浮在底部中央
深色圆角条，左侧关闭键，右侧图标动作。不占页面空间。
颜色
四层表面、三级文字、一个主色、五个状态。文字不裸放在页底上，内容都要有面板。
foreground — 必读：3 号机组齿轮箱月度巡检
muted-foreground — 辅助：2026-09-11 14:32 · 张建国
subtle — 不必读：表头 · 占位 · 禁用
状态语义在工业场景里已经被占死：绿 = 正常、琥珀 = 超期、红 = 故障。某个主题改了，同班组的人换个应用就要重学——所以主题只改主色和中性灰的色温，状态五色不变。推论：主色不能取琥珀 / 橙系。营销物料继续用梧桐的琥珀与藏青，产品 UI 里橙色归警告。
暗色不是锦上添花——夜班巡检必须有。底色不用纯黑（OLED 拖影），状态色提亮一档，主色反转为浅色。完整 token 与实测对比度见「色彩」。
字体
一律系统字体栈，不加载任何 web font：中文字体动辄几 MB，弱网下加载失败整页无字。层级靠字号和字重拉开，不靠颜色；数字一律等宽，台账列才对得齐。
两套尺寸：桌面端（上面这套）给办公室里坐着的人；现场端正文 17、触控 56，给塔筒下戴手套、阳光下反光、50 岁以上的人。视觉语言共用，字号和灰度不共用。 完整字阶见「字体」。
形状、边线与阴影
圆角要方一点：胶囊、大圆角、渐变都是消费级观感，工程用户不信任。唯一的圆形是头像与「在想」的呼吸点。卡片不画 border，用 1px 发丝线 ring 打底，需要浮起时叠很淡的多层投影——从不用单层重阴影。
间距基数 4：4 微调、8 紧凑、12 按钮内距、16 页边距与卡片内距、20 表单字段间、24 区块间、32 大区块。需要 6 / 10 / 14 / 18 说明布局没对齐网格。
动效
慢而少。100ms 按压、180ms hover 与展开、240ms 弹层进出，曲线 cubic-bezier(.16, 1, .3, 1)，默认不回弹——一个淡入的菜单弹一下是廉价感的主要来源。超过 40 秒的任务必须分阶段展示，不能只给转圈。尊重 prefers-reduced-motion。
图标
线性单色、24 网格、1.5 描边、跟随文字色。105 个按语义命名（delete 不叫 trash），一个源生成 Web / iOS / Android / 小程序四端产物——三个平台各有原生图标库，但我们不用，混在一起一眼看出。不用 emoji。
文案
写给屏幕另一侧的人。按钮写具体动词带数量，确认框说清后果，错误说清怎么办。「操作失败，请稍后重试」等于什么都没说。
删除这 3 条工单？
工单本身、现场照片和处理记录会被永久删除，无法恢复。其中 1 条已沉淀到经验库的处理经验会保留。
标题是问句带数量 · 正文说清什么没了什么留着 · 按钮是动词带数量、危险色
提示
您确定要执行此操作吗？
标题没信息 · 正文没后果 · 按钮没动词 · 破坏性操作用了主色
错误文案三段式：什么失败了 → 为什么 → 怎么办。失败不用轻提示（会消失，读不完只能再试）；成功用轻提示带撤销，比弹确认框少一次打断。
明确禁止
怎么读这份规范
- 设计原则：五条，每条带反例，评审时对照它们而不是「好不好看」
- 色彩 · 字体 · 布局 · 图标系统：完整表格与实测数据
- 主题与换肤 · 浮层与反馈 · 页面模式 · AI 原生界面：按场景查
- 快速开始 · 多端接入 · 交付与协作：怎么装、怎么用、怎么改
- 组件：37 个，每个带可切主题的 demo、源码与 API