Design System · v1.1.0 · 2026.04

Kami紙

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

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

00 · See it

输出样本

把文档需求交给 Claude。无论是一页纸、长文、正式信件、作品集、简历还是幻灯片，Kami 都用少量清晰规则，把提示词变成可交付的排版。同一份 brief 也能交给绘图模型，README 里附了样图和可复制的提示词。

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
页面背景 parchment #f5f4ed，不用纯白
2
强调色只有油墨蓝 #1B365D，不引入第二种彩色
3
所有灰色暖调 (yellow-brown undertone)，禁止冷蓝灰
4
英文 serif 通吃标题和正文，中文标题用 serif、正文用 sans
5
Serif 正文 400，标题 500，不用合成 bold
6
行距三档：紧凑标题 1.1–1.3 / 密排 1.4–1.45 / 阅读 1.5–1.55
7
Tag 背景必须实色 hex，禁止 rgba（WeasyPrint 双层矩形 bug）
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

DefaultTag 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 都能放心出活的安静设计系统。