Design System
基础规范
基础规范
版本 2.0 - 对齐 v3 原型，覆盖 Editorial Calm 风格全量 token。
1. 设计哲学
MOSS 的视觉语言属于 Editorial Calm 谱系：用印刷品的排版纪律和自然材质的温度，包裹一个高密度的个人操作系统。核心原则：
- 信息密度高但视觉噪音低 - 不使用渐变按钮闪烁、彩色 badge 轰炸或装饰性动画。
- 表面有呼吸感 - canvas 不是纯平色，而是带 noise/dot 纹理和 radial wash 的"纸面"。
- 动效只做因果反馈 - hover 浮起、stagger 入场、scroll reveal、cross-fade 切换；不做装饰。
- 暗色不是反转 - 暗色模式是"夜间书房"体感，不是高对比纯黑。
2. 颜色系统
2.1 语义色
| 语义 | Light Token | Dark Token | 用途 |
|---|---|---|---|
| 画布 | --color-bg-canvas #f1f3ec |
#131712 |
应用整体背景。 |
| 表面 | --color-bg-surface #f9faf5 |
#191e18 |
侧栏、inspector、面板。 |
| 抬升 | --color-bg-raised #ffffff |
#20261f |
卡片、按钮、对话框。 |
| 弱底 | --color-bg-subtle |
- | hover、骨架、次级区域。 |
| 主文字 | --color-text-primary #1c231e |
#e7ece5 |
正文、标题。 |
| 次文字 | --color-text-secondary #5b665e |
#a2aca1 |
说明、来源。 |
| 三级文字 | --color-text-tertiary #8d978d |
#727d70 |
时间戳、计数、禁用。 |
| 主强调 | --color-accent-primary #2e6b55 |
#7db89d |
选中、正向操作、进度。 |
| 强强调 | --color-accent-strong #1c4a3a |
#aad3bd |
强调文字、激活导航。 |
| 亮强调 | --color-accent-bright #3d8a6e |
#8ec7ab |
渐变起点、脉冲点。 |
| 强调底 | --color-accent-subtle #e0ebe3 |
#213229 |
选中行、正向反馈。 |
| 强调光 | --color-accent-glow rgba(46,107,85,.13) |
rgba(125,184,157,.15) |
按钮阴影、选中环。 |
| 警告 | --color-warning #a35d18 |
#d99e57 |
待处理、时效风险。 |
| 危险 | --color-danger #a83d38 |
#d88a84 |
负反馈、删除、同步失败。 |
2.2 域色系统
六个顶层域各有语义色，贯穿 sidebar 字母徽章、signal 卡片标签、coverage 仪表、focus-item icon 和 governance 策略级别。
| 域 | Light | Dark | Token |
|---|---|---|---|
| Knowledge | #2e6b55 |
#7db89d |
--color-dom-k |
| Action | #a35d18 |
#d99e57 |
--color-dom-a |
| Context | #2f6e98 |
#79aecf |
--color-dom-c |
| Self | #96536b |
#c78ba1 |
--color-dom-s |
| Asset | #8a6d1f |
#c9ab55 |
--color-dom-a2 |
| Governance | #5b665e |
#a2aca1 |
--color-dom-g |
域色使用规则：
- 作为 icon/letter 背景时用
color-mix(in srgb, var(--color-dom-x) 14%, var(--color-bg-surface))。 - 作为 rail/indicator 时直接使用域色，opacity 0.85-0.9。
- 作为 coverage meter 段时直接使用域色。
- 不作为大面积背景或正文颜色。
2.3 主题切换
- 通过
data-theme="light" | "dark"属性切换。 - 未设置时跟随
prefers-color-scheme。 - 切换时给
<html>添加.theming类 420ms，让所有颜色属性平滑过渡。 - 暗色模式的 grain 纹理从 noise SVG 换为 4px dot pattern，opacity 降至 0.03。
3. 字体系统
3.1 字体配对
| 角色 | 字体栈 | Token | 用途 |
|---|---|---|---|
| Display | Fraunces (Google Fonts 可变衬线) → Iowan Old Style → Songti SC → Georgia |
--font-family-display |
h1、metric 数字、brand mark、fact 值、detail 标题。 |
| Body / UI | Avenir Next → PingFang SC → Hiragino Sans GB → Microsoft YaHei → system-ui |
--font-family-ui |
正文、导航、按钮、标签、说明。 |
| Mono | SF Mono → ui-monospace → Consolas |
--font-family-mono |
时间戳、ID、代码、精确数值、审计时间。 |
3.2 CJK 字重补偿
Fraunces 只覆盖拉丁字符。中文回退到 Songti SC 时 weight 对比不匹配。规则：
- 混排标题（含中文）使用
font-weight: 750补偿（--font-weight-cjk-compensate）。 - 纯拉丁标题使用
font-variation-settings: "wght" 600（--font-weight-display）。 - 中文 kicker/label 不增加字距（仅英文大写用
letter-spacing）。
3.3 类型层级
| 层级 | Size | Line-height | Weight | 用途 |
|---|---|---|---|---|
| Hero | clamp(31px, 3.8vw, 47px) |
1.1 | 600 | 今日页主标题。 |
| Display | 34px | 1.1 | 600 | 产品级标题。 |
| Title 1 | 28px | 1.28 | 700 | 工作区页面标题。 |
| Title 2 | 22px | 1.28 | 700 | 区域标题。 |
| Title 3 | 17px | 1.28 | 700 | 面板标题。 |
| Body | 14px | 1.55 | 400 | 默认 UI 文本。 |
| Body large | 16px | 1.7 | 400 | 长正文阅读。 |
| Meta | 12px | 1.45 | 400/600 | 作者、时间、来源。 |
| Caption | 11px | 1.4 | 400/600 | 辅助信息。 |
| Label | 10px | 1.2 | 700/800 | 分组标签、kicker。 |
| Viz note | 9px | 1.3 | 400 | 数据可视化注释。 |
数字列使用 font-variant-numeric: tabular-nums。
4. 表面纹理
4.1 Grain
全局 body::after 伪元素叠加纹理：
- Light：SVG fractalNoise，opacity 0.04。
- Dark：4×4px dot pattern，opacity 0.03（避免"脏"感）。
4.2 Wash
Canvas 背景叠加两层 radial-gradient：
--color-wash-1：左上角，accent 色调。--color-wash-2：右下角，warm 色调。background-attachment: fixed确保滚动时不动。
4.3 Hero Glow
Hero 区域使用两个 filter: blur(80px) 的绝对定位伪元素：
- 不同尺寸、不同 drift 动画速度（22s / 18s alternate）。
- opacity 0.55，让边缘永远在微动中消解，不产生硬边弧线。
5. 海拔系统
三级阴影梯度 + 特殊用途：
| 级别 | Token | 用途 |
|---|---|---|
| 1 | --elevation-1 |
静态卡片、按钮默认态。 |
| 2 | --elevation-2 |
hover 浮起、popover。 |
| 3 | --elevation-3 |
overlay、drawer、command palette。 |
| Overlay | --elevation-overlay |
全屏遮罩内容。 |
| Drawer | --elevation-drawer |
侧滑抽屉。 |
| Glow | --elevation-glow |
按钮 hover 时的 accent 光晕。 |
6. 动效系统
6.1 缓动曲线
| Token | 值 | 用途 |
|---|---|---|
--motion-easing-standard |
ease |
简单过渡。 |
--motion-easing-smooth |
cubic-bezier(.22,.9,.32,1) |
大部分 UI 过渡（hover、transform、opacity）。 |
--motion-easing-spring |
cubic-bezier(.34,1.4,.44,1) |
弹入效果（toast、decision result、overlay 内容）。 |
6.2 时长
| Token | 值 | 用途 |
|---|---|---|
--motion-duration-instant |
0ms | 禁用态。 |
--motion-duration-fast |
120ms | 按钮 active scale。 |
--motion-duration-standard |
180ms | hover、border-color、background。 |
--motion-duration-slow |
350ms | drawer 滑入、theme 过渡。 |
--motion-duration-reveal |
550ms | scroll reveal、stagger 入场。 |
6.3 编排模式
- Stagger：
[data-stagger] > *:nth-child(n)使用--stagger-1到--stagger-6（30ms-330ms 递增）。 - Scroll reveal：
.reveal默认opacity:0; transform:translateY(16px)，IntersectionObserver 添加.in后过渡到可见。 - Cross-fade：Inspector 切换内容时 140ms opacity+translateY swap，带 debounce 防快速点击闪烁。
- Card flash：决策完成后目标卡片触发
cardflash动画（accent-soft → raised 600ms）。
6.4 数据可视化动效
- Sparkline：
stroke-dashoffset从全长到 0，1.5s smooth easing，delay 0.5s。 - 节点弹入：
scale(0) → scale(1)，spring easing，逐个 delay 150ms。 - 进度环：
stroke-dashoffset过渡 1.3s，delay 0.4s。 - 条形图：
width: 0 → var(--w)过渡 1.1s，delay 0.35s，仅在.reveal.in时触发。 - Coverage meter：段色从灰到域色 0.4s 过渡，逐段 delay 80ms。
7. 间距与形状
7.1 间距
4px 基准网格：4, 8, 12, 16, 20, 24, 32, 40, 48px。
- 行内相关元素：8px。
- 组件内部：12-16px。
- 区块之间：24-40px。
- Section 之间：40px（
--space-section的 2.5 倍）。
7.2 圆角
| Token | 值 | 用途 |
|---|---|---|
--radius-subtle |
4px | tag、小标记。 |
--radius-control |
6px | 按钮、输入框、筛选器。 |
--radius-card |
10px | 卡片、focus-item。 |
--radius-overlay |
14px | 对话框、command palette、signal card。 |
--radius-pill |
99px | chip、count-chip、tag pill。 |
不使用超过 14px 的圆角。
7.3 边框
默认 1px --color-border-default 区隔信息。阴影只用于卡片 hover 和 overlay 层级。页面区域不是卡片。
8. 布局
桌面三栏：sidebar 250px + workspace 1fr + inspector 322px。
| 断点 | 行为 |
|---|---|
> 1120px |
三栏完整。 |
781-1120px |
inspector 隐藏，sidebar 缩至 212px。 |
≤ 780px |
sidebar 变 fixed drawer，workspace 全宽。 |
Topbar sticky，带 backdrop-filter: blur(14px) 和半透明背景。
9. 可访问性
- 正文/背景至少 WCAG AA 对比度。
- 所有键盘可达控件显示
--component-focus-ring。 - Hover 不是唯一状态表达；选中、错误、禁用须有颜色之外的文本/图标/结构提示。
- 遵守
prefers-reduced-motion：所有 duration 归零。 - 触摸目标至少 34px。
- Detail drawer 打开后 trap focus（Tab 循环锁定），关闭后焦点回到触发元素。
- Focus-stack 支持 ArrowUp/Down 键盘导航。