github-featured/tw93--kami
2
0
Fork 0
Code Issues Pull Requests Deployments Models Agent Notes Packages Projects Releases Wiki Activity
Files
5218dddb20202a20b279392429af70e408d03e4a
tw93--kami/index-zh.html
T

593 lines
36 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Kami · Design System</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Kami 紙：面向 AI 文档生成的温暖纸质感设计系统，以单一强调色、serif 层级与编辑级留白，收束成稳定的排版。">
<link rel="icon" href="https://gw.alipayobjects.com/zos/k/vl/logo.svg" type="image/svg+xml">
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<nav class="lang-switch"><a href="./index.html">EN</a><a href="./index-zh.html" class="active">中</a><a href="./index-ja.html">日</a></nav>
<main class="page">
<!-- ============ HERO ============ -->
<header class="hero">
<div class="eyebrow">
<span>Design System · v1.1.0<span class="eyebrow-date"> · 2026.04</span></span>
<span class="hero-links">
<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 / Newsreader</span>
<span><b>Sans</b>Source Han Sans / Inter</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 都用少量清晰规则，把提示词变成可交付的排版。</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 公司介绍"></a>
<p class="demo-title">One-Pager · 中文</p>
<p class="demo-desc">Tesla 公司介绍，单页 A4</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"></a>
<p class="demo-title">Resume · English</p>
<p class="demo-desc">Founder CV，2 页</p>
</div>
<div class="demo-card">
<a href="assets/demos/demo-kaku.pdf" target="_blank"><img src="assets/demos/demo-kaku.png" alt="Kaku 作品集"></a>
<p class="demo-title">作品集 · 日本語</p>
<p class="demo-desc">Kaku 终端模拟器（日文版），6 页</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"></a>
<p class="demo-title">Slides · English</p>
<p class="demo-desc">Agent keynote, 6 slides</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</span>
npx skills add tw93/kami -a claude-code -g -y
<span class="c"># Codex</span>
npx skills add tw93/kami -a codex -g -y</pre>
<p class="section-lede" style="font-size:14px;">Claude Desktop：下载 <a href="https://cdn.jsdelivr.net/gh/tw93/kami@main/dist/kami.zip" style="color:var(--brand); text-decoration:none; font-weight:500;">kami.zip</a>，在 Customize &gt; Skills &gt; "+" &gt; 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>
<!-- ============ 01 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(6, 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:#4d4c48"></div><div class="info"><p class="name">Charcoal</p><span class="hex">#4D4C48</span></div></div>
<div class="swatch"><div class="chip" style="background:#5e5d59"></div><div class="info"><p class="name">Olive</p><span class="hex">#5E5D59</span></div></div>
<div class="swatch"><div class="chip" style="background:#87867f"></div><div class="info"><p class="name">Stone</p><span class="hex">#87867F</span></div></div>
<div class="swatch"><div class="chip" style="background:#b0aea5"></div><div class="info"><p class="name">Warm Silver</p><span class="hex">#B0AEA5</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</span><span class="sample" style="background:#D6E1EE">Tag sample</span><p class="opacity">0.30</p><span class="hex">#D6E1EE</span></div>
</div>
</section>
<!-- ============ 02 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 / Newsreader</p>
<p class="use">承担标题、引语与数字强调，中文取仓耳今楷，英文取 Newsreader。</p>
</div>
<div class="family sans">
<p class="glyph">文 Aa</p>
<p class="role">Sans · 正文 / UI</p>
<p class="name">Source Han Sans / Inter</p>
<p class="use">用于正文、标签、按钮与 metadata，默认 400，标签标题用 500–600。</p>
</div>
<div class="family mono">
<p class="glyph">&lt;/&gt;</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.1.0</div>
<div class="type-specs"><b>7.5–8 pt</b><br>weight 600<br>line 1.35</div>
</div>
</div>
</section>
<!-- ============ 03 SPACING ============ -->
<section>
<div class="section-head">
<p class="section-num">05 · Spacing &amp; 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>&nbsp;<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>&nbsp;<br>极轻浮起 · 特色卡</p>
</div>
<div class="shadow-demo sd-alt">
<p class="t">Light ⇌ Dark</p>
<p class="s">parchment ⇌ deep-dark<br>&nbsp;<br>section 级别 · 对比最明显</p>
</div>
</div>
</section>
<!-- ============ 04 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">
<h4>Buttons</h4>
<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">
<h4>Tags · 三档</h4>
<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">
<h4>Quote</h4>
<p class="hint">左 2pt 品牌实线 + olive 色</p>
<blockquote class="quote">一千个 no 换一个 yes，宁可清淡，不可浓艳。</blockquote>
</div>
<div class="comp">
<h4>Metric</h4>
<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">
<h4>Section Title</h4>
<p class="hint">serif 500 · 15pt · 纯字号层级，无装饰</p>
<div class="demo">
<span class="sample-section-title">核心项目 · Selected Works</span>
</div>
</div>
<div class="comp">
<h4>Dash List</h4>
<p class="hint">短横线代替圆点 · 更书卷气</p>
<ul class="dash demo">
<li>暖米纸底，不用纯白</li>
<li>油墨蓝点缀，不引第二色</li>
<li>Serif 承担权威</li>
</ul>
</div>
<div class="comp">
<h4>Code Block</h4>
<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">
<h4>Featured Card</h4>
<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>
<!-- ============ 05b 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:'Inter','TsangerJinKai02',sans-serif">
<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="#87867f"/>
<!-- 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="#5e5d59"/>
<!-- Node: Client -->
<rect x="20" y="58" width="64" height="44" rx="3" fill="#f5f4ed" stroke="#87867f" stroke-width="0.8"/>
<text x="52" y="76" text-anchor="middle" font-size="7" letter-spacing="0.5" fill="#87867f">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="#5e5d59" stroke-width="0.8"/>
<text x="228" y="76" text-anchor="middle" font-size="7" letter-spacing="0.5" fill="#87867f">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:'Inter','TsangerJinKai02',sans-serif">
<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="27" text-anchor="middle" font-size="9" font-weight="600" 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="#5e5d59"/>
<!-- 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="77" text-anchor="middle" font-size="9" font-weight="600" 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="#5e5d59"/>
<text x="151" y="106" font-size="8" fill="#5e5d59">No</text>
<!-- Reject node -->
<rect x="96" y="116" width="88" height="32" rx="4" fill="#f5f4ed" stroke="#87867f" stroke-width="0.8"/>
<text x="140" y="136" text-anchor="middle" font-size="9" font-weight="600" fill="#5e5d59">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:'Inter','TsangerJinKai02',sans-serif">
<rect width="280" height="160" fill="#f5f4ed"/>
<rect x="18" y="78" width="42" height="50" rx="3" fill="#87867f"/>
<rect x="78" y="62" width="42" height="66" rx="3" fill="#5e5d59"/>
<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="#87867f">Q1</text>
<text x="99" y="145" text-anchor="middle" font-size="10" fill="#5e5d59">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="#87867f">180</text>
<text x="99" y="57" text-anchor="middle" font-size="9" font-weight="600" fill="#5e5d59">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:'Inter','TsangerJinKai02',sans-serif">
<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="#5e5d59" 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="#87867f" 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="#5e5d59">主营</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="#5e5d59"/>
<text x="165" y="81" font-size="11" fill="#4d4c48">服务收入 · 25%</text>
<rect x="150" y="98" width="10" height="10" rx="2" fill="#87867f"/>
<text x="165" y="107" font-size="11" fill="#4d4c48">其他来源 · 15%</text>
</svg>
<p class="chart-caption">营收结构拆解，支持 3–6 个分段</p>
</div>
</div>
</section>
<!-- ============ 05 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>
<!-- ============ 06 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">
<h5>Don't</h5>
<p>页面背景用 <code>#ffffff</code> 纯白或 <code>#f3f4f6</code> 冷灰，会让版面变硬，也削弱 Kami 的暖米纸气质。</p>
</div>
<div class="yes">
<h5>Do</h5>
<p>始终使用 <code>#f5f4ed</code> parchment，打印时把 <code>@page background</code> 也设为同色，避免白边。</p>
</div>
<div class="no">
<h5>Don't</h5>
<p>Tag 用 <code>rgba(201,100,66,0.18)</code>，WeasyPrint 会让 padding 区与字形区透明度叠加，形成双层矩形。</p>
</div>
<div class="yes">
<h5>Do</h5>
<p>查 tint 对照表，改用等效实色 <code>#E4ECF5</code>，颜色稳定，PDF 也干净。</p>
</div>
<div class="no">
<h5>Don't</h5>
<p>标题用 <code>font-weight: 600</code> 或更粗的合成 bold，笔画容易变糊，版面也会显得粗重。</p>
</div>
<div class="yes">
<h5>Do</h5>
<p>正文 400，标题 500（真实 W05 字重）；需要更强存在感时，用字号或品牌色左侧竖线，不靠合成粗体。</p>
</div>
<div class="no">
<h5>Don't</h5>
<p>box-shadow 硬投影 <code>0 2px 8px rgba(0,0,0,0.3)</code> 观感偏硬，印刷时也容易发黑。</p>
</div>
<div class="yes">
<h5>Do</h5>
<p>用 ring shadow (<code>0 0 0 1pt</code>)、whisper (<code>rgba 0.05</code>)，或直接用明暗交替建立层次。</p>
</div>
</div>
</section>
<!-- ============ 09 BACKGROUND ============ -->
<section>
<div class="section-head">
<p class="section-num">10 · Background</p>
<h2 class="section-title">设计缘起</h2>
</div>
<div class="background-text">
<p>我做美股投资，经常让 AI 生成分析报告，最初的输出总像默认 Google Doc，平淡、不一致，也没有记忆点；我不喜欢文档风格总在变，便反复调字体、配色与间距，直到它变成一份自己愿意读下去的文档。</p>
<p>后来受邀做一次演讲，需要一套和文档风格一致的 slides，这轮迭代把系统继续往前推：加入 inline SVG 图表，统一暖色调，也收紧编辑节奏；做着做着，它已经覆盖了我常用的文档场景，于是独立成 kami，一套我愿意反复使用、也愿意发出去的视觉语言。</p>
</div>
</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>&nbsp;&nbsp;·&nbsp;&nbsp;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('.lang-switch'),last=0;
window.addEventListener('scroll',function(){
var y=window.scrollY;
if(y>80&&y>last)sw.classList.add('hidden');
else sw.classList.remove('hidden');
last=y;
},{passive:true});
})();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink