---
name: CaiWuXiTong
description: 面向多角色财务协作的克制型 VIP 黑金财务管理系统
colors:
  rail-black: "#050506"
  rail-gold: "#F2E7C5"
  sidebar-black: "#1D1D1F"
  sidebar-gold: "#F0E4BF"
  sidebar-gold-soft: "#DDD0AA"
  sidebar-active: "#2A2927"
  content-bg: "#F8F6F1"
  surface: "#FFFFFF"
  content-ink: "#171717"
  content-muted: "#595959"
  content-accent: "#B9954F"
  content-accent-soft: "#F7F0DE"
  content-accent-dark: "#856632"
  border: "#D8D2C7"
  success: "#53793E"
  danger: "#B80000"
  warning: "#935F07"
  info: "#006395"
typography:
  title:
    fontFamily: "JetBrains Mono, Microsoft YaHei, PingFang SC, monospace"
    fontSize: "0.875rem"
    fontWeight: 600
    lineHeight: 1.25
  body:
    fontFamily: "JetBrains Mono, Microsoft YaHei, PingFang SC, monospace"
    fontSize: "0.8125rem"
    fontWeight: 400
    lineHeight: 1.5
  label:
    fontFamily: "JetBrains Mono, Microsoft YaHei, PingFang SC, monospace"
    fontSize: "0.75rem"
    fontWeight: 500
    lineHeight: 1.333
  data:
    fontFamily: "JetBrains Mono, Microsoft YaHei, PingFang SC, monospace"
    fontSize: "0.78125rem"
    fontWeight: 400
    lineHeight: 1.5
    fontFeature: "tnum"
rounded:
  sm: "4px"
  md: "8px"
  lg: "12px"
  panel: "16px"
  pill: "999px"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "40px"
components:
  button-primary:
    backgroundColor: "{colors.content-accent-dark}"
    textColor: "{colors.surface}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: "0 14px"
    height: "34px"
  button-primary-hover:
    backgroundColor: "#6A5129"
    textColor: "{colors.surface}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: "0 14px"
    height: "34px"
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.content-ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: "0 14px"
    height: "34px"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.content-ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: "0 10px"
    height: "34px"
  sidebar-item:
    backgroundColor: "{colors.sidebar-black}"
    textColor: "{colors.sidebar-gold}"
    typography: "{typography.title}"
    rounded: "{rounded.sm}"
    padding: "8px 10px"
  sidebar-item-active:
    backgroundColor: "{colors.sidebar-active}"
    textColor: "{colors.rail-gold}"
    typography: "{typography.title}"
    rounded: "{rounded.sm}"
    padding: "8px 10px"
  tab-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.content-muted}"
    typography: "{typography.title}"
    padding: "0 4px"
    height: "80px"
  tab-active:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.content-accent-dark}"
    typography: "{typography.title}"
    padding: "0 4px"
    height: "80px"
  panel:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.content-ink}"
    rounded: "{rounded.lg}"
    padding: "16px"
---

# 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`，底部使用 3px `colors.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` 当成团队视觉规范。