wehub-resource-sync
725 lines
45 KiB
HTML
725 lines
45 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<script>
|
||
(function(){
|
||
if(localStorage.getItem('kami-lang'))return;
|
||
var l=(navigator.language||'').toLowerCase();
|
||
if(/^zh.*(hant|tw|hk|mo)/.test(l))location.replace('./index-tw.html');
|
||
else if(l.indexOf('zh')===0)location.replace('./index-zh.html');
|
||
else if(l.indexOf('ja')===0)location.replace('./index-ja.html');
|
||
else if(l.indexOf('ko')===0)location.replace('./index-ko.html');
|
||
})();
|
||
</script>
|
||
<title>Kami: Document Design System for AI Agents</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="Kami - a warm parchment design system for AI-assisted professional documents, shaped by one accent color, serif-led hierarchy, and editorial whitespace.">
|
||
<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/">
|
||
<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: Document Design System for AI Agents">
|
||
<meta property="og:description" content="Kami - a warm parchment design system for AI-assisted professional documents, shaped by one accent color, serif-led hierarchy, and editorial whitespace.">
|
||
<meta property="og:url" content="https://kami.tw93.fun/">
|
||
<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="en_US">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="Kami: Document Design System for AI Agents">
|
||
<meta name="twitter:description" content="Kami - a warm parchment design system for AI-assisted professional documents, shaped by one accent color, serif-led hierarchy, and editorial whitespace.">
|
||
<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": "A warm parchment design system for AI-assisted professional documents. One accent color, serif-led hierarchy, and editorial whitespace.",
|
||
"url": "https://kami.tw93.fun",
|
||
"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": "What is Kami?",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "A constraint-based design system for AI-generated documents. One accent color, serif-led hierarchy, warm parchment canvas. It also doubles as a visual brief for image renderers."
|
||
}
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "What can Kami produce?",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "Eight document templates: one-pagers, long documents, letters, portfolios, resumes, slides, equity reports, and changelogs, plus a landing-page system (EN + CN + KO). Plus 18 inline SVG diagram types. Outputs are HTML exportable to PDF, PNG, or editable PPTX slide decks."
|
||
}
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "How do I set up Kami?",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "Claude Code (v2.1.142+): /plugin marketplace add tw93/kami && /plugin install kami@kami. Codex plugin marketplace: codex plugin marketplace add tw93/kami && codex plugin add kami@kami. Generic agents that read ~/.agents: npx skills add tw93/kami/plugins/kami -a universal -g -y. Claude Desktop: download the release asset kami.zip from GitHub Releases, not the Source code ZIP, and upload it in Skills settings."
|
||
}
|
||
},
|
||
{
|
||
"@type": "Question",
|
||
"name": "What languages does Kami support?",
|
||
"acceptedAnswer": {
|
||
"@type": "Answer",
|
||
"text": "English, Chinese, Japanese, and Korean. Each uses a dedicated serif font: Charter, TsangerJinKai02, YuMincho, and Source Han Serif K respectively, with per-language typographic tuning."
|
||
}
|
||
}
|
||
]
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<main class="page">
|
||
|
||
<!-- ============ HERO ============ -->
|
||
<header class="hero">
|
||
<div class="eyebrow">
|
||
<span>Design System · v1.9.4<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>English</button>
|
||
<div class="lang-menu" data-lang-menu>
|
||
<a href="./index.html" class="active" data-lang="en">English</a>
|
||
<a href="./index-zh.html" 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">Good content deserves good paper. Kami is a layout design system for the AI era, making documents clear, readable, and memorable.</p>
|
||
<div class="hero-tokens">
|
||
<span><b>Canvas</b>#f5f4ed</span>
|
||
<span><b>Accent</b>#1B365D</span>
|
||
<span><b>Serif</b>Charter / TsangerJinKai</span>
|
||
<span><b>Sans</b>= Serif (single font per page)</span>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ============ 00 DEMOS ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">00 · See it</p>
|
||
<h2 class="section-title">Output Samples</h2>
|
||
<p class="section-lede">Give Claude the brief: one-pagers, long docs, letters, portfolios, resumes, slides all become polished layouts from one small, reliable rule set. The same brief also <a href="https://github.com/tw93/kami#beyond-documents" style="color:var(--brand); text-decoration:none; font-weight:500;">travels to image renderers</a>, with the copy-paste prompt and sample outputs in the 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 equity report" loading="lazy" decoding="async"></a>
|
||
<p class="demo-title">Equity Report</p>
|
||
<p class="demo-desc">Tesla Q1 2026 earnings analysis</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</p>
|
||
<p class="demo-desc">Founder CV, 2 pages</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 print one-pager" loading="lazy" decoding="async"></a>
|
||
<p class="demo-title">One-Pager</p>
|
||
<p class="demo-desc">Kami intro, white-paper print, 1 page</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</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">Built with Kami</h2>
|
||
<p class="section-lede">The same landing-page template applied to three different products. One constraint set, three distinct purposes.</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 landing page" loading="lazy" decoding="async"></a>
|
||
<p class="demo-title">Kami</p>
|
||
<p class="demo-desc">Design system homepage</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 landing page" loading="lazy" decoding="async"></a>
|
||
<p class="demo-title">Luo</p>
|
||
<p class="demo-desc">CJK reading font, Chinese</p>
|
||
</div>
|
||
<div class="landing-card">
|
||
<a href="https://mole.fit" target="_blank" rel="noopener"><img src="assets/showcase/mole-landing.png" alt="Mole landing page" loading="lazy" decoding="async"></a>
|
||
<p class="demo-title">Mole</p>
|
||
<p class="demo-desc">macOS system utility</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 01 INSTALL ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">01 · Usage</p>
|
||
<h2 class="section-title">Install & Invoke</h2>
|
||
<p class="section-lede">Tell Claude what you need, for example "build me a resume", "make a one-pager for my startup", or "design a slide deck for my talk". The skill auto-triggers, no slash command needed.</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;">Generic agents that read from <code>~/.agents/</code>: <code>npx skills add tw93/kami/plugins/kami -a universal -g -y</code>. The plugin path exposes the generated lightweight skill bundle; a bare <code>tw93/kami</code> installs only SKILL.md.</p>
|
||
<p class="section-lede" style="font-size:14px;">Claude Desktop: download the 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>, not GitHub's Source code ZIP, then upload it in Customize > Skills > "+" > Create skill.</p>
|
||
</section>
|
||
|
||
<!-- ============ 02 MANIFESTO ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">02 · Manifesto</p>
|
||
<h2 class="section-title">Design Principles</h2>
|
||
</div>
|
||
<p class="manifesto">Warm parchment canvas, <em>ink blue</em> as the sole accent, serif carries hierarchy, while hard shadows and flashy palettes recede. This system is built for printed matter: stable, clear, and composed. Parchment is the default; an opt-in white-paper variant prints any document on a white background while keeping the warmth in cards and tables.</p>
|
||
<ol class="rules">
|
||
<li><span class="n">1</span><p>Page background is parchment <code>#f5f4ed</code>, never pure white</p></li>
|
||
<li><span class="n">2</span><p>Accent color is ink blue <code>#1B365D</code> only; no second chromatic hue</p></li>
|
||
<li><span class="n">3</span><p>All grays are warm, yellow-brown undertone; no cool blue-grays</p></li>
|
||
<li><span class="n">4</span><p>English uses serif for headlines and body; Chinese uses serif headlines and sans body</p></li>
|
||
<li><span class="n">5</span><p>Serif body at 400, headings at 500. Avoid synthetic bold</p></li>
|
||
<li><span class="n">6</span><p>Three line-height bands: tight titles 1.1-1.3 / dense 1.4-1.45 / reading 1.5-1.55</p></li>
|
||
<li><span class="n">7</span><p>Tag backgrounds must be solid hex; no rgba, WeasyPrint double-rectangle bug</p></li>
|
||
<li><span class="n">8</span><p>Shadows: ring or whisper only, no hard drop shadows</p></li>
|
||
</ol>
|
||
</section>
|
||
|
||
<!-- ============ 03 COLOR ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">03 · Color</p>
|
||
<h2 class="section-title">Warm Restraint</h2>
|
||
<p class="section-lede">One accent + warm neutrals + zero cool colors. Ink blue covers no more than <b>5%</b> of any page. Beyond that is clutter, not restraint.</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">Page background, the emotional foundation</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">Cards / elevated surfaces</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">Button default / interactive surfaces</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">Dark theme page base, not pure black</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">Primary color · CTA · quote bar · section overline</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">Links on dark surfaces · lighter variant</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">Dark theme container · warm charcoal</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">Error state, deep warm red</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 to solid hex</h3>
|
||
<p style="font-size:14px; color: var(--olive); margin: 0 0 16px; line-height: 1.55;">Solid hex equivalents of ink blue <code style="font-family:var(--mono);font-size:12px;background:#EEF2F7;color:var(--brand);padding:1px 5px;border-radius:2px">#1B365D</code> on parchment. Tags use solid hex instead of <code style="font-family:var(--mono);font-size:12px;background:#EEF2F7;color:var(--brand);padding:1px 5px;border-radius:2px">rgba()</code> to avoid a WeasyPrint double-rectangle rendering bug.</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">Type System</h2>
|
||
<p class="section-lede">Serif carries hierarchy, sans carries function. Serif body at 400, headings at 500.</p>
|
||
</div>
|
||
|
||
<div class="family-grid">
|
||
<div class="family serif">
|
||
<p class="glyph">Aa</p>
|
||
<p class="role">Serif · Headlines + Body</p>
|
||
<p class="name">Charter / TsangerJinKai02</p>
|
||
<p class="use">Used for headlines, body text, pull quotes, and numeric emphasis. English uses Charter, Chinese uses TsangerJinKai02.</p>
|
||
</div>
|
||
<div class="family mono">
|
||
<p class="glyph"></></p>
|
||
<p class="role">Mono · Code</p>
|
||
<p class="name">JetBrains Mono</p>
|
||
<p class="use">Code blocks, version numbers, hex values, tabular figures.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 class="subhead">Scale (print pt; screen px = pt x 1.33)</h3>
|
||
<div class="type-grid">
|
||
<div class="type-row">
|
||
<div class="type-label">Display</div>
|
||
<div class="type-sample display">Good docs read<br>clear, stable, poised</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">H1 Section</div>
|
||
<div class="type-sample h1">Color System · Palette</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">H2 Subsection</div>
|
||
<div class="type-sample h2">Canvas · Warm Neutrals</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">H3 Item</div>
|
||
<div class="type-sample h3">Tag Tints · Solid Hex</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</div>
|
||
<div class="type-sample body">Ink blue covers no more than 5% of any page. Beyond that is clutter, not restraint. All grays have a yellow-brown undertone: R ≈ G > B is the rule of thumb.</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">Caption</div>
|
||
<div class="type-sample caption">Figure notes, footnotes, annotation text. Color drops to olive or 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.4</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">Rhythm & Form</h2>
|
||
<p class="section-lede">Base unit: 4pt. Denser layouts get smaller margins; more formal documents get larger ones.</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">Inline elements</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 · tight layout</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">Component internals</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">Between components · card 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 title margins</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">Between major sections</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">Between long-doc chapters</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">Tight</div></div>
|
||
<div class="radius"><div class="box" style="border-radius:6px"></div><div class="r"><b>6</b> pt</div><div class="label">Code block</div></div>
|
||
<div class="radius"><div class="box" style="border-radius:8px"></div><div class="r"><b>8</b> pt</div><div class="label">Default card</div></div>
|
||
<div class="radius"><div class="box" style="border-radius:12px"></div><div class="r"><b>12</b> pt</div><div class="label">Container</div></div>
|
||
<div class="radius"><div class="box" style="border-radius:16px"></div><div class="r"><b>16</b> pt</div><div class="label">Feature card</div></div>
|
||
<div class="radius"><div class="box" style="border-radius:24px"></div><div class="r"><b>24</b> pt</div><div class="label">Large container</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">Depth: Three Shadow Methods</h3>
|
||
<p style="font-size:14px; color: var(--olive); margin: 0 0 12px; line-height: 1.55;">Kami avoids traditional hard shadows. Depth comes from ring shadows, whisper shadows, and light-dark alternation.</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>Buttons · card 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>Gentle elevation · feature cards</p>
|
||
</div>
|
||
<div class="shadow-demo sd-alt">
|
||
<p class="t">Light ⇌ Dark</p>
|
||
<p class="s">parchment ⇌ deep-dark<br> <br>Section-level · strongest contrast</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 06 COMPONENTS ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">06 · Components</p>
|
||
<h2 class="section-title">Atomic Modules</h2>
|
||
<p class="section-lede">A small fixed set, kept only where it solves a concrete document problem.</p>
|
||
</div>
|
||
|
||
<div class="comp-grid">
|
||
<div class="comp">
|
||
<h3>Buttons</h3>
|
||
<p class="hint">ring shadow instead of hard drop · 8pt radius</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, three levels</h3>
|
||
<p class="hint">solid hex · pick from weak to strong</p>
|
||
<div class="demo" style="display:flex; gap:10px; flex-wrap:wrap; align-items:center;">
|
||
<span class="tag calm">Light 0.08</span>
|
||
<span class="tag standard">Standard 0.18</span>
|
||
<span class="tag brush">Brush gradient</span>
|
||
</div>
|
||
</div>
|
||
<div class="comp">
|
||
<h3>Quote</h3>
|
||
<p class="hint">left 2pt brand solid + olive text</p>
|
||
<blockquote class="quote">A thousand no's for every yes, prefer clarity over decoration.</blockquote>
|
||
</div>
|
||
<div class="comp">
|
||
<h3>Metric</h3>
|
||
<p class="hint">serif number + sans label · tabular-nums</p>
|
||
<div class="metrics demo">
|
||
<div class="metric"><span class="metric-value">8</span><span class="metric-label">Doc types</span></div>
|
||
<div class="metric"><span class="metric-value">1</span><span class="metric-label">Accent</span></div>
|
||
<div class="metric"><span class="metric-value">8</span><span class="metric-label">Rules</span></div>
|
||
</div>
|
||
</div>
|
||
<div class="comp">
|
||
<h3>Section Title</h3>
|
||
<p class="hint">serif 500 · 15pt · size-led hierarchy, no decoration</p>
|
||
<div class="demo">
|
||
<span class="sample-section-title">Selected Works · Projects</span>
|
||
</div>
|
||
</div>
|
||
<div class="comp">
|
||
<h3>Dash List</h3>
|
||
<p class="hint">dash instead of bullet · editorial tone</p>
|
||
<ul class="dash demo">
|
||
<li>Warm parchment, never pure white</li>
|
||
<li>Ink blue accent, no second color</li>
|
||
<li>Serif carries authority</li>
|
||
</ul>
|
||
</div>
|
||
<div class="comp">
|
||
<h3>Code Block</h3>
|
||
<p class="hint">ivory bg + 0.5pt border + 6pt radius</p>
|
||
<pre class="code"><span class="c">// warmth from restraint, not from color</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 radius</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 Company Profile · One-Pager</p>
|
||
<p style="font-size:12px; color:var(--olive); margin:0 0 10px; line-height:1.5;">Single A4 page · 4 metric cards + 3 body sections + timeline</p>
|
||
<div style="display:flex; gap:8px; flex-wrap:wrap;">
|
||
<span class="tag calm">English</span>
|
||
<span class="tag calm">A4 x 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">Inline Charts</h2>
|
||
<p class="section-lede">Eighteen inline SVG diagram types covering architecture, process, and data chart scenarios. Tell Claude which type you need and it embeds directly into the document, colors and fonts following the Kami design language.</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">System components and connections, one focal node</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"/>
|
||
<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 -->
|
||
<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"/>
|
||
<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 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>
|
||
<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 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>
|
||
<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">Decision branches, yes/no paths, focal on success</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">Quarterly revenue comparison, gradient or single color</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">Primary</text>
|
||
<rect x="150" y="46" width="10" height="10" rx="2" fill="#1B365D"/>
|
||
<text x="165" y="55" font-size="11" fill="#4d4c48">Core revenue · 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">Services · 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">Other · 15%</text>
|
||
</svg>
|
||
<p class="chart-caption">Revenue structure breakdown, supports 3–6 segments</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 07 DECISION TABLE ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">08 · Decision Lookup</p>
|
||
<h2 class="section-title">Quick Reference</h2>
|
||
<p class="section-lede">When in doubt about what to use, consult this table. If it's not here, go back to first principles.</p>
|
||
</div>
|
||
<table class="decision">
|
||
<tr><th>Task</th><th>How</th></tr>
|
||
<tr><td class="task">Large headline</td><td class="how">serif <code>500</code>, size by hierarchy, line-height <code>1.10-1.30</code></td></tr>
|
||
<tr><td class="task">Reading body</td><td class="how">serif <code>400</code>, <code>9.5-10 pt</code>, line-height <code>1.55</code></td></tr>
|
||
<tr><td class="task">Emphasize a number</td><td class="how"><code>color: var(--brand)</code>, not bold</td></tr>
|
||
<tr><td class="task">Separate two sections</td><td class="how"><code>2.5pt</code> brand left bar, or <code>0.5pt</code> warm-gray dashed</td></tr>
|
||
<tr><td class="task">Quote someone</td><td class="how">Left <code>2pt</code> brand solid + olive text</td></tr>
|
||
<tr><td class="task">Show code</td><td class="how">Ivory bg + <code>0.5pt</code> border + <code>6pt</code> radius + mono font</td></tr>
|
||
<tr><td class="task">Primary vs secondary</td><td class="how">Primary: brand fill + ivory text; Secondary: warm-sand + charcoal</td></tr>
|
||
<tr><td class="task">Mark a special card</td><td class="how"><code>border: 0.5pt solid var(--brand)</code> or <code>border-left: 3pt</code></td></tr>
|
||
<tr><td class="task">Begin a section</td><td class="how">Serif <code>500</code> · <code>15pt</code> · size-led hierarchy, no decoration needed</td></tr>
|
||
<tr><td class="task">Document cover</td><td class="how">Single page, Display size + right-aligned author/date + generous whitespace</td></tr>
|
||
<tr><td class="task">Data card</td><td class="how">Ivory bg + <code>8pt</code> radius + serif large number, ink blue + sans small label</td></tr>
|
||
</table>
|
||
</section>
|
||
|
||
<!-- ============ 09 ANTI ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">09 · Anti-Patterns</p>
|
||
<h2 class="section-title">What to Avoid</h2>
|
||
<p class="section-lede">Exceptions are allowed, but the reason should be explicit.</p>
|
||
</div>
|
||
|
||
<div class="anti">
|
||
<div class="no">
|
||
<h3>Don't</h3>
|
||
<p>Use <code>#ffffff</code> pure white or <code>#f3f4f6</code> cool gray as page background. It makes the page feel brittle and weakens the warm parchment character.</p>
|
||
</div>
|
||
<div class="yes">
|
||
<h3>Do</h3>
|
||
<p>Always use <code>#f5f4ed</code> parchment. Set <code>@page background</code> to the same color to avoid white edges when printing.</p>
|
||
</div>
|
||
<div class="no">
|
||
<h3>Don't</h3>
|
||
<p>Use <code>rgba(27,54,93,0.18)</code> for tags. WeasyPrint renders padding and glyph areas at different opacity, creating double rectangles.</p>
|
||
</div>
|
||
<div class="yes">
|
||
<h3>Do</h3>
|
||
<p>Use the tint lookup table for equivalent solid hex <code>#E4ECF5</code>. The rendering stays clean and the color remains stable.</p>
|
||
</div>
|
||
<div class="no">
|
||
<h3>Don't</h3>
|
||
<p>Set headlines to <code>font-weight: 600</code> or heavier synthetic bold. Synthetic bold blurs strokes and degrades typographic quality.</p>
|
||
</div>
|
||
<div class="yes">
|
||
<h3>Do</h3>
|
||
<p>Body 400, headings 500 (real W05). For more presence, use size or a brand left bar, never synthetic bold.</p>
|
||
</div>
|
||
<div class="no">
|
||
<h3>Don't</h3>
|
||
<p>Use hard drop shadow <code>0 2px 8px rgba(0,0,0,0.3)</code>. Visually heavy and likely to print as dark blobs.</p>
|
||
</div>
|
||
<div class="yes">
|
||
<h3>Do</h3>
|
||
<p>Ring shadow <code>0 0 0 1pt</code> or whisper <code>rgba 0.05</code>, or simply alternate light and dark sections.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 10 BACKGROUND ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">10 · Background</p>
|
||
<h2 class="section-title">Design Origins</h2>
|
||
</div>
|
||
<div class="background-text">
|
||
<p>I like investing in US equities and ask Claude to write research reports all the time. Every output landed in the same default-doc look: gray, flat, a different layout each session. The structure was hard to scan, the formatting felt dated, and nothing about the page made me want to keep reading. So I started fixing the typography, the palette, the spacing, one rule at a time, until the report became a page I actually enjoyed.</p>
|
||
<p>Later I needed to present "The Agent You Don't Know: Principles, Architecture and Engineering Practice." I already had the document and didn't want to build slides from scratch, so I used Claude Design to lay it out in my own style, tweaked it round after round, and eventually got it to a place I was happy with. That process added inline SVG charts, a unified warm palette, and a tighter editorial rhythm. It kept growing until it covered every document I regularly ship, so I kept abstracting the process, and it became kami: one quiet design system I can hand to any agent and trust the output.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ============ 11 FAQ ============ -->
|
||
<section>
|
||
<div class="section-head">
|
||
<p class="section-num">11 · Questions</p>
|
||
<h2 class="section-title">FAQ</h2>
|
||
</div>
|
||
<dl class="faq">
|
||
<div class="faq-pair">
|
||
<dt>What is Kami?</dt>
|
||
<dd>A constraint-based design system for AI-generated documents. One accent color, serif-led hierarchy, warm parchment canvas. Give any LLM agent a brief, get a composed layout back. It also doubles as a visual brief you can hand to image renderers like Claude Design or GPT Canvas.</dd>
|
||
</div>
|
||
<div class="faq-pair">
|
||
<dt>What can it produce?</dt>
|
||
<dd>Eight document templates: one-pagers, long documents, letters, portfolios, resumes, slides, equity reports, and changelogs, plus a landing-page system (EN + CN + KO). Plus 18 inline SVG diagram types for visual explanations. Outputs are HTML that can be exported to PDF, PNG, or editable PPTX slide decks.</dd>
|
||
</div>
|
||
<div class="faq-pair">
|
||
<dt>How do I set it up?</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> then <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> then <code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">codex plugin add kami@kami</code>. Generic agents that read <code style="font-family:var(--mono); font-size:0.9em; color:var(--brand);">~/.agents</code>: <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: download the release asset kami.zip from GitHub Releases, not the Source code ZIP, and upload it in Customize > Skills. No slash command needed, the skill auto-triggers from natural requests.</dd>
|
||
</div>
|
||
<div class="faq-pair">
|
||
<dt>What languages does it support?</dt>
|
||
<dd>English, Chinese, Japanese, and Korean. Each language uses a dedicated serif font: Charter for English, TsangerJinKai02 for Chinese, YuMincho for Japanese, Source Han Serif K for Korean. Letter-spacing, line-height, and font sizes are tuned per language for print quality. Japanese and Korean are best-effort CJK paths with visual QA before delivery.</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">Good content deserves good paper.</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 · Portfolio · Resume · Slides</div>
|
||
<div style="margin-top:8px; color: var(--olive); font-family: var(--serif);">
|
||
Serif carries authority, sans function, warm grays rhythm, ink blue focus.
|
||
</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>
|