WuYongJie/CaiWuXiTong
1
0
Fork 0
Code Issues Pull Requests 2 Packages Projects Releases Wiki Activity
CaiWuXiTong/DESIGN.md

15 KiB
Raw Permalink Blame History

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

Design System: CaiWuXiTong

1. Overview

Creative North Star: "黑金财务中枢"

CaiWuXiTong 是一个需要长时间、高频率使用的财务工作台。视觉设计服务于读取、核对、筛选、审批和追踪，不服务于装饰。整体气质必须克制、专业、清晰，具有 VIP 黑金的品质感，但不能变成奢侈品海报、娱乐场所或高饱和暗黑界面。

应用外壳使用“深黑工具轨道 + 浅黑功能栏 + 浅色内容区”的三层结构。黑色区域承担全局导航和功能定位，浅金色提供文字与图标的高对比识别；内容区始终保持浅色，使用深色文字和有限的金色交互信号，让大量表格、金额和状态信息稳定可读。

这是唯一正式视觉标准。现存页面中的紫色、靛蓝、亮蓝硬编码属于遗留偏差，不能被新页面复制，也不能被写入新的组件。语义色只用于成功、失败、警告和信息状态，不构成第二套主题色。

Key Characteristics:

  • 深黑工具轨道、浅黑功能栏、浅色内容区，三层边界清楚。
  • 浅金用于深色导航，深金用于浅色内容区的文字与主要操作。
  • 全站使用 JetBrains Mono，标题和数据采用固定字号，不使用流体放大。
  • 页面标题位于内容区右侧，保持 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, 12px, 16px): 模块和一级功能名称。
  • 侧边栏二级标题 (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

  • 一、二级导航统一 12px；文字和对应 Material 图标使用同一浅金色。
  • 图标统一采用 Material Icons Outlined/Round，导航图标统一 16px；同一业务语义不得在不同页面更换图标体系。
  • 当前二级菜单只显示一个 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. 使用原则

  • 复用已有令牌和组件，按上述标准保持同类页面一致；常规排版和交互细节自主决定，不增加额外设计审批。
  • 临时截图和 design-qa.md 仅作验收证据，不覆盖本文件；规则变化时同步 .impeccable/design.json，不另建规范文件。
  • 保持首屏布局稳定、焦点可见，正文和小号文字对比度至少 4.5:1；不添加与业务无关的装饰或宣传内容。