设计系统

设计系统的核心是一个简单但强大的思想：约束即解放。当你不需要在每次创建文档时重新决定颜色、字体、间距和排版规则，创造力的门槛就降到了最低。以下是在所有 30 个模板中自动生效的设计令牌和视觉原则。

色彩系统

12 种核心颜色，分为文本色、表面色、品牌色、功能色和弱化色五组。所有颜色都在 :root 中定义为 CSS 自定义属性，子模板通过 var() 引用。

Ink 主文字

#172033 · --ink

Ink Subtle 次级文字

#4C566A · --ink-subtle

Paper 页面背景

#FAF8F4 · --paper

Canvas 表面背景

#F2EFE8 · --canvas

Line 边框分割线

#D8D2C4 · --line

Brand 品牌蓝

#244C7A · --brand

Brand Muted 品牌弱化

#DCE7F2 · --brand-muted

Accent 强调橙

#B65C3A · --accent

Accent Muted 强调弱化

#F2E1D9 · --accent-muted

Success 成功绿

#2F6B4F · --success

Warning 警告橙

#A46A21 · --warning

Danger 危险红

#9A3D3D · --danger

CSS

:root {
  /* Text */
  --ink: #172033;
  --ink-subtle: #4C566A;

  /* Surface */
  --paper: #FAF8F4;
  --canvas: #F2EFE8;
  --line: #D8D2C4;

  /* Brand */
  --brand: #244C7A;
  --brand-muted: #DCE7F2;

  /* Accent */
  --accent: #B65C3A;
  --accent-muted: #F2E1D9;

  /* Semantic */
  --success: #2F6B4F;
  --warning: #A46A21;
  --danger: #9A3D3D;
}

字体系统

三套字体系列，各司其职。衬线体用于标题和大数字，传达正式感和权威性；无衬线体用于正文，保证屏幕可读性；等宽体用于数据、标签和代码。

Serif 衬线体 · 标题

让每一份文档都有设计感

路由式设计系统，将 15 种文档类型统一到一套设计令牌中。

Noto Serif SC · Source Han Serif SC · Songti SC

var(--font-serif)

Sans 无衬线体 · 正文

JSON-driven document rendering engine

Render structured JSON into print-safe, design-token-aware HTML documents. All templates share the same visual language.

Inter · Noto Sans SC · PingFang SC

var(--font-sans)

Mono 等宽体 · 代码和数据

momo render -d data.json -o output.html

pip install -e . && momo list && python render_all.py

IBM Plex Mono · SFMono-Regular · monospace

var(--font-mono)

CSS

/* Serif · 标题 & 大数字 */
--font-serif: "Noto Serif SC", "Source Han Serif SC",
             "Songti SC", serif;

/* Sans · 正文 & UI */
--font-sans: "Inter", "Noto Sans SC",
            "PingFang SC", sans-serif;

/* Mono · 代码 & 数据 */
--font-mono: "IBM Plex Mono", "SFMono-Regular",
            monospace;

间距系统

基于 8px 倍数的间距标尺，确保所有文档的呼吸感一致。content-width (840px) 是正文阅读的最佳行宽，section-gap (64px) 提供章节之间的充足留白。

--space-2

8px

--space-3

12px

--space-4

16px

--card-padding

24px

--space-6

32px

--space-8

48px

--section-gap

64px

--content-width

840px

CSS

/* 间距标尺 (8px 基准) */
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--card-padding: 24px;
--space-6: 32px;
--space-8: 48px;
--section-gap: 64px;

/* 布局约束 */
--content-width: 840px;

设计哲学

Momo Paper 的设计原则源于对「AI 时代文档应该长什么样」的思考。当内容由人机协作产出，设计系统需要同时服务两个受众：人类创作者和 AI agent。

路由即设计

声明 document_type，引擎自动选择模板、令牌和校验规则。这不是「选择一个样式」，而是「声明你的内容是什么类型」——排版系统据此做出全部设计决策。这种路由式设计让非设计师也能产出专业排版的文档。

约束即解放

传统文档工具给了用户无限的自由（选颜色、调字号、改间距），但这些自由变成了认知负担。Momo Paper 反其道而行：提供精心调校的约束，让用户（和 AI）不再做排版决策，专注于内容本身。事实证明，在约束下产出的文档比自由设计更一致、更专业。

屏幕即纸张

同一份 HTML 在屏幕和纸张上都应该表现一致。所有模板内置 @media print 规则，自动处理背景色、页边距和跨页断裂。这不是可选的附加功能——它是设计的起点而非终点。在需要打印的场景（金融报告、法律文件、学术论文），这个原则尤其重要。

JSON 作为中间语言

JSON 是内容的结构化表达，HTML 是内容的视觉呈现。将两者分离意味着：AI agent 只需产出结构化 JSON（它的强项），引擎负责视觉呈现（模板的强项）。这种解耦让双方都在各自领域独立进化，通过 Schema 契约保持兼容。

可编程但可读

Momo Paper 的设计令牌和模板都是可编程的（修改 :root 变量、创建自定义模板），但系统默认的「出厂设置」已经足够好。目标是让 80% 的用户不需要自定义任何东西，而剩下的 20% 可以通过少量配置实现深度定制。

中英文一等公民

大部分设计系统以英文为第一语言，中文只是翻译。Momo Paper 从第一天起就将中英文作为平等的设计目标：中文字符的内置 serif 字体（Noto Serif SC）经过 CJK 排版调校，section 标题自动按 locale 切换，两种语言的文本密度和行高分别优化。