264 lines
19 KiB
JSON
264 lines
19 KiB
JSON
{
|
||
"schemaVersion": 2,
|
||
"generatedAt": "2026-07-22T14:59:56+08:00",
|
||
"title": "Design System: CaiWuXiTong",
|
||
"extensions": {
|
||
"colorMeta": {
|
||
"rail-black": {
|
||
"role": "neutral",
|
||
"displayName": "工具轨道黑",
|
||
"canonical": "#050506",
|
||
"tonalRamp": ["#050506", "#101011", "#1D1D1F", "#2A2927", "#424242", "#7B7B7B", "#D0D0D0", "#F6F6F6"]
|
||
},
|
||
"rail-gold": {
|
||
"role": "primary",
|
||
"displayName": "工具轨道浅金",
|
||
"canonical": "#F2E7C5",
|
||
"tonalRamp": ["#513E21", "#6A5129", "#856632", "#A17D3E", "#B9954F", "#E1CF9D", "#F0E4BF", "#F2E7C5"]
|
||
},
|
||
"sidebar-black": {
|
||
"role": "neutral",
|
||
"displayName": "功能栏浅黑",
|
||
"canonical": "#1D1D1F",
|
||
"tonalRamp": ["#050506", "#101011", "#1D1D1F", "#2A2927", "#424242", "#7B7B7B", "#D0D0D0", "#F6F6F6"]
|
||
},
|
||
"sidebar-gold": {
|
||
"role": "primary",
|
||
"displayName": "功能栏米白金",
|
||
"canonical": "#F0E4BF",
|
||
"tonalRamp": ["#513E21", "#6A5129", "#856632", "#A17D3E", "#B9954F", "#DDD0AA", "#F0E4BF", "#F7F0DE"]
|
||
},
|
||
"sidebar-gold-soft": {
|
||
"role": "primary",
|
||
"displayName": "功能栏柔金",
|
||
"canonical": "#DDD0AA",
|
||
"tonalRamp": ["#513E21", "#6A5129", "#856632", "#A17D3E", "#B9954F", "#CDB474", "#DDD0AA", "#F7F0DE"]
|
||
},
|
||
"sidebar-active": {
|
||
"role": "neutral",
|
||
"displayName": "活动浅黑",
|
||
"canonical": "#2A2927",
|
||
"tonalRamp": ["#050506", "#101011", "#1D1D1F", "#2A2927", "#424242", "#7B7B7B", "#D0D0D0", "#F6F6F6"]
|
||
},
|
||
"content-bg": {
|
||
"role": "neutral",
|
||
"displayName": "内容浅灰",
|
||
"canonical": "#F8F6F1",
|
||
"tonalRamp": ["#171717", "#2A2927", "#595959", "#8C887F", "#BDB7AB", "#D8D2C7", "#EEE9DF", "#F8F6F1"]
|
||
},
|
||
"surface": {
|
||
"role": "neutral",
|
||
"displayName": "业务白色表面",
|
||
"canonical": "#FFFFFF",
|
||
"tonalRamp": ["#171717", "#424242", "#7D7D7D", "#AFAFAF", "#D8D2C7", "#EEE9DF", "#F8F6F1", "#FFFFFF"]
|
||
},
|
||
"content-ink": {
|
||
"role": "neutral",
|
||
"displayName": "正文墨色",
|
||
"canonical": "#171717",
|
||
"tonalRamp": ["#171717", "#2A2927", "#424242", "#595959", "#7D7D7D", "#AFAFAF", "#D8D2C7", "#F8F6F1"]
|
||
},
|
||
"content-muted": {
|
||
"role": "neutral",
|
||
"displayName": "辅助墨色",
|
||
"canonical": "#595959",
|
||
"tonalRamp": ["#171717", "#2A2927", "#424242", "#595959", "#7D7D7D", "#AFAFAF", "#D8D2C7", "#F8F6F1"]
|
||
},
|
||
"content-accent": {
|
||
"role": "primary",
|
||
"displayName": "VIP 金",
|
||
"canonical": "#B9954F",
|
||
"tonalRamp": ["#513E21", "#6A5129", "#856632", "#A17D3E", "#B9954F", "#E1CF9D", "#F7F0DE", "#FBF8F1"]
|
||
},
|
||
"content-accent-soft": {
|
||
"role": "primary",
|
||
"displayName": "淡金底色",
|
||
"canonical": "#F7F0DE",
|
||
"tonalRamp": ["#513E21", "#6A5129", "#856632", "#A17D3E", "#B9954F", "#E1CF9D", "#F7F0DE", "#FBF8F1"]
|
||
},
|
||
"content-accent-dark": {
|
||
"role": "primary",
|
||
"displayName": "可读深金",
|
||
"canonical": "#856632",
|
||
"tonalRamp": ["#513E21", "#6A5129", "#856632", "#A17D3E", "#B9954F", "#E1CF9D", "#F7F0DE", "#FBF8F1"]
|
||
},
|
||
"border": {
|
||
"role": "neutral",
|
||
"displayName": "暖灰边界",
|
||
"canonical": "#D8D2C7",
|
||
"tonalRamp": ["#2A2927", "#595959", "#8C887F", "#AFA99E", "#BDB7AB", "#D8D2C7", "#EEE9DF", "#F8F6F1"]
|
||
},
|
||
"success": {
|
||
"role": "semantic",
|
||
"displayName": "成功深绿",
|
||
"canonical": "#53793E",
|
||
"tonalRamp": ["#364F28", "#426131", "#53793E", "#63914A", "#6EA152", "#9ABD86", "#DBE8D4", "#F8FAF6"]
|
||
},
|
||
"danger": {
|
||
"role": "semantic",
|
||
"displayName": "危险深红",
|
||
"canonical": "#B80000",
|
||
"tonalRamp": ["#640000", "#7A0000", "#990000", "#B80000", "#CC0000", "#DB4D4D", "#F2BFBF", "#FCF2F2"]
|
||
},
|
||
"warning": {
|
||
"role": "semantic",
|
||
"displayName": "警告深橙",
|
||
"canonical": "#935F07",
|
||
"tonalRamp": ["#784D05", "#935F07", "#B87708", "#DD8E0A", "#F59E0B", "#F8BB54", "#FDE7C2", "#FFFAF3"]
|
||
},
|
||
"info": {
|
||
"role": "semantic",
|
||
"displayName": "信息深蓝",
|
||
"canonical": "#006395",
|
||
"tonalRamp": ["#003651", "#004264", "#00537D", "#006395", "#006EA6", "#4D9AC1", "#BFDBE9", "#F2F8FB"]
|
||
}
|
||
},
|
||
"typographyMeta": {
|
||
"title": {
|
||
"displayName": "页面标题",
|
||
"purpose": "右侧页面标题，固定 14px，不随视口流体缩放。"
|
||
},
|
||
"body": {
|
||
"displayName": "业务正文",
|
||
"purpose": "表单、说明、按钮和常规业务文字。"
|
||
},
|
||
"label": {
|
||
"displayName": "字段与导航标签",
|
||
"purpose": "筛选字段、状态标签和一、二级菜单，固定 12px。"
|
||
},
|
||
"data": {
|
||
"displayName": "表格与金额数据",
|
||
"purpose": "表格、金额、数量和比例，使用等宽数字并按数据类型对齐。"
|
||
}
|
||
},
|
||
"shadows": [
|
||
{
|
||
"name": "surface-low",
|
||
"value": "0 1px 2px rgba(16, 24, 40, 0.04)",
|
||
"purpose": "需要从内容底色中轻微抬起的单层面板。"
|
||
},
|
||
{
|
||
"name": "floating",
|
||
"value": "0 4px 8px rgba(23, 23, 23, 0.10)",
|
||
"purpose": "下拉框、悬浮菜单和模态浮层。"
|
||
},
|
||
{
|
||
"name": "focus-ring",
|
||
"value": "0 0 0 3px rgba(133, 102, 50, 0.20)",
|
||
"purpose": "键盘焦点和输入聚焦反馈。"
|
||
}
|
||
],
|
||
"motion": [
|
||
{
|
||
"name": "state-fast",
|
||
"value": "150ms cubic-bezier(0.22, 1, 0.36, 1)",
|
||
"purpose": "标签、按钮、链接和菜单的即时状态变化。"
|
||
},
|
||
{
|
||
"name": "panel-standard",
|
||
"value": "200ms cubic-bezier(0.22, 1, 0.36, 1)",
|
||
"purpose": "侧栏折叠、下拉框和局部面板变化。"
|
||
}
|
||
],
|
||
"breakpoints": [
|
||
{ "name": "sm", "value": "640px" },
|
||
{ "name": "lg", "value": "1024px" },
|
||
{ "name": "xl", "value": "1280px" }
|
||
]
|
||
},
|
||
"components": [
|
||
{
|
||
"name": "Primary Button",
|
||
"kind": "button",
|
||
"refersTo": "button-primary",
|
||
"description": "浅色内容区的主要操作，使用可读深金而不是亮金。",
|
||
"html": "<button type=\"button\" class=\"ds-btn-primary\">查询</button>",
|
||
"css": ".ds-btn-primary { height: 34px; padding: 0 14px; border: 1px solid #856632; border-radius: 8px; background: #856632; color: #fff; font: 500 13px/1.5 'JetBrains Mono', 'Microsoft YaHei', monospace; cursor: pointer; transition: background 150ms cubic-bezier(.22,1,.36,1), border-color 150ms cubic-bezier(.22,1,.36,1); } .ds-btn-primary:hover { background: #6A5129; border-color: #6A5129; } .ds-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(133,102,50,.20); } .ds-btn-primary:active { transform: translateY(1px); } .ds-btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }"
|
||
},
|
||
{
|
||
"name": "Secondary Button",
|
||
"kind": "button",
|
||
"refersTo": "button-secondary",
|
||
"description": "次要操作保持白底、暖灰边界和正文墨色。",
|
||
"html": "<button type=\"button\" class=\"ds-btn-secondary\">重置</button>",
|
||
"css": ".ds-btn-secondary { height: 34px; padding: 0 14px; border: 1px solid #D8D2C7; border-radius: 8px; background: #fff; color: #171717; font: 500 13px/1.5 'JetBrains Mono', 'Microsoft YaHei', monospace; cursor: pointer; transition: background 150ms cubic-bezier(.22,1,.36,1), border-color 150ms cubic-bezier(.22,1,.36,1); } .ds-btn-secondary:hover { border-color: #A17D3E; background: #FBF8F1; } .ds-btn-secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(133,102,50,.20); } .ds-btn-secondary:active { background: #F7F0DE; } .ds-btn-secondary:disabled { opacity: .55; cursor: not-allowed; }"
|
||
},
|
||
{
|
||
"name": "Text Field",
|
||
"kind": "input",
|
||
"refersTo": "input-default",
|
||
"description": "紧凑、清晰、具有可见标签和深金焦点状态的业务输入框。",
|
||
"html": "<label class=\"ds-field\"><span class=\"ds-field-label\">订单号</span><input class=\"ds-field-input\" type=\"text\" placeholder=\"请输入订单号\"></label>",
|
||
"css": ".ds-field { display: inline-flex; min-width: 220px; flex-direction: column; gap: 5px; color: #171717; font-family: 'JetBrains Mono', 'Microsoft YaHei', monospace; } .ds-field-label { color: #595959; font-size: 12px; font-weight: 500; line-height: 16px; } .ds-field-input { height: 34px; padding: 0 10px; border: 1px solid #D8D2C7; border-radius: 8px; background: #fff; color: #171717; font: 400 13px/1.5 inherit; outline: none; transition: border-color 150ms cubic-bezier(.22,1,.36,1), box-shadow 150ms cubic-bezier(.22,1,.36,1); } .ds-field-input::placeholder { color: #595959; } .ds-field-input:hover { border-color: #AFA99E; } .ds-field-input:focus { border-color: #856632; box-shadow: 0 0 0 3px rgba(133,102,50,.20); } .ds-field-input:disabled { background: #EEE9DF; color: #595959; cursor: not-allowed; }"
|
||
},
|
||
{
|
||
"name": "Sidebar Active Item",
|
||
"kind": "nav",
|
||
"refersTo": "sidebar-item-active",
|
||
"description": "浅黑功能栏上的单一圆形 chevron 活动状态。",
|
||
"html": "<div class=\"ds-sidebar\"><a class=\"ds-sidebar-item is-active\" href=\"#\"><svg class=\"ds-sidebar-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 4h16v16H4zM8 9h8M8 13h8M8 17h5\"/></svg><span>店铺收款账户账单</span><span class=\"ds-active-indicator\" aria-hidden=\"true\">›</span></a></div>",
|
||
"css": ".ds-sidebar { width: 224px; padding: 8px; background: #1D1D1F; } .ds-sidebar-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 4px; color: #F0E4BF; font: 500 12px/16px 'JetBrains Mono', 'Microsoft YaHei', monospace; text-decoration: none; transition: background 150ms cubic-bezier(.22,1,.36,1); } .ds-sidebar-item:hover { background: rgba(240,228,191,.10); } .ds-sidebar-item.is-active { background: #2A2927; color: #F2E7C5; } .ds-sidebar-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; } .ds-active-indicator { display: inline-flex; width: 16px; height: 16px; margin-left: auto; align-items: center; justify-content: center; border: 1px solid rgba(246,233,194,.72); border-radius: 999px; background: rgba(246,233,194,.14); color: #F6E9C2; font-size: 14px; } .ds-sidebar-item:focus-visible { outline: 2px solid #F2E7C5; outline-offset: 2px; }"
|
||
},
|
||
{
|
||
"name": "Workspace Tabs",
|
||
"kind": "nav",
|
||
"refersTo": "tab-active",
|
||
"description": "白色工作区内使用深金活动文字和单一金色下划线的局部标签切换。",
|
||
"html": "<nav class=\"ds-tabs\" aria-label=\"账户类型\"><a class=\"ds-tab is-active\" aria-current=\"page\" href=\"#\">淘系支付宝账户</a><a class=\"ds-tab\" href=\"#\">淘系微信账户</a></nav>",
|
||
"css": ".ds-tabs { display: flex; align-items: center; gap: 36px; min-height: 34px; padding: 0 32px; overflow-x: auto; border: 1px solid #D8D2C7; border-radius: 16px; background: #fff; } .ds-tab { position: relative; display: inline-flex; min-height: 34px; align-items: center; color: #595959; font: 600 14px/1.25 'JetBrains Mono', 'Microsoft YaHei', monospace; text-decoration: none; white-space: nowrap; transition: color 150ms cubic-bezier(.22,1,.36,1); } .ds-tab:hover, .ds-tab.is-active { color: #856632; } .ds-tab.is-active::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; border-radius: 999px 999px 0 0; background: #B9954F; content: ''; } .ds-tab:focus-visible { outline: 2px solid #856632; outline-offset: 3px; }"
|
||
},
|
||
{
|
||
"name": "Business Panel",
|
||
"kind": "card",
|
||
"refersTo": "panel",
|
||
"description": "使用白色表面、暖灰边界和有限圆角的单层业务容器。",
|
||
"html": "<section class=\"ds-panel\"><h2 class=\"ds-panel-title\">账单明细</h2><p class=\"ds-panel-copy\">按账户和日期范围核对交易数据。</p></section>",
|
||
"css": ".ds-panel { padding: 16px; border: 1px solid #D8D2C7; border-radius: 12px; background: #fff; color: #171717; font-family: 'JetBrains Mono', 'Microsoft YaHei', monospace; } .ds-panel-title { margin: 0; color: #171717; font-size: 14px; font-weight: 600; line-height: 1.25; } .ds-panel-copy { max-width: 70ch; margin: 8px 0 0; color: #595959; font-size: 13px; line-height: 1.5; } .ds-panel:focus-within { border-color: #856632; }"
|
||
},
|
||
{
|
||
"name": "Status Tags",
|
||
"kind": "chip",
|
||
"description": "语义颜色只表达真实业务状态，并始终带文字。",
|
||
"html": "<div class=\"ds-tags\"><span class=\"ds-tag ds-tag-success\">已核对</span><span class=\"ds-tag ds-tag-warning\">待处理</span><span class=\"ds-tag ds-tag-danger\">异常</span></div>",
|
||
"css": ".ds-tags { display: flex; gap: 8px; font-family: 'JetBrains Mono', 'Microsoft YaHei', monospace; } .ds-tag { display: inline-flex; min-height: 24px; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; } .ds-tag-success { background: #F1F6EE; color: #53793E; } .ds-tag-warning { background: #FEF5E7; color: #935F07; } .ds-tag-danger { background: #FAE6E6; color: #B80000; }"
|
||
},
|
||
{
|
||
"name": "Finance Data Table",
|
||
"kind": "custom",
|
||
"description": "紧凑、可扫描、数字右对齐的财务数据表。支持列显示/隐藏、拖动排序、恢复默认及按用户和具体表格保存；冻结多层表头，横向滚动条始终可达。导出明确筛选范围和可见列顺序，保留精度并排除密码；允许导入的业务提供模板、预览、校验及失败反馈，只读镜像不写回。",
|
||
"html": "<table class=\"ds-table\"><thead><tr><th>订单号</th><th class=\"ds-num\">收入</th><th class=\"ds-num\">余额</th></tr></thead><tbody><tr><td>20260722001</td><td class=\"ds-num ds-income\">¥1,280.00</td><td class=\"ds-num\">¥8,460.00</td></tr></tbody></table>",
|
||
"css": ".ds-table { width: 100%; border-collapse: collapse; overflow: hidden; border: 1px solid #D8D2C7; border-radius: 12px; background: #fff; color: #171717; font: 400 12.5px/1.5 'JetBrains Mono', 'Microsoft YaHei', monospace; } .ds-table th { padding: 9px 10px; border-bottom: 1px solid #D8D2C7; background: #FBF8F1; color: #595959; font-size: 12px; font-weight: 600; text-align: left; } .ds-table td { padding: 9px 10px; border-bottom: 1px solid #EEE9DF; } .ds-table tbody tr:hover { background: #F7F0DE; } .ds-table .ds-num { text-align: right; font-variant-numeric: tabular-nums; } .ds-table .ds-income { color: #B80000; font-weight: 600; }"
|
||
}
|
||
],
|
||
"narrative": {
|
||
"northStar": "黑金财务中枢",
|
||
"overview": "CaiWuXiTong 是一个需要长时间、高频率使用的财务工作台。视觉设计服务于读取、核对、筛选、审批和追踪，不服务于装饰。整体气质必须克制、专业、清晰，具有 VIP 黑金的品质感，但不能变成奢侈品海报、娱乐场所或高饱和暗黑界面。\n\n应用外壳使用“深黑工具轨道 + 浅黑功能栏 + 浅色内容区”的三层结构。黑色区域承担全局导航和功能定位，浅金色提供文字与图标的高对比识别；内容区始终保持浅色，使用深色文字和有限的金色交互信号，让大量表格、金额和状态信息稳定可读。\n\n这是唯一正式视觉标准。现存页面中的紫色、靛蓝、亮蓝硬编码属于遗留偏差，不能被新页面复制，也不能被写入新的组件。语义色只用于成功、失败、警告和信息状态，不构成第二套主题色。",
|
||
"keyCharacteristics": [
|
||
"深黑工具轨道、浅黑功能栏、浅色内容区，三层边界清楚。",
|
||
"浅金用于深色导航，深金用于浅色内容区的文字与主要操作。",
|
||
"全站使用 JetBrains Mono，标题和数据采用固定字号，不使用流体放大。",
|
||
"页面标题位于内容区右侧，保持 14px；导航使用统一的紧凑字号。",
|
||
"一、二级导航统一 12px；同一层级的图标、字号和交互状态必须一致。",
|
||
"表格、筛选器和状态反馈优先，装饰性卡片、阴影和动画受到严格限制。",
|
||
"标签切换是局部状态变化，不触发整页刷新；加载前后字号和布局不得跳变。"
|
||
],
|
||
"rules": [
|
||
{ "name": "The Task-First Rule", "body": "用户必须先看到任务和数据，再看到品牌装饰；任何视觉效果只在帮助定位、读取或确认状态时才允许存在。", "section": "overview" },
|
||
{ "name": "The Two-Gold Rule", "body": "深色背景使用浅金，浅色背景使用深金；不得把两者交换。亮金在白色上的对比度不足，只能用于非文字强调。", "section": "colors" },
|
||
{ "name": "The One-Accent Rule", "body": "金色是唯一交互强调色。任何新页面出现装饰性紫色、靛蓝、亮蓝或绿色，都视为视觉回归。", "section": "colors" },
|
||
{ "name": "The Semantic Exception Rule", "body": "红、绿、橙、蓝只在状态本身有业务含义时出现，并同时提供文字或图标，不能只依赖颜色传达结果。", "section": "colors" },
|
||
{ "name": "The Fixed-Scale Rule", "body": "产品界面使用固定 rem 字号，不使用 clamp() 放大标题；桌面与移动端通过布局重排适配，不通过夸张缩放字体适配。", "section": "typography" },
|
||
{ "name": "The Stable-First-Paint Rule", "body": "关键字号、行高和容器尺寸必须由首屏 CSS 直接提供，不能等待 JavaScript 或异步样式后再缩小，禁止首次进入时出现巨大字体闪烁。", "section": "typography" },
|
||
{ "name": "The One-Family Rule", "body": "按钮、标签、导航、表格和正文都使用同一字体家族；禁止在数据界面引入装饰性展示字体。", "section": "typography" },
|
||
{ "name": "The Flat-by-Default Rule", "body": "静态业务面板默认无阴影；若已经有 1px 边框，不得再叠加 16px 以上模糊半径的宽阴影。", "section": "elevation" },
|
||
{ "name": "The No-Nested-Cards Rule", "body": "卡片只用于真实分组；卡片内部不能再套同样外观的卡片。优先使用标题、间距、分隔线和表格分组表达层级。", "section": "elevation" }
|
||
],
|
||
"dos": [
|
||
"复用已有令牌和组件，按 DESIGN.md 保持同类页面一致；常规排版和交互细节自主决定，不增加额外设计审批。",
|
||
"临时截图和 design-qa.md 仅作验收证据；规则变化时同步现有设计文档，不另建规范文件。",
|
||
"保持首屏布局稳定、焦点可见，正文和小号文字对比度至少 4.5:1；不添加与业务无关的装饰或宣传内容。"
|
||
],
|
||
"donts": []
|
||
}
|
||
}
|