MOSS Design System

版本 2.0 - Editorial Calm 风格，双主题，六域色系统。 对齐 v3 原型（prototypes/moss-personal-os-v3.html）。

目的

MOSS 是长期演化的 local-first 个人上下文工作台。Design System 确保六个顶层域（Knowledge、Action、Context、Self、Asset、Governance）共享同一套排版纪律、交互语义、表面质感和隐私感。

设计哲学

Editorial Calm - 用印刷品的排版纪律和自然材质的温度，包裹一个高密度的个人操作系统。信息密度高但视觉噪音低；表面有呼吸感；动效只做因果反馈。

已确认决策

项目	决策
主题	双主题：Mineral Moss（light）+ Deep Moss（dark），跟随系统偏好或手动切换。
视觉风格	Editorial Calm：Fraunces 可变衬线做 display + 系统 sans 做 body + 自然矿物色系 + diffuse blur glow 氛围。
Token 架构	primitive → semantic → component 三层 CSS Custom Properties。
域色	六个顶层域各有语义色，贯穿 icon、rail、meter、tag。
组件基础	shadcn/ui + Radix UI + Lucide。
实现层	Tailwind CSS 映射 MOSS token，不启用默认 palette。
表面纹理	Light: noise grain 4% + radial wash；Dark: dot pattern 3% + glow wash。
海拔	三级阴影梯度 + overlay/drawer/glow 特殊用途。
动效	smooth + spring 双缓动曲线；stagger 编排；scroll reveal；reduced-motion 全归零。

Source of Truth

文件	职责
design-system/tokens.css	可执行 token 唯一来源（light + dark + responsive + reduced-motion）。
基础规范	颜色、域色、字体配对、表面纹理、海拔、动效、间距、布局、可访问性。
组件契约	全部组件状态、交互规则、页面组成约束。
交互模式	数据可视化注释、lazy view、键盘导航、focus trap、决策流反馈、主题切换、scroll reveal。
prototypes/moss-personal-os-v3.html	完整交互原型，token 的活体验证。

使用规则

1. 页面与组件只能消费 semantic 或 component token，不能直接使用 primitive token 或 raw hex。
2. 新颜色先定义语义用途，再决定数值；域色只用于域归属表达，不作大面积背景。
3. 新组件先复用或组合 shadcn/ui 与 Radix UI；只有交互模型不存在时才新建。
4. 图标只使用 Lucide，图标按钮必须有 aria-label 和 Tooltip。
5. 所有数据可视化必须携带注释锚（.viz-note），否则不允许上线。
6. 暗色模式不是反转--wash、grain、shadow、accent 亮度都需要独立调优。
7. 设计系统只定义稳定规则。一次性页面排版和业务数据模型不进入 token。

版本历史

版本	日期	变更
1.0	2026-07-21	初始：单浅色主题，Phase 1a 工作台组件。
2.0	2026-07-24	Editorial Calm 重做：双主题、域色、Fraunces 字体、elevation、motion、surface texture、lazy view、focus trap、viz 注释。