-
-
Notifications
You must be signed in to change notification settings - Fork 447
Expand file tree
/
Copy pathindex-zh.html
More file actions
732 lines (690 loc) · 44.8 KB
/
Copy pathindex-zh.html
File metadata and controls
732 lines (690 loc) · 44.8 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Kami 紙：面向 AI Agent 的文档设计系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Kami 紙：面向 AI 文档生成的温暖纸质感设计系统，以单一强调色、serif 层级与编辑级留白，收束成稳定的排版。">
<link rel="icon" href="assets/images/logo.svg" type="image/svg+xml">
<link rel="stylesheet" href="./styles.css">
<link rel="canonical" href="https://kami.tw93.fun/index-zh.html">
<link rel="alternate" hreflang="en" href="https://kami.tw93.fun/">
<link rel="alternate" hreflang="zh-CN" href="https://kami.tw93.fun/index-zh.html">
<link rel="alternate" hreflang="ja" href="https://kami.tw93.fun/index-ja.html">
<link rel="alternate" hreflang="zh-Hant" href="https://kami.tw93.fun/index-tw.html">
<link rel="alternate" hreflang="ko" href="https://kami.tw93.fun/index-ko.html">
<link rel="alternate" hreflang="x-default" href="https://kami.tw93.fun/">
<meta property="og:type" content="website">
<meta property="og:title" content="Kami 紙：面向 AI Agent 的文档设计系统">
<meta property="og:description" content="Kami 紙：面向 AI 文档生成的温暖纸质感设计系统，以单一强调色、serif 层级与编辑级留白，收束成稳定的排版。">
<meta property="og:url" content="https://kami.tw93.fun/index-zh.html">
<meta property="og:image" content="https://kami.tw93.fun/assets/showcase/kami-landing.png">
<meta property="og:image:width" content="3110">
<meta property="og:image:height" content="2392">
<meta property="og:locale" content="zh_CN">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Kami 紙：面向 AI Agent 的文档设计系统">
<meta name="twitter:description" content="Kami 紙：面向 AI 文档生成的温暖纸质感设计系统，以单一强调色、serif 层级与编辑级留白，收束成稳定的排版。">
<meta name="twitter:image" content="https://kami.tw93.fun/assets/showcase/kami-landing.png">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Kami",
"description": "面向 AI 文档生成的温暖纸质感设计系统，以单一强调色、serif 层级与编辑级留白，收束成稳定的排版。",
"url": "https://kami.tw93.fun/index-zh.html",
"applicationCategory": "DesignApplication",
"operatingSystem": "Any",
"author": {
"@type": "Person",
"name": "Tw93",
"url": "https://tw93.fun",
"sameAs": ["https://github.com/tw93", "https://twitter.com/HiTw93", "https://tw93.fun", "https://weekly.tw93.fun", "https://yobi.tw93.fun"]
},
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Kami 是什么？",
"acceptedAnswer": { "@type": "Answer", "text": "一个面向 AI agent 的文档设计系统。一种强调色、衬线层级、暖色羊皮纸画布。给任何 LLM agent 一段描述，就能得到稳定的排版输出。也可以作为视觉设计简报给到图像渲染工具。" }
},
{
"@type": "Question",
"name": "Kami 能生成什么？",
"acceptedAnswer": { "@type": "Answer", "text": "八种文档模板：一页纸、长文档、信件、作品集、简历、幻灯片、个股研报、更新日志，外加一套落地页系统（中、英、韩文）。另有 18 种内联 SVG 图表。输出为 HTML，可导出为 PDF、PNG 或可编辑的 PPTX 幻灯片。" }
},
{
"@type": "Question",
"name": "怎么安装 Kami？",
"acceptedAnswer": { "@type": "Answer", "text": "Claude Code（v2.1.142+）：/plugin marketplace add tw93/kami && /plugin install kami@kami。Codex 插件市场：codex plugin marketplace add tw93/kami && codex plugin add kami@kami。读取 ~/.agents 的通用 agent：npx skills add tw93/kami/plugins/kami -a universal -g -y。Claude Desktop：从 GitHub Releases 下载 release asset kami.zip，不要下载 Source code 压缩包，然后在 Skills 设置中上传即可。" }
},
{
"@type": "Question",
"name": "Kami 支持哪些语言？",
"acceptedAnswer": { "@type": "Answer", "text": "英文、中文、日文、韩文。每种语言使用专属衬线字体：英文 Charter，中文 TsangerJinKai02，日文 YuMincho，韩文 Source Han Serif K。" }
}
]
}
</script>
</head>
<body>
<main class="page">
<!-- ============ HERO ============ -->
<header class="hero">
<div class="eyebrow">
<span>Design System · v1.9.3<span class="eyebrow-date"> · 2026.07</span></span>
<span class="hero-links">
<nav class="lang-switch" aria-label="Language" data-lang-switch>
<button class="lang-trigger" type="button" aria-expanded="false" data-lang-trigger>简体中文</button>
<div class="lang-menu" data-lang-menu>
<a href="./index.html" data-lang="en">English</a>
<a href="./index-zh.html" class="active" data-lang="zh">简体中文</a>
<a href="./index-tw.html" data-lang="tw">繁體中文</a>
<a href="./index-ja.html" data-lang="ja">日本語</a>
<a href="./index-ko.html" data-lang="ko">한국어</a>
</div>
</nav>
<a href="https://github.com/tw93/kami" target="_blank" rel="noopener" aria-label="GitHub">
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0016 8c0-4.42-3.58-8-8-8z"/>
</svg>
</a>
<a href="https://x.com/HiTw93" target="_blank" rel="noopener" aria-label="X">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
</a>
</span>
</div>
<h1>Kami<span class="cn">紙</span></h1>
<p class="tagline">好内容，值得好版面。Kami 是一套适合 AI 时代的排版设计系统，让文档更清晰好读，也容易记住。</p>
<div class="hero-tokens">
<span><b>Canvas</b>#f5f4ed</span>
<span><b>Accent</b>#1B365D</span>
<span><b>Serif</b>TsangerJinKai / Charter</span>
<span><b>Sans</b>= Serif (一页一字体)</span>
</div>
</header>
<!-- ============ 00 DEMOS ============ -->
<section>
<div class="section-head">
<p class="section-num">00 · See it</p>
<h2 class="section-title">输出样本</h2>
<p class="section-lede">把文档需求交给 Claude。无论是一页纸、长文、正式信件、作品集、简历还是幻灯片，Kami 都用少量清晰规则，把提示词变成可交付的排版。同一份 brief 也能 <a href="https://github.com/tw93/kami#beyond-documents" style="color:var(--brand); text-decoration:none; font-weight:500;">交给绘图模型</a>，README 里附了样图和可复制的提示词。</p>
</div>
<div class="demo-grid">
<div class="demo-card">
<a href="assets/demos/demo-tesla.pdf" target="_blank"><img src="assets/demos/demo-tesla.png" alt="Tesla Q1 2026 财报点评" loading="lazy" decoding="async"></a>
<p class="demo-title">Equity Report · 中文</p>
<p class="demo-desc">Tesla Q1 2026 财报点评</p>
</div>
<div class="demo-card">
<a href="assets/demos/demo-musk-resume.pdf" target="_blank"><img src="assets/demos/demo-musk-resume.png" alt="Musk resume" loading="lazy" decoding="async"></a>
<p class="demo-title">Resume · English</p>
<p class="demo-desc">创始人简历，2 页</p>
</div>
<div class="demo-card">
<a href="assets/demos/demo-kami-print.pdf" target="_blank"><img src="assets/demos/demo-kami-print.png" alt="Kami 打印一页纸" loading="lazy" decoding="async"></a>
<p class="demo-title">一页纸 · 中文</p>
<p class="demo-desc">Kami 介绍，白底打印版，1 页</p>
</div>
<div class="demo-card">
<a href="assets/demos/demo-agent-slides.pdf" target="_blank"><img src="assets/demos/demo-agent-slides.png" alt="Agent slides" loading="lazy" decoding="async"></a>
<p class="demo-title">Slides · English</p>
<p class="demo-desc">Agent keynote, 6 slides</p>
</div>
</div>
</section>
<!-- ============ LANDING PAGES ============ -->
<section>
<div class="section-head">
<p class="section-num">Landing Pages</p>
<h2 class="section-title">用 Kami 搭建</h2>
<p class="section-lede">同一套落地页模板用于三款不同产品，一组约束规则，三种截然不同的用途。</p>
</div>
<div class="landing-grid">
<div class="landing-card">
<a href="https://kami.tw93.fun" target="_blank" rel="noopener"><img src="assets/showcase/kami-landing.png" alt="Kami 官网" loading="lazy" decoding="async"></a>
<p class="demo-title">Kami</p>
<p class="demo-desc">设计系统主页</p>
</div>
<div class="landing-card">
<a href="https://luo.tw93.fun" target="_blank" rel="noopener"><img src="assets/showcase/luo-landing.png" alt="Luo 落文官网" loading="lazy" decoding="async"></a>
<p class="demo-title">Luo 落文</p>
<p class="demo-desc">CJK 阅读字体</p>
</div>
<div class="landing-card">
<a href="https://mole.fit" target="_blank" rel="noopener"><img src="assets/showcase/mole-landing.png" alt="Mole 官网" loading="lazy" decoding="async"></a>
<p class="demo-title">Mole 鼹</p>
<p class="demo-desc">macOS 系统工具</p>
</div>
</div>
</section>
<!-- ============ 01 INSTALL ============ -->
<section>
<div class="section-head">
<p class="section-num">01 · Usage</p>
<h2 class="section-title">安装与调用</h2>
<p class="section-lede">直接告诉 Claude 你要什么，比如「帮我排版一份白皮书」「做一份简历」「帮我做一份作品集」，skill 会自动触发，无需斜杠命令。</p>
</div>
<pre class="code"><span class="c"># Claude Code (v2.1.142+)</span>
/plugin marketplace add tw93/kami
/plugin install kami@kami
<span class="c"># Codex plugin marketplace</span>
codex plugin marketplace add tw93/kami
codex plugin add kami@kami</pre>
<p class="section-lede" style="font-size:14px;">读取 <code>~/.agents/</code> 的通用 agent：<code>npx skills add tw93/kami/plugins/kami -a universal -g -y</code>。这个 plugin 路径暴露生成好的轻量 skill 包；直接用 <code>tw93/kami</code> 只会装到 SKILL.md。</p>
<p class="section-lede" style="font-size:14px;">Claude Desktop：下载 release asset <a href="https://github.com/tw93/kami/releases/latest/download/kami.zip" style="color:var(--brand); text-decoration:none; font-weight:500;">kami.zip</a>，不要下载 GitHub 的 Source code 压缩包，然后在 Customize > Skills > "+" > Create skill 中直接上传。</p>
</section>
<!-- ============ 02 MANIFESTO ============ -->
<section>
<div class="section-head">
<p class="section-num">02 · Manifesto</p>
<h2 class="section-title">设计原则</h2>
</div>
<p class="manifesto">暖米纸底，<em>油墨蓝</em>点缀，serif 承担层级，硬阴影与花哨配色都退后；这套系统面向印刷文档，负责把内容收束成稳定、清晰、易读的版面。羊皮纸底为默认，另有可选的白底版本，把任意文档切到白底以适配打印机，暖意则沉入卡片与表格。</p>
<ol class="rules">
<li><span class="n">1</span><p>页面背景 parchment <code>#f5f4ed</code>，不用纯白</p></li>
<li><span class="n">2</span><p>强调色只有油墨蓝 <code>#1B365D</code>，不引入第二种彩色</p></li>
<li><span class="n">3</span><p>所有灰色暖调 (yellow-brown undertone)，禁止冷蓝灰</p></li>
<li><span class="n">4</span><p>英文 serif 通吃标题和正文，中文标题用 serif、正文用 sans</p></li>
<li><span class="n">5</span><p>Serif 正文 400，标题 500，不用合成 bold</p></li>
<li><span class="n">6</span><p>行距三档：紧凑标题 1.1–1.3 / 密排 1.4–1.45 / 阅读 1.5–1.55</p></li>
<li><span class="n">7</span><p>Tag 背景必须实色 hex，禁止 rgba（WeasyPrint 双层矩形 bug）</p></li>
<li><span class="n">8</span><p>阴影只用 ring 或 whisper shadow，不用硬 drop shadow</p></li>
</ol>
</section>
<!-- ============ 03 COLOR ============ -->
<section>
<div class="section-head">
<p class="section-num">03 · Color</p>
<h2 class="section-title">暖调克制</h2>
<p class="section-lede">唯一强调色、纯暖调中性灰、零冷色；油墨蓝全文档不超过 <b>5%</b> 面积，超过就从克制变成堆砌。</p>
</div>
<h3 class="subhead">画布 · Canvas</h3>
<div class="swatches">
<div class="swatch"><div class="chip" style="background:#f5f4ed"></div><div class="info"><p class="name">Parchment</p><p class="role">页面底色，也是整套设计的温度来源</p><span class="hex">#F5F4ED</span></div></div>
<div class="swatch"><div class="chip" style="background:#faf9f5"></div><div class="info"><p class="name">Ivory</p><p class="role">卡片 · 浮起容器</p><span class="hex">#FAF9F5</span></div></div>
<div class="swatch"><div class="chip" style="background:#e8e6dc"></div><div class="info"><p class="name">Warm Sand</p><p class="role">按钮默认背景 · 交互面</p><span class="hex">#E8E6DC</span></div></div>
<div class="swatch dark"><div class="chip" style="background:#141413"></div><div class="info"><p class="name" style="color:var(--deep-dark)">Deep Dark</p><p class="role">深色主题页面底，不取纯黑，保留一点橄榄底色</p><span class="hex">#141413</span></div></div>
</div>
<h3 class="subhead">主调 · Brand</h3>
<div class="swatches">
<div class="swatch brand"><div class="chip" style="background:#1B365D"></div><div class="info"><p class="name">Ink Blue</p><p class="role">主色 · CTA · quote 竖线 · 章节标题</p><span class="hex">#1B365D</span></div></div>
<div class="swatch"><div class="chip" style="background:#2D5A8A"></div><div class="info"><p class="name">Ink Light</p><p class="role">深色底上的链接 · 亮变体</p><span class="hex">#2D5A8A</span></div></div>
<div class="swatch"><div class="chip" style="background:#30302e"></div><div class="info"><p class="name" style="color:var(--deep-dark)">Dark Surface</p><p class="role">深色主题容器 · 暖炭灰</p><span class="hex">#30302E</span></div></div>
<div class="swatch"><div class="chip" style="background:#b53333"></div><div class="info"><p class="name">Error</p><p class="role">错误，深暖红，不刺眼</p><span class="hex">#B53333</span></div></div>
</div>
<h3 class="subhead">中性 · Warm Neutrals</h3>
<div class="swatches" style="grid-template-columns: repeat(4, 1fr);">
<div class="swatch"><div class="chip" style="background:#141413"></div><div class="info"><p class="name">Near Black</p><span class="hex">#141413</span></div></div>
<div class="swatch"><div class="chip" style="background:#3d3d3a"></div><div class="info"><p class="name">Dark Warm</p><span class="hex">#3D3D3A</span></div></div>
<div class="swatch"><div class="chip" style="background:#504e49"></div><div class="info"><p class="name">Olive</p><span class="hex">#504e49</span></div></div>
<div class="swatch"><div class="chip" style="background:#6b6a64"></div><div class="info"><p class="name">Stone</p><span class="hex">#6b6a64</span></div></div>
</div>
<h3 class="subhead">Tag Tints · rgba → 实色对照</h3>
<p style="font-size:14px; color: var(--olive); margin: 0 0 16px; line-height: 1.55;">这里列的是油墨蓝 <code style="font-family:var(--mono);font-size:12px;background:#EEF2F7;color:var(--brand);padding:1px 5px;border-radius:2px">#1B365D</code> 叠加在 parchment 上的等效实色；Tag 背景不使用 <code style="font-family:var(--mono);font-size:12px;background:#EEF2F7;color:var(--brand);padding:1px 5px;border-radius:2px">rgba()</code>，避免 WeasyPrint 的双层矩形问题。</p>
<div class="tint-strip">
<div class="tint"><span class="flag"> </span><span class="sample" style="background:#EEF2F7">Tag sample</span><p class="opacity">0.08</p><span class="hex">#EEF2F7</span></div>
<div class="tint"><span class="flag"> </span><span class="sample" style="background:#E4ECF5">Tag sample</span><p class="opacity">0.14</p><span class="hex">#E4ECF5</span></div>
<div class="tint default"><span class="flag">Default</span><span class="sample" style="background:#E4ECF5">Tag sample</span><p class="opacity">0.18</p><span class="hex">#E4ECF5</span></div>
<div class="tint"><span class="flag"> </span><span class="sample" style="background:#D0DCE9">Tag sample</span><p class="opacity">0.22</p><span class="hex">#D0DCE9</span></div>
<div class="tint"><span class="flag"> </span><span class="sample" style="background:#D6E1EE">Tag sample</span><p class="opacity">0.30</p><span class="hex">#D6E1EE</span></div>
</div>
</section>
<!-- ============ 04 TYPE ============ -->
<section>
<div class="section-head">
<p class="section-num">04 · Typography</p>
<h2 class="section-title">字体系统</h2>
<p class="section-lede">Serif 承担层级，sans 承担功能；serif 正文 400，标题 500。</p>
</div>
<div class="family-grid">
<div class="family serif">
<p class="glyph">紙 Aa</p>
<p class="role">Serif · 标题</p>
<p class="name">TsangerJinKai02 / Charter</p>
<p class="use">承担标题、引语与数字强调，中文取仓耳今楷，英文取 Charter。</p>
</div>
<div class="family mono">
<p class="glyph"></></p>
<p class="role">Mono · 代码</p>
<p class="name">JetBrains Mono</p>
<p class="use">用于代码块、版本号、hex 值与等宽数字，字号较正文低一档。</p>
</div>
</div>
<h3 class="subhead">层级（印刷品 pt · 屏幕 px ≈ pt × 1.33）</h3>
<div class="type-grid">
<div class="type-row">
<div class="type-label">Display</div>
<div class="type-sample display">高质量文档读起来<br>清晰、稳定、有余韵</div>
<div class="type-specs"><b>36–48 pt</b><br>weight 500<br>line 1.10</div>
</div>
<div class="type-row">
<div class="type-label">Section H1</div>
<div class="type-sample h1">色彩系统 · Color</div>
<div class="type-specs"><b>18–22 pt</b><br>weight 500<br>line 1.20</div>
</div>
<div class="type-row">
<div class="type-label">Subsection H2</div>
<div class="type-sample h2">画布 · Canvas</div>
<div class="type-specs"><b>14–16 pt</b><br>weight 500<br>line 1.25</div>
</div>
<div class="type-row">
<div class="type-label">Item H3</div>
<div class="type-sample h3">Tag Tints · rgba 对照</div>
<div class="type-specs"><b>12–13 pt</b><br>weight 500<br>line 1.30</div>
</div>
<div class="type-row">
<div class="type-label">Body Lead</div>
<div class="type-sample lede">面向印刷文档的约束系统，目标是稳定、清晰、易读。</div>
<div class="type-specs"><b>11 pt</b><br>weight 400<br>line 1.55</div>
</div>
<div class="type-row">
<div class="type-label">Body</div>
<div class="type-sample body">油墨蓝全文档不超过 5% 面积，超过就从克制变成堆砌；所有灰色都有暖黄底色，R ≈ G > B 是基本规律。</div>
<div class="type-specs"><b>9.5–10 pt</b><br>weight 400<br>line 1.55</div>
</div>
<div class="type-row">
<div class="type-label">Body Dense</div>
<div class="type-sample dense">密排正文用于简历、一页纸、名片、索引卡，中文 pt 字号下 1.4–1.45 的行距最舒服，英文网页的 1.6 放进来会显得松散。</div>
<div class="type-specs"><b>9–9.2 pt</b><br>weight 400<br>line 1.40</div>
</div>
<div class="type-row">
<div class="type-label">Caption</div>
<div class="type-sample caption">图注、脚注、说明文字，颜色用 olive 或 stone 降一级。</div>
<div class="type-specs"><b>8.5–9 pt</b><br>weight 400<br>line 1.45</div>
</div>
<div class="type-row">
<div class="type-label">Label</div>
<div class="type-sample label">Design System · v1.9.3</div>
<div class="type-specs"><b>7.5–8 pt</b><br>weight 600<br>line 1.35</div>
</div>
</div>
</section>
<!-- ============ 05 SPACING ============ -->
<section>
<div class="section-head">
<p class="section-num">05 · Spacing & Shape</p>
<h2 class="section-title">节奏与形</h2>
<p class="section-lede">基础单位 4pt，密度越高 margin 越小，场合越正式 margin 越大。</p>
</div>
<table class="space-table">
<tr>
<th>Scale</th><th>Value</th><th>Use</th><th></th>
</tr>
<tr><td class="name">xs</td><td class="val">2–3 pt</td><td class="use">同行内元素</td><td class="bar"><span style="width:6px"></span></td></tr>
<tr><td class="name">sm</td><td class="val">4–5 pt</td><td class="use">tag padding · 紧凑布局</td><td class="bar"><span style="width:12px"></span></td></tr>
<tr><td class="name">md</td><td class="val">8–10 pt</td><td class="use">组件内部</td><td class="bar"><span style="width:24px"></span></td></tr>
<tr><td class="name">lg</td><td class="val">16–20 pt</td><td class="use">组件之间 · 卡片 padding</td><td class="bar"><span style="width:48px"></span></td></tr>
<tr><td class="name">xl</td><td class="val">24–32 pt</td><td class="use">section 标题 margin</td><td class="bar"><span style="width:72px"></span></td></tr>
<tr><td class="name">2xl</td><td class="val">40–60 pt</td><td class="use">大 section 之间</td><td class="bar"><span style="width:140px"></span></td></tr>
<tr><td class="name">3xl</td><td class="val">80–120 pt</td><td class="use">长文档章节之间</td><td class="bar"><span style="width:240px"></span></td></tr>
</table>
<h3 class="subhead">圆角尺度 · Radii</h3>
<div class="radii">
<div class="radius"><div class="box" style="border-radius:4px"></div><div class="r"><b>4</b> pt</div><div class="label">极紧</div></div>
<div class="radius"><div class="box" style="border-radius:6px"></div><div class="r"><b>6</b> pt</div><div class="label">代码块</div></div>
<div class="radius"><div class="box" style="border-radius:8px"></div><div class="r"><b>8</b> pt</div><div class="label">默认卡片</div></div>
<div class="radius"><div class="box" style="border-radius:12px"></div><div class="r"><b>12</b> pt</div><div class="label">容器</div></div>
<div class="radius"><div class="box" style="border-radius:16px"></div><div class="r"><b>16</b> pt</div><div class="label">特色卡片</div></div>
<div class="radius"><div class="box" style="border-radius:24px"></div><div class="r"><b>24</b> pt</div><div class="label">大容器</div></div>
<div class="radius"><div class="box" style="border-radius:32px"></div><div class="r"><b>32</b> pt</div><div class="label">Hero</div></div>
</div>
<h3 class="subhead">深度 · 阴影三法</h3>
<p style="font-size:14px; color: var(--olive); margin: 0 0 12px; line-height: 1.55;">Kami 不用传统硬阴影，深度交给 ring shadow、whisper shadow 与明暗交替。</p>
<div class="shadow-row">
<div class="shadow-demo sd-ring">
<p class="t">Ring Shadow</p>
<p class="s">0 0 0 1pt var(--ring-warm)<br> <br>按钮 · 卡片 hover</p>
</div>
<div class="shadow-demo sd-whisper">
<p class="t">Whisper Shadow</p>
<p class="s">0 4pt 24pt rgba(0,0,0,0.05)<br> <br>极轻浮起 · 特色卡</p>
</div>
<div class="shadow-demo sd-alt">
<p class="t">Light ⇌ Dark</p>
<p class="s">parchment ⇌ deep-dark<br> <br>section 级别 · 对比最明显</p>
</div>
</div>
</section>
<!-- ============ 06 COMPONENTS ============ -->
<section>
<div class="section-head">
<p class="section-num">06 · Components</p>
<h2 class="section-title">原子组件</h2>
<p class="section-lede">组件不求多，只保留能解决具体问题的一组。</p>
</div>
<div class="comp-grid">
<div class="comp">
<h3>Buttons</h3>
<p class="hint">ring shadow 替代硬投影 · 8pt 圆角</p>
<div class="demo" style="display:flex; gap:10px; flex-wrap:wrap;">
<span class="btn btn-primary">Primary CTA</span>
<span class="btn btn-secondary">Secondary</span>
<span class="btn btn-ghost">Ghost</span>
</div>
</div>
<div class="comp">
<h3>Tags · 三档</h3>
<p class="hint">实色 hex · 从弱到强选</p>
<div class="demo" style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
<span class="tag calm">极淡 0.08</span>
<span class="tag standard">标准 0.18</span>
<span class="tag brush">笔刷渐变</span>
</div>
</div>
<div class="comp">
<h3>Quote</h3>
<p class="hint">左 2pt 品牌实线 + olive 色</p>
<blockquote class="quote">一千个 no 换一个 yes，宁可清淡，不可浓艳。</blockquote>
</div>
<div class="comp">
<h3>Metric</h3>
<p class="hint">serif 数字 + sans 标签 · tabular-nums</p>
<div class="metrics demo">
<div class="metric"><span class="metric-value">6</span><span class="metric-label">文档类型</span></div>
<div class="metric"><span class="metric-value">1</span><span class="metric-label">强调色</span></div>
<div class="metric"><span class="metric-value">8</span><span class="metric-label">条规则</span></div>
</div>
</div>
<div class="comp">
<h3>Section Title</h3>
<p class="hint">serif 500 · 15pt · 纯字号层级，无装饰</p>
<div class="demo">
<span class="sample-section-title">核心项目 · Selected Works</span>
</div>
</div>
<div class="comp">
<h3>Dash List</h3>
<p class="hint">短横线代替圆点 · 更书卷气</p>
<ul class="dash demo">
<li>暖米纸底，不用纯白</li>
<li>油墨蓝点缀，不引第二色</li>
<li>Serif 承担权威</li>
</ul>
</div>
<div class="comp">
<h3>Code Block</h3>
<p class="hint">ivory 底 + 0.5pt border + 6pt 圆角 + mono 字体</p>
<pre class="code"><span class="c">// 暖米纸 · 一种克制的温度</span>
canvas = parchment; accent = <span class="k">ink_blue</span>
palette = <span class="k">warm_neutrals</span> − cool_grays
document = <span class="k">serif</span> × hierarchy + generous_space
beauty = constraints × <span class="k">intention</span> ÷ noise</pre>
</div>
<div class="comp">
<h3>Featured Card</h3>
<p class="hint">whisper shadow + 16pt 圆角</p>
<div class="demo" style="background:var(--ivory); border-radius:16px; padding:18px 20px; box-shadow: 0 4px 24px rgba(0,0,0,0.05); border: 1px solid var(--border-cream);">
<p style="font-family:var(--serif); font-weight:500; font-size:15px; margin:0 0 6px; color:var(--near-black);">Tesla 公司介绍 · One-Pager</p>
<p style="font-size:12px; color:var(--olive); margin:0 0 10px; line-height:1.5;">单页 A4 · 中文版 · 4 张指标卡 + 3 段正文 + 时间线</p>
<div style="display:flex; gap:8px; flex-wrap:wrap;">
<span class="tag calm">中文</span>
<span class="tag calm">A4 × 1</span>
<span class="tag calm">Ink Blue</span>
</div>
</div>
</div>
</div>
</section>
<!-- ============ 07 DIAGRAMS ============ -->
<section>
<div class="section-head">
<p class="section-num">07 · Diagrams</p>
<h2 class="section-title">内联图表</h2>
<p class="section-lede">十八种内联 SVG 图表，覆盖架构、流程、数据三大场景。直接告诉 Claude 需要哪种图，会自动嵌入文档，配色与字体沿用 Kami 设计语言。</p>
</div>
<div class="chart-showcase">
<!-- Architecture mini -->
<div class="chart-card">
<div class="chart-label">架构图 · Architecture</div>
<svg viewBox="0 0 280 160" xmlns="http://www.w3.org/2000/svg" style="font-family:inherit">
<rect width="280" height="160" fill="#f5f4ed"/>
<!-- Browser → API -->
<path d="M 84,79.5 L 103,79.5 L 103,78 L 107,80 L 103,82 L 103,80.5 L 84,80.5 Z" fill="#6b6a64"/>
<!-- API → Database -->
<path d="M 172,79.5 L 191,79.5 L 191,78 L 195,80 L 191,82 L 191,80.5 L 172,80.5 Z" fill="#504e49"/>
<!-- Node: Client -->
<rect x="20" y="58" width="64" height="44" rx="3" fill="#f5f4ed" stroke="#6b6a64" stroke-width="0.8"/>
<text x="52" y="76" text-anchor="middle" font-size="7" letter-spacing="0.5" fill="#6b6a64">CLIENT</text>
<text x="52" y="91" text-anchor="middle" font-size="9" font-weight="600" fill="#141413">Browser</text>
<!-- Node: API (focal) -->
<rect x="108" y="58" width="64" height="44" rx="3" fill="#EEF2F7" stroke="#1B365D" stroke-width="1"/>
<text x="140" y="76" text-anchor="middle" font-size="7" letter-spacing="0.5" fill="#1B365D">SERVICE</text>
<text x="140" y="91" text-anchor="middle" font-size="9" font-weight="600" fill="#141413">API</text>
<!-- Node: Database -->
<rect x="196" y="58" width="64" height="44" rx="3" fill="#f5f4ed" stroke="#504e49" stroke-width="0.8"/>
<text x="228" y="76" text-anchor="middle" font-size="7" letter-spacing="0.5" fill="#6b6a64">DATA</text>
<text x="228" y="91" text-anchor="middle" font-size="9" font-weight="600" fill="#141413">Database</text>
</svg>
<p class="chart-caption">系统组件与连接关系，一个焦点节点</p>
</div>
<!-- Flowchart mini -->
<div class="chart-card">
<div class="chart-label">流程图 · Flowchart</div>
<svg viewBox="0 0 280 160" xmlns="http://www.w3.org/2000/svg" style="font-family:inherit">
<rect width="280" height="160" fill="#f5f4ed"/>
<!-- Start pill -->
<rect x="100" y="8" width="80" height="28" rx="14" fill="#141413"/>
<text x="140" y="25" text-anchor="middle" font-size="9" fill="#f5f4ed">Start</text>
<!-- Start → diamond (arrow down) -->
<path d="M 139.5,36 L 139.5,48 L 138,48 L 140,52 L 142,48 L 140.5,48 L 140.5,36 Z" fill="#504e49"/>
<!-- Decision diamond -->
<polygon points="140,52 172,72 140,92 108,72" fill="#f5f4ed" stroke="#141413" stroke-width="1"/>
<text x="140" y="76" text-anchor="middle" font-size="8" fill="#141413">Valid?</text>
<!-- Yes arrow right -->
<path d="M 172,71.5 L 204,71.5 L 204,70 L 208,72 L 204,74 L 204,72.5 L 172,72.5 Z" fill="#1B365D"/>
<text x="186" y="68" text-anchor="middle" font-size="8" fill="#1B365D">Yes</text>
<!-- Success node (focal) -->
<rect x="208" y="56" width="64" height="32" rx="4" fill="#EEF2F7" stroke="#1B365D" stroke-width="1"/>
<text x="240" y="75" text-anchor="middle" font-size="9" fill="#141413">Process</text>
<!-- No arrow down -->
<path d="M 139.5,92 L 139.5,112 L 138,112 L 140,116 L 142,112 L 140.5,112 L 140.5,92 Z" fill="#504e49"/>
<text x="151" y="106" font-size="8" fill="#504e49">No</text>
<!-- Reject node -->
<rect x="96" y="116" width="88" height="32" rx="4" fill="#f5f4ed" stroke="#6b6a64" stroke-width="0.8"/>
<text x="140" y="134" text-anchor="middle" font-size="9" fill="#504e49">Reject</text>
</svg>
<p class="chart-caption">决策分支，Yes / No 路径，焦点为成功路径</p>
</div>
<!-- Bar chart (shifted left) -->
<div class="chart-card">
<div class="chart-label">柱状图 · Bar Chart</div>
<svg viewBox="0 0 280 160" xmlns="http://www.w3.org/2000/svg" style="font-family:inherit">
<rect width="280" height="160" fill="#f5f4ed"/>
<rect x="18" y="78" width="42" height="50" rx="3" fill="#6b6a64"/>
<rect x="78" y="62" width="42" height="66" rx="3" fill="#504e49"/>
<rect x="138" y="44" width="42" height="84" rx="3" fill="#2d4e7a"/>
<rect x="198" y="30" width="42" height="98" rx="3" fill="#1B365D"/>
<text x="39" y="145" text-anchor="middle" font-size="10" fill="#6b6a64">Q1</text>
<text x="99" y="145" text-anchor="middle" font-size="10" fill="#504e49">Q2</text>
<text x="159" y="145" text-anchor="middle" font-size="10" fill="#4d4c48">Q3</text>
<text x="219" y="145" text-anchor="middle" font-size="10" fill="#4d4c48">Q4</text>
<text x="39" y="73" text-anchor="middle" font-size="9" font-weight="600" fill="#6b6a64">180</text>
<text x="99" y="57" text-anchor="middle" font-size="9" font-weight="600" fill="#504e49">220</text>
<text x="159" y="39" text-anchor="middle" font-size="9" font-weight="600" fill="#2d4e7a">195</text>
<text x="219" y="25" text-anchor="middle" font-size="9" font-weight="600" fill="#1B365D">240</text>
</svg>
<p class="chart-caption">季度营收对比，可选颜色渐变或单色</p>
</div>
<!-- Donut chart -->
<div class="chart-card">
<div class="chart-label">环形图 · Donut Chart</div>
<svg viewBox="0 0 280 160" xmlns="http://www.w3.org/2000/svg" style="font-family:inherit">
<rect width="280" height="160" fill="#f5f4ed"/>
<path d="M 80,25 A 55,55 0 1,1 47.7,124.5 L 62.4,104.3 A 30,30 0 1,0 80,50 Z" fill="#1B365D" stroke="white" stroke-width="1.5"/>
<path d="M 47.7,124.5 A 55,55 0 0,1 35.5,47.7 L 55.7,62.4 A 30,30 0 0,0 62.4,104.3 Z" fill="#504e49" stroke="white" stroke-width="1.5"/>
<path d="M 35.5,47.7 A 55,55 0 0,1 80,25 L 80,50 A 30,30 0 0,0 55.7,62.4 Z" fill="#6b6a64" stroke="white" stroke-width="1.5"/>
<text x="80" y="77" text-anchor="middle" font-size="13" font-weight="600" fill="#1B365D">60%</text>
<text x="80" y="92" text-anchor="middle" font-size="10" fill="#504e49">主营</text>
<rect x="150" y="46" width="10" height="10" rx="2" fill="#1B365D"/>
<text x="165" y="55" font-size="11" fill="#4d4c48">主营业务 · 60%</text>
<rect x="150" y="72" width="10" height="10" rx="2" fill="#504e49"/>
<text x="165" y="81" font-size="11" fill="#4d4c48">服务收入 · 25%</text>
<rect x="150" y="98" width="10" height="10" rx="2" fill="#6b6a64"/>
<text x="165" y="107" font-size="11" fill="#4d4c48">其他来源 · 15%</text>
</svg>
<p class="chart-caption">营收结构拆解，支持 3–6 个分段</p>
</div>
</div>
</section>
<!-- ============ 08 DECISION TABLE ============ -->
<section>
<div class="section-head">
<p class="section-num">08 · Decision Lookup</p>
<h2 class="section-title">决策速查</h2>
<p class="section-lede">遇到“该用什么”时先看这张表，不在表里就回到基础原则。</p>
</div>
<table class="decision">
<tr><th>要做什么</th><th>怎么做</th></tr>
<tr><td class="task">大标题</td><td class="how">serif <code>500</code>，字号按层级，line-height <code>1.10–1.30</code></td></tr>
<tr><td class="task">正文阅读</td><td class="how">sans <code>400</code>，<code>9.5–10 pt</code>，line-height <code>1.55</code></td></tr>
<tr><td class="task">强调一个数字</td><td class="how"><code>color: var(--brand)</code>，不要粗体</td></tr>
<tr><td class="task">分隔两段内容</td><td class="how"><code>2.5pt</code> 品牌色左侧竖线，或 <code>0.5pt</code> 暖灰虚线</td></tr>
<tr><td class="task">引用某人的话</td><td class="how">左 <code>2pt</code> 品牌色实线 + olive 色</td></tr>
<tr><td class="task">展示代码</td><td class="how">ivory 底 + <code>0.5pt</code> border + <code>6pt</code> 圆角 + mono 字体</td></tr>
<tr><td class="task">区分主次按钮</td><td class="how">Primary 品牌色填充 + ivory 字；Secondary warm-sand + charcoal</td></tr>
<tr><td class="task">标注某张特殊卡片</td><td class="how"><code>border: 0.5pt solid var(--brand)</code> 或 <code>border-left: 3pt</code></td></tr>
<tr><td class="task">章节开始</td><td class="how">serif <code>500</code> · <code>15pt</code> · 纯字号层级，无额外装饰</td></tr>
<tr><td class="task">文档封面</td><td class="how">单页 Display 字号 + 右对齐作者/日期 + 大量留白</td></tr>
<tr><td class="task">数据卡</td><td class="how">ivory 底 + <code>8pt</code> 圆角 + serif 大数字（油墨蓝） + sans 小标签</td></tr>
</table>
</section>
<!-- ============ 09 ANTI ============ -->
<section>
<div class="section-head">
<p class="section-num">09 · Anti-Patterns</p>
<h2 class="section-title">反面示例</h2>
<p class="section-lede">破例可以，但理由要足够清楚。</p>
</div>
<div class="anti">
<div class="no">
<h3>Don't</h3>
<p>页面背景用 <code>#ffffff</code> 纯白或 <code>#f3f4f6</code> 冷灰，会让版面变硬，也削弱 Kami 的暖米纸气质。</p>
</div>
<div class="yes">
<h3>Do</h3>
<p>始终使用 <code>#f5f4ed</code> parchment，打印时把 <code>@page background</code> 也设为同色，避免白边。</p>
</div>
<div class="no">
<h3>Don't</h3>
<p>Tag 用 <code>rgba(201,100,66,0.18)</code>，WeasyPrint 会让 padding 区与字形区透明度叠加，形成双层矩形。</p>
</div>
<div class="yes">
<h3>Do</h3>
<p>查 tint 对照表，改用等效实色 <code>#E4ECF5</code>，颜色稳定，PDF 也干净。</p>
</div>
<div class="no">
<h3>Don't</h3>
<p>标题用 <code>font-weight: 600</code> 或更粗的合成 bold，笔画容易变糊，版面也会显得粗重。</p>
</div>
<div class="yes">
<h3>Do</h3>
<p>正文 400，标题 500（真实 W05 字重）；需要更强存在感时，用字号或品牌色左侧竖线，不靠合成粗体。</p>
</div>
<div class="no">
<h3>Don't</h3>
<p>box-shadow 硬投影 <code>0 2px 8px rgba(0,0,0,0.3)</code> 观感偏硬，印刷时也容易发黑。</p>
</div>
<div class="yes">
<h3>Do</h3>
<p>用 ring shadow (<code>0 0 0 1pt</code>)、whisper (<code>rgba 0.05</code>)，或直接用明暗交替建立层次。</p>
</div>
</div>
</section>
<!-- ============ 10 BACKGROUND ============ -->
<section>
<div class="section-head">
<p class="section-num">10 · Background</p>
<h2 class="section-title">设计缘起</h2>
</div>
<div class="background-text">
<p>我喜欢美股投资，经常让 Claude 写研究报告。每次出来的东西都是同一种默认文档的样子：灰扑扑的，结构不清晰，格式老旧，换个对话就换一套排版，没有一份让人想读下去。于是我开始一条一条地调字体、配色、间距，直到报告变成一份自己真正愿意看的页面。</p>
<p>后来要去做《你不知道的 Agent：原理、架构与工程实践》分享，手上已经有文档，不想再做 PPT，就用 Claude Design 按自己的设计风格来排版，反复调了很多轮，最后慢慢满意了。加入了 inline SVG 图表、统一暖色调、也收紧了编辑节奏，做着做着覆盖了我常用的文档场景，就把这个过程继续抽象了一下，成了现在的 kami：一套交给任何 agent 都能放心出活的安静设计系统。</p>
</div>
</section>
<!-- ============ 11 FAQ ============ -->
<section>
<div class="section-head">
<p class="section-num">11 · 常见问题</p>
<h2 class="section-title">FAQ</h2>
</div>
<dl class="faq">
<div class="faq-pair">
<dt>Kami 是什么？</dt>
<dd>一个面向 AI agent 的文档设计系统。一种强调色、衬线层级、暖色羊皮纸画布。给任何 LLM agent 一段描述，就能得到稳定的排版输出。也可以作为视觉设计简报给到 Claude Design 或 GPT Canvas 这类图像渲染工具。</dd>
</div>
<div class="faq-pair">
<dt>能生成什么？</dt>
<dd>八种文档模板：一页纸、长文档、信件、作品集、简历、幻灯片、个股研报、更新日志，外加一套落地页系统（中、英、韩文）。另有 18 种内联 SVG 图表用于可视化说明。输出为 HTML，可导出为 PDF、PNG 或可编辑的 PPTX 幻灯片。</dd>
</div>
<div class="faq-pair">
<dt>怎么安装？</dt>
<dd>Claude Code（v2.1.142+）：<code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">/plugin marketplace add tw93/kami</code>，然后 <code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">/plugin install kami@kami</code>。Codex：<code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">codex plugin marketplace add tw93/kami</code>，然后 <code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">codex plugin add kami@kami</code>。读取 <code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">~/.agents</code> 的通用 agent：<code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">npx skills add tw93/kami/plugins/kami -a universal -g -y</code>。Claude Desktop：从 GitHub Releases 下载 release asset kami.zip，不要下载 Source code 压缩包，然后在自定义 > Skills 中上传即可。</dd>
</div>
<div class="faq-pair">
<dt>支持哪些语言？</dt>
<dd>英文、中文、日文、韩文。每种语言使用专属衬线字体：英文用 Charter，中文用 TsangerJinKai02，日文用 YuMincho，韩文用 Source Han Serif K。字距、行高、字号都按语言做了印刷级调优。</dd>
</div>
</dl>
</section>
<!-- ============ FOOTER ============ -->
<footer class="footer">
<div class="mark">
<svg width="56" height="56" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" aria-label="Kami mark">
<rect x="6" y="6" width="68" height="68" rx="10" fill="#faf9f5" stroke="#1B365D" stroke-width="1.25"/>
<line x1="16" y1="26" x2="64" y2="26" stroke="#1B365D" stroke-width="1.25"/>
<text x="40" y="56" font-family="TsangerJinKai02, Georgia, serif" font-size="34" font-weight="500" fill="#141413" text-anchor="middle">紙</text>
</svg>
<div>
<p class="wm-name">Kami · 紙</p>
<p class="wm-sub">好内容，值得好版面。</p>
</div>
</div>
<div class="colophon">
<div><a href="https://github.com/tw93/kami" style="color:var(--brand); text-decoration:none; font-weight:500;">GitHub</a> · One-Pager · Long Doc · Letter · 作品集 · Resume · Slides</div>
<div style="margin-top:8px; color: var(--olive); font-family: var(--serif);">
Serif 承担权威，sans 承担功能，暖灰承担节奏，油墨蓝承担焦点。
</div>
</div>
</footer>
</main>
<script>
(function(){
var sw=document.querySelector('[data-lang-switch]');
if(!sw)return;
var trigger=sw.querySelector('[data-lang-trigger]');
function setOpen(open){
sw.classList.toggle('is-open',open);
trigger.setAttribute('aria-expanded',open);
}
trigger.addEventListener('click',function(e){
e.stopPropagation();
setOpen(!sw.classList.contains('is-open'));
});
sw.querySelectorAll('[data-lang-menu] a').forEach(function(a){
a.addEventListener('click',function(){
localStorage.setItem('kami-lang',a.getAttribute('data-lang'));
});
});
document.addEventListener('click',function(e){
if(!sw.contains(e.target))setOpen(false);
});
document.addEventListener('keydown',function(e){
if(e.key==='Escape')setOpen(false);
});
})();
</script>
</body>
</html>