Design System · v1.0 · 2026.04

Kami紙

好内容，值得好纸面。六种文档，一套设计语言: 暖米纸底，油墨蓝点缀，serif 主导层级，编辑级留白。

Canvas#f5f4ed Accent#1B365D SerifTsangerJinKai / Newsreader SansSource Han Sans / Inter

00 · See it

输出样本

用自然语言告诉 Claude 你要什么文档，它会用 kami 的设计语言直接生成。

One-Pager · 中文

Tesla 公司介绍，单页 A4

Slides · English

Agent keynote, 6 slides

Resume · English

Founder CV, 2 pages strict

Portfolio · 中文

Kaku 项目作品集，6 页

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

02 · Manifesto

设计宣言

暖米纸底，油墨蓝点缀，serif 承担权威，拒绝硬阴影与花哨配色。这不是一套 UI 框架，是一套印刷品的审美约束。它相信：高质量的文档读起来像文学，不像仪表盘。

1
页面背景 parchment #f5f4ed，不用纯白
2
强调色只有油墨蓝 #1B365D，不引入第二种彩色
3
所有灰色暖调 (yellow-brown undertone)，禁止冷蓝灰
4
英文: serif 通吃标题和正文。中文: 标题 serif，正文 sans
5
Serif 字重固定 500，不用 bold。单一字重是设计语言的一部分
6
行距三档：紧凑标题 1.1–1.3 / 密排 1.4–1.45 / 阅读 1.5–1.55。禁 1.6+
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 · section 竖线

#1B365D

Ink Light

深色底上的链接 · 亮变体

#2D5A8A

Dark Surface

深色主题容器 · 暖炭灰

#30302E

Error

错误，深暖红，不刺眼

#B53333

中性 · Warm Neutrals

Near Black

#141413

Dark Warm

#3D3D3A

Charcoal

#4D4C48

Olive

#5E5D59

Stone

#87867F

Warm Silver

#B0AEA5

Tag Tints · rgba → 实色对照

油墨蓝 #1B365D 叠加在 parchment 上的等效实色。禁止使用 rgba()，WeasyPrint 双层矩形 bug。

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 字重固定 500，单一字重是这套系统的签名式样。

紙 Aa

Serif · 标题

TsangerJinKai02 / Newsreader

承担所有标题、引语与数字强调。固定字重 500，不用 bold。中文首选仓耳今楷，英文首选 Newsreader。

文 Aa

Sans · 正文 / UI

Source Han Sans / Inter

正文、标签、按钮、metadata。默认 400，标签 / 标题用 500–600。Silicon Valley editorial stack。

</>

Mono · 代码

JetBrains Mono

代码块、版本号、hex 值、等宽数字。与 serif / sans 搭配时字号小一档。

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

Display

高质量文档读起来
像文学，不像仪表盘

36–48 pt
weight 500
line 1.10

H1 Section

色彩系统 · Color

18–22 pt
weight 500
line 1.20

H2 Subsection

画布 · Canvas

14–16 pt
weight 500
line 1.25

H3 Item

Tag Tints · rgba 对照

12–13 pt
weight 500
line 1.30

Body Lead

这不是一套 UI 框架，是一套印刷品的审美约束。每条铁律的 trade-off 都是"与其多一个选择，不如少一个诱惑"。

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.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

box-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 + 2.5pt 品牌色左侧竖线，留足呼吸间距

核心项目 · Selected Works

Dash List

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

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

Code Block

ivory 底 + 0.5pt border + 6pt 圆角

/* section title */
.section-title {
  font-family: serif;
  font-weight: 500;
  border-left: 2.5pt solid
    var(--brand);
  padding-left: 8pt;
}

Featured Card

whisper shadow + 16pt 圆角

Tesla 公司介绍 · One-Pager

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

中文 A4 × 1 Ink Blue

07 · 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 标题 + 左侧 `2.5pt` 品牌色竖线
文档封面	单页 Display 字号 + 右对齐作者/日期 + 大量留白
数据卡	ivory 底 + `8pt` 圆角 + serif 大数字（油墨蓝） + sans 小标签

08 · 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。Bug 消失，颜色一致。

Don't

标题用 font-weight: 700 bold。Serif 500 是这套系统的签名，bold 会让版面浮躁。

Do

Serif 固定 500。需要更强存在感用字号或品牌色左侧竖线，不加粗。

Don't

box-shadow 硬投影 0 2px 8px rgba(0,0,0,0.3)。冷硬、SaaS 感、印刷会发黑。

Do

Ring shadow (0 0 0 1pt) 或 whisper (rgba 0.05)，或直接明暗交替。

09 · Background

设计缘起

我做美股投资，经常让 AI 生成分析报告。每次出来的东西都像默认 Google Doc: 平淡、不一致、没有记忆点。我受不了丑的文档，尤其是每份报告的风格都不一样。所以我反复调字体、配色、间距，直到做出自己愿意读的东西。

后来受邀做一次演讲，需要一套和文档风格一致的 slides。这轮迭代又推进了一步: 加入 inline SVG 图表、统一暖色调、收紧编辑节奏。做着做着，发现这套东西已经覆盖了我所有的文档需求，就独立出来了。这就是 kami: 一套我喜欢的视觉语言，用在我发出去的所有东西上。