16 KiB
16 KiB
name, description, colors, typography, rounded, spacing, components
| name | description | colors | typography | rounded | spacing | components | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| CaiWuXiTong | 面向多角色财务协作的克制型 VIP 黑金财务管理系统 |
|
|
|
|
|
Design System: CaiWuXiTong
1. Overview
Creative North Star: "黑金财务中枢"
CaiWuXiTong 是一个需要长时间、高频率使用的财务工作台。视觉设计服务于读取、核对、筛选、审批和追踪，不服务于装饰。整体气质必须克制、专业、清晰，具有 VIP 黑金的品质感，但不能变成奢侈品海报、娱乐场所或高饱和暗黑界面。
应用外壳使用“深黑工具轨道 + 浅黑功能栏 + 浅色内容区”的三层结构。黑色区域承担全局导航和功能定位，浅金色提供文字与图标的高对比识别；内容区始终保持浅色，使用深色文字和有限的金色交互信号，让大量表格、金额和状态信息稳定可读。
这是唯一正式视觉标准。现存页面中的紫色、靛蓝、亮蓝硬编码属于遗留偏差，不能被新页面复制，也不能被写入新的组件。语义色只用于成功、失败、警告和信息状态，不构成第二套主题色。
Key Characteristics:
- 深黑工具轨道、浅黑功能栏、浅色内容区，三层边界清楚。
- 浅金用于深色导航，深金用于浅色内容区的文字与主要操作。
- 全站使用 JetBrains Mono，标题和数据采用固定字号，不使用流体放大。
- 页面标题位于内容区右侧，保持 14px，与侧边栏一级标题同级。
- 一级导航 14px，二级导航 12px；同一层级的图标、字号和交互状态必须一致。
- 表格、筛选器和状态反馈优先，装饰性卡片、阴影和动画受到严格限制。
- 标签切换是局部状态变化，不触发整页刷新；加载前后字号和布局不得跳变。
The Task-First Rule. 用户必须先看到任务和数据，再看到品牌装饰；任何视觉效果只在帮助定位、读取或确认状态时才允许存在。
2. Colors
配色采用受控的黑金体系：深色导航使用高明度浅金，浅色内容区使用对比度合格的深金。亮金是强调材料，不是正文颜色。
Primary
- VIP 金 (#B9954F): 用于活动下划线、细边框、图标点缀、进度和非文字强调；禁止作为浅色背景上的小号正文或白字按钮背景。
- 可读深金 (#856632): 用于浅色内容区的活动文字、链接、焦点边框和主要按钮。它在内容底色上的对比度约为 4.93:1，满足普通文字要求。
- 淡金底色 (#F7F0DE): 用于标签、选中行和弱提示背景，必须搭配深金或深色文字。
Semantic States
- 本系统没有第二装饰主题色。紫色、靛蓝和亮蓝不得承担品牌、导航、按钮或选中状态。
- 成功绿 (#53793E): 只表达已完成、已通过或正向业务结果。
- 危险红 (#B80000): 只表达错误、拒绝、删除或高风险结果。
- 警告棕橙 (#935F07): 只表达待处理、需注意或可能产生影响的状态。
- 信息蓝 (#006395): 只表达中性信息或帮助提示，不得作为主题色。
Neutral
- 工具轨道黑 (#050506): 最左侧固定工具栏，是全站最深背景。
- 功能栏黑 (#1D1D1F): 功能列表区域，比工具轨道略浅，保持两层黑色结构。
- 活动浅黑 (#2A2927): 深色导航的悬停和选中底色。
- 工具轨道浅金 (#F2E7C5): 最深工具轨道上的文字和图标。
- 功能栏浅金 (#F0E4BF): 功能栏一级文字和图标；深色背景上的对比度超过 13:1。
- 功能栏柔金 (#DDD0AA): 功能栏二级文字和弱提示，不再通过透明度继续降对比度。
- 内容底色 (#F8F6F1): 页面工作区的浅灰暖白底色。
- 内容表面 (#FFFFFF): 表格、筛选区和业务面板表面。
- 正文墨色 (#171717): 标题、正文和关键数据。
- 辅助墨色 (#595959): 说明、占位和次要数据；不得再降低透明度导致对比不足。
- 边界色 (#D8D2C7): 面板、输入框、表格分隔和结构边界。
Named Rules
The Two-Gold Rule. 深色背景使用浅金，浅色背景使用深金；不得把两者交换。亮金在白色上的对比度不足，只能用于非文字强调。
The One-Accent Rule. 金色是唯一交互强调色。任何新页面出现装饰性紫色、靛蓝、亮蓝或绿色，都视为视觉回归。
The Semantic Exception Rule. 红、绿、橙、蓝只在状态本身有业务含义时出现，并同时提供文字或图标，不能只依赖颜色传达结果。
3. Typography
Display Font: JetBrains Mono (with Microsoft YaHei, PingFang SC, monospace)
Body Font: JetBrains Mono (with Microsoft YaHei, PingFang SC, monospace)
Label/Mono Font: JetBrains Mono
Character: 单一字体家族带来稳定、技术化和可核对的财务工具气质。中文回退字体只在字形缺失时接管；不要增加相似但不同的第二套无衬线字体。
Hierarchy
- 页面标题 (600, 14px, 1.25): 固定在内容头部右侧，与配套图标同行；禁止在业务内容内部重复放置大号 H1。
- 侧边栏一级标题 (500–600, 14px, 1.25): 模块和一级功能名称。
- 侧边栏二级标题 (400–500, 12px, 16px): 比一级标题小一档，保持单行和稳定缩进。
- 正文 (400, 13px, 1.5): 表单说明、面板正文和常规业务文字。
- 标签 (500, 12px, 16px): 筛选条件、字段名、状态标签和辅助说明。
- 表格与金额 (400–600, 12.5px, 1.5): 启用等宽数字
tabular-nums，金额和数量右对齐。 - 关键汇总值 (700, 22px, 1.2): 只用于真实汇总数字，不能充当页面标题。
Named Rules
The Fixed-Scale Rule. 产品界面使用固定 rem 字号，不使用 clamp() 放大标题；桌面与移动端通过布局重排适配，不通过夸张缩放字体适配。
The Stable-First-Paint Rule. 关键字号、行高和容器尺寸必须由首屏 CSS 直接提供，不能等待 JavaScript 或异步样式后再缩小，禁止首次进入时出现巨大字体闪烁。
The One-Family Rule. 按钮、标签、导航、表格和正文都使用同一字体家族；禁止在数据界面引入装饰性展示字体。
4. Elevation
界面默认采用“色调分层 + 细边界”，不是依赖大阴影堆叠。工具轨道、功能栏和内容区通过背景明度形成第一层深度；内容面板通过白色表面与细边界形成第二层。阴影只用于浮层或短暂交互反馈。
Shadow Vocabulary
- Surface Low (
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04)): 只用于需要从内容底色中轻微抬起的单层面板。 - Floating (
box-shadow: 0 4px 8px rgba(23, 23, 23, 0.10)): 只用于下拉框、悬浮菜单和模态浮层。 - Focus Ring (
box-shadow: 0 0 0 3px rgba(133, 102, 50, 0.20)): 键盘焦点和输入聚焦反馈，不承担常驻装饰。
Named Rules
The Flat-by-Default Rule. 静态业务面板默认无阴影；若已经有 1px 边框，不得再叠加 16px 以上模糊半径的宽阴影。
The No-Nested-Cards Rule. 卡片只用于真实分组；卡片内部不能再套同样外观的卡片。优先使用标题、间距、分隔线和表格分组表达层级。
5. Components
App Shell
- 最左工具轨道固定为 56px，使用
colors.rail-black。 - 功能列表桌面宽度为 224px，使用
colors.sidebar-black；收起后不残留透明占位。 - 内容区使用
colors.content-bg，业务表面使用colors.surface。 - 小屏幕折叠导航，内容保持完整宽度；表格允许局部横向滚动，页面本身不得横向漂移。
Navigation
- 一级导航 14px，二级导航 12px；文字和对应 Material 图标使用同一浅金色。
- 图标统一采用 Material Icons Outlined/Round，常规尺寸 20–24px；同一业务语义不得在不同页面更换图标体系。
- 当前二级菜单只显示一个 16px 圆形浅金 chevron 指示器；禁止同时保留竖条、圆点或第二个箭头。
- 悬停使用轻微浅金透明底，选中使用
colors.sidebar-active；状态变化为 150–200ms。
Page Header
- 页面标题始终位于内容头部右侧，14px/600，文字前配一个与业务匹配的 18–20px 图标。
- 标题文字使用
colors.content-ink，图标使用可读深金；禁止左侧大号标题或内容面板内的重复 H1。 - 标题区域必须在首屏 CSS 中获得最终字号和位置，不能依赖加载完成后的脚本纠正。
Tabs
- 桌面标签栏高度 80px，白色表面，标签间距以可点击性和单行展示为准。
- 默认文字使用辅助墨色；活动文字使用
colors.content-accent-dark，底部使用 3pxcolors.content-accent下划线。 - 标签图标与文字同色；切换只更新内容、URL History 和活动状态，不触发 document 级刷新。
- 标签变化使用 150ms 状态过渡；
prefers-reduced-motion下立即切换。
Buttons
- 标准高度 34px，8px 圆角，13px/500；同一操作在所有页面保持相同高度、圆角和状态。
- 主按钮使用可读深金底和白字；悬停使用更深一档金色，焦点显示 3px 深金焦点环。
- 次按钮使用白底、边界色和正文墨色；悬停只改变边界或浅底，不变成第二主题色。
- 禁用状态保留可读标签，降低整体强调并移除点击反馈；加载状态保持原宽度。
Inputs / Fields
- 标准高度 34px，8px 圆角，白底、1px 边界；标签位于字段上方，12px/500。
- 聚焦使用深金边框和半透明焦点环；占位文字至少使用辅助墨色，不允许低对比浅灰。
- 错误状态使用语义危险色、明确文字和错误图标；不能只把边框染红。
Cards / Containers
- 常规业务面板使用 12px 圆角、16px 内边距；大型工作区容器最多使用 16px 圆角、24px 内边距。
- 表面为白色，边界为
colors.border；默认不加宽阴影。 - 筛选、汇总和数据表属于同一业务流程时，用间距和分隔线组织，不生成无意义的多层卡片。
Data Tables
- 表格正文 12.5px，表头 12px/600；表头可使用极浅金背景，不能使用蓝紫背景。
- 金额、数量、比例右对齐并启用等宽数字；文本左对齐，状态居中或按列契约统一。
- 行悬停使用极浅金/中性背景；选中状态同时提供图标、文字或边界，不只改变底色。
- 收入、支出、错误和成功色遵循业务语义；不得为了“好看”交换红绿含义。
Scrollbars
- 内容滚动条为 8px，轨道使用浅中性色，滑块使用 VIP 金；悬停使用更深金色。
- 深色导航的滚动条轨道透明、滑块浅金，不能出现系统紫色或亮蓝色。
Loading, Empty and Error States
- 首次加载使用与最终布局同尺寸的骨架或稳定占位，避免标题、标签和表格跳动。
- 空状态说明“为什么没有数据”和“下一步能做什么”，不能只写“暂无数据”。
- 错误状态保留重试入口和明确原因；局部失败不能清空整个页面或触发整页刷新。
6. Do's and Don'ts
Do:
- Do 在所有前端任务开始前读取根目录
DESIGN.md，并优先复用全局--vip-*令牌和既有组件。 - Do 保持深黑工具轨道、浅黑功能栏、浅色内容区的三层结构。
- Do 在深色导航使用浅金，在浅色内容区使用对比度合格的深金。
- Do 将页面标题放在右侧，使用 14px 字号和匹配业务语义的统一图标。
- Do 让一级导航保持 14px、二级导航保持 12px，并为所有交互实现 hover、focus、active、disabled、loading 和 error 状态。
- Do 让标签切换、筛选和分页保持局部更新，并使用 History API 维护可分享 URL。
- Do 对正文、小号标签、按钮和占位文字检查至少 4.5:1 的对比度。
- Do 在设计规则确需改变时，先更新
DESIGN.md和.impeccable/design.json，再修改页面代码。
Don't:
- Don't 把遗留的紫色、靛蓝、亮蓝硬编码（例如
#4F46E5、#4338CA、#2563EB）复制到新页面；信息状态蓝色除外。 - Don't 在白色或浅灰背景上把亮金
colors.content-accent用作小号正文或白字按钮底色；改用colors.content-accent-dark。 - Don't 在内容区使用大面积黑色背景和金色正文；黑底金字只属于导航、浮层或明确的高层级控制区域。
- Don't 同时显示竖条、圆点和圆形 chevron 等多个选中标识；每个菜单项只能有一个活动指示器。
- Don't 在业务内容内部重复页面 H1，或让首次加载时出现远大于 14px 的标题闪烁。
- Don't 用普通
<a>默认导航实现站内标签切换，导致整个文档重新加载。 - Don't 给有边框的卡片叠加宽而软的大阴影，也不要使用超过 16px 的卡片圆角。
- Don't 使用渐变文字、玻璃拟态、装饰网格、斜纹背景、彩色侧边条或与任务无关的动画。
- Don't 恢复“Akaunting 提供支持”之类的供应商页脚文字，或在业务页面加入非业务宣传信息。
- Don't 把临时截图路径、个人电脑路径或
design-qa.md当成团队视觉规范。