Design System · v1.1.0 · 2026.04

# Kami紙

好内容，值得好版面。Kami 是一套适合 AI 时代的排版设计系统，让文档更清晰好读，也容易记住。

Canvas#f5f4ed Accent#1B365D SerifTsangerJinKai / Charter Sans= Serif (一页一字体)

00 · See it

## 输出样本

把文档需求交给 Claude。无论是一页纸、长文、正式信件、作品集、简历还是幻灯片，Kami 都用少量清晰规则，把提示词变成可交付的排版。

One-Pager · 中文

Tesla 公司介绍，单页 A4

Resume · English

创始人简历，2 页

作品集 · 日本語

Kaku 终端作品集（日文版），7 页

Slides · English

Agent keynote, 6 slides

01 · Usage

## 安装与调用

直接告诉 Claude 你要什么，比如「帮我排版一份白皮书」「做一份简历」「帮我做一份作品集」，skill 会自动触发，无需斜杠命令。

    # Claude Code
    npx skills add tw93/kami -a claude-code -g -y

    # Codex
    npx skills add tw93/kami -a codex -g -y

Claude Desktop：下载 kami.zip，在 Customize > Skills > "+" > Create skill 中直接上传。

02 · Manifesto

## 设计原则

暖米纸底，油墨蓝点缀，serif 承担层级，硬阴影与花哨配色都退后；这套系统面向印刷文档，负责把内容收束成稳定、清晰、易读的版面。

1. 1

   页面背景 parchment `#f5f4ed`，不用纯白

2. 2

   强调色只有油墨蓝 `#1B365D`，不引入第二种彩色

3. 3

   所有灰色暖调 (yellow-brown undertone)，禁止冷蓝灰

4. 4

   英文 serif 通吃标题和正文，中文标题用 serif、正文用 sans

5. 5

   Serif 正文 400，标题 500，不用合成 bold

6. 6

   行距三档：紧凑标题 1.1–1.3 / 密排 1.4–1.45 / 阅读 1.5–1.55

7. 7

   Tag 背景必须实色 hex，禁止 rgba（WeasyPrint 双层矩形 bug）

8. 8

   阴影只用 ring 或 whisper shadow，不用硬 drop shadow

03 · Color

## 暖调克制

唯一强调色、纯暖调中性灰、零冷色；油墨蓝全文档不超过 5% 面积，超过就从克制变成堆砌。

### 画布 · Canvas

Parchment

页面底色，也是整套设计的温度来源

#F5F4ED

Ivory

卡片 · 浮起容器

#FAF9F5

Warm Sand

按钮默认背景 · 交互面

#E8E6DC

Deep Dark

深色主题页面底，不取纯黑，保留一点橄榄底色

#141413

### 主调 · Brand

Ink Blue

主色 · CTA · quote 竖线 · 章节标题

#1B365D

Ink Light

深色底上的链接 · 亮变体

#2D5A8A

Dark Surface

深色主题容器 · 暖炭灰

#30302E

Error

错误，深暖红，不刺眼

#B53333

### 中性 · Warm Neutrals

Near Black

#141413

Dark Warm

#3D3D3A

Olive

#504e49

Stone

#6b6a64

### Tag Tints · rgba → 实色对照

这里列的是油墨蓝 `#1B365D` 叠加在 parchment 上的等效实色；Tag 背景不使用 `rgba()`，避免 WeasyPrint 的双层矩形问题。

Tag sample

0.08

#EEF2F7
Tag sample

0.14

#E4ECF5
Default Tag sample

0.18

#E4ECF5
Tag sample

0.22

#D0DCE9
Tag sample

0.30

#D6E1EE

04 · Typography

## 字体系统

Serif 承担层级，sans 承担功能；serif 正文 400，标题 500。

紙 Aa

Serif · 标题

TsangerJinKai02 / Charter

承担标题、引语与数字强调，中文取仓耳今楷，英文取 Charter。

</>

Mono · 代码

JetBrains Mono

用于代码块、版本号、hex 值与等宽数字，字号较正文低一档。

### 层级（印刷品 pt · 屏幕 px ≈ pt × 1.33）

Display
高质量文档读起来
清晰、稳定、有余韵
36–48 pt
weight 500
line 1.10
Section H1
色彩系统 · Color
18–22 pt
weight 500
line 1.20
Subsection H2
画布 · Canvas
14–16 pt
weight 500
line 1.25
Item H3
Tag Tints · rgba 对照
12–13 pt
weight 500
line 1.30
Body Lead
面向印刷文档的约束系统，目标是稳定、清晰、易读。
11 pt
weight 400
line 1.55
Body
油墨蓝全文档不超过 5% 面积，超过就从克制变成堆砌；所有灰色都有暖黄底色，R ≈ G > B 是基本规律。
9.5–10 pt
weight 400
line 1.55
Body Dense
密排正文用于简历、一页纸、名片、索引卡，中文 pt 字号下 1.4–1.45 的行距最舒服，英文网页的 1.6 放进来会显得松散。
9–9.2 pt
weight 400
line 1.40
Caption
图注、脚注、说明文字，颜色用 olive 或 stone 降一级。
8.5–9 pt
weight 400
line 1.45
Label
Design System · v1.1.0
7.5–8 pt
weight 600
line 1.35

05 · Spacing & Shape

## 节奏与形

基础单位 4pt，密度越高 margin 越小，场合越正式 margin 越大。

Scale | Value | Use |
--- | --- | --- | ---
xs | 2–3 pt | 同行内元素 |
sm | 4–5 pt | tag padding · 紧凑布局 |
md | 8–10 pt | 组件内部 |
lg | 16–20 pt | 组件之间 · 卡片 padding |
xl | 24–32 pt | section 标题 margin |
2xl | 40–60 pt | 大 section 之间 |
3xl | 80–120 pt | 长文档章节之间 |

### 圆角尺度 · Radii

4 pt
极紧
6 pt
代码块
8 pt
默认卡片
12 pt
容器
16 pt
特色卡片
24 pt
大容器
32 pt
Hero

### 深度 · 阴影三法

Kami 不用传统硬阴影，深度交给 ring shadow、whisper shadow 与明暗交替。

Ring Shadow

0 0 0 1pt var(--ring-warm)
按钮 · 卡片 hover

Whisper Shadow

0 4pt 24pt rgba(0,0,0,0.05)
极轻浮起 · 特色卡

Light ⇌ Dark

parchment ⇌ deep-dark
section 级别 · 对比最明显

06 · Components

## 原子组件

组件不求多，只保留能解决具体问题的一组。

#### Buttons

ring shadow 替代硬投影 · 8pt 圆角

Primary CTA Secondary Ghost

#### Tags · 三档

实色 hex · 从弱到强选

极淡 0.08 标准 0.18 笔刷渐变

#### Quote

左 2pt 品牌实线 + olive 色

> 一千个 no 换一个 yes，宁可清淡，不可浓艳。

#### Metric

serif 数字 + sans 标签 · tabular-nums

6 文档类型
1 强调色
8 条规则

#### Section Title

serif 500 · 15pt · 纯字号层级，无装饰

核心项目 · Selected Works

#### Dash List

短横线代替圆点 · 更书卷气

- 暖米纸底，不用纯白
- 油墨蓝点缀，不引第二色
- Serif 承担权威

#### Code Block

ivory 底 + 0.5pt border + 6pt 圆角 + mono 字体

    // 暖米纸 · 一种克制的温度
    canvas   = parchment; accent = ink_blue
    palette  = warm_neutrals − cool_grays
    document = serif × hierarchy + generous_space
    beauty   = constraints × intention ÷ noise

#### Featured Card

whisper shadow + 16pt 圆角

Tesla 公司介绍 · One-Pager

单页 A4 · 中文版 · 4 张指标卡 + 3 段正文 + 时间线

中文 A4 × 1 Ink Blue

07 · Diagrams

## 内联图表

十二种内联 SVG 图表，覆盖架构、流程、数据三大场景。直接告诉 Claude 需要哪种图，会自动嵌入文档，配色与字体沿用 Kami 设计语言。

架构图 · Architecture

系统组件与连接关系，一个焦点节点

流程图 · Flowchart

决策分支，Yes / No 路径，焦点为成功路径

柱状图 · Bar Chart

季度营收对比，可选颜色渐变或单色

环形图 · Donut Chart

营收结构拆解，支持 3–6 个分段

08 · Decision Lookup

## 决策速查

遇到“该用什么”时先看这张表，不在表里就回到基础原则。

要做什么 | 怎么做
--- | ---
大标题 | serif `500`，字号按层级，line-height `1.10–1.30`
正文阅读 | sans `400`，`9.5–10 pt`，line-height `1.55`
强调一个数字 | `color: var(--brand)`，不要粗体
分隔两段内容 | `2.5pt` 品牌色左侧竖线，或 `0.5pt` 暖灰虚线
引用某人的话 | 左 `2pt` 品牌色实线 + olive 色
展示代码 | ivory 底 + `0.5pt` border + `6pt` 圆角 + mono 字体
区分主次按钮 | Primary 品牌色填充 + ivory 字；Secondary warm-sand + charcoal
标注某张特殊卡片 | `border: 0.5pt solid var(--brand)` 或 `border-left: 3pt`
章节开始 | serif `500` · `15pt` · 纯字号层级，无额外装饰
文档封面 | 单页 Display 字号 + 右对齐作者/日期 + 大量留白
数据卡 | ivory 底 + `8pt` 圆角 + serif 大数字（油墨蓝） + sans 小标签

09 · Anti-Patterns

## 反面示例

破例可以，但理由要足够清楚。

##### Don't

页面背景用 `#ffffff` 纯白或 `#f3f4f6` 冷灰，会让版面变硬，也削弱 Kami 的暖米纸气质。

##### Do

始终使用 `#f5f4ed` parchment，打印时把 `@page background` 也设为同色，避免白边。

##### Don't

Tag 用 `rgba(201,100,66,0.18)`，WeasyPrint 会让 padding 区与字形区透明度叠加，形成双层矩形。

##### Do

查 tint 对照表，改用等效实色 `#E4ECF5`，颜色稳定，PDF 也干净。

##### Don't

标题用 `font-weight: 600` 或更粗的合成 bold，笔画容易变糊，版面也会显得粗重。

##### Do

正文 400，标题 500（真实 W05 字重）；需要更强存在感时，用字号或品牌色左侧竖线，不靠合成粗体。

##### Don't

box-shadow 硬投影 `0 2px 8px rgba(0,0,0,0.3)` 观感偏硬，印刷时也容易发黑。

##### Do

用 ring shadow (`0 0 0 1pt`)、whisper (`rgba 0.05`)，或直接用明暗交替建立层次。

10 · Background

## 设计缘起

我喜欢美股投资，经常让 Claude 写研究报告。每次出来的东西都是同一种默认文档的样子：灰扑扑的，结构不清晰，格式老旧，换个对话就换一套排版，没有一份让人想读下去。于是我开始一条一条地调字体、配色、间距，直到报告变成一份自己真正愿意看的页面。

后来要去做《你不知道的 Agent：原理、架构与工程实践》分享，手上已经有文档，不想再做 PPT，就用 Claude Design 按自己的设计风格来排版，反复调了很多轮，最后慢慢满意了。加入了 inline SVG 图表、统一暖色调、也收紧了编辑节奏，做着做着覆盖了我常用的文档场景，就把这个过程继续抽象了一下，成了现在的 kami：一套交给任何 agent 都能放心出活的安静设计系统。