Design System · v1.1.0 · 2026.04

# Kami紙

よい内容には、よい版面を。Kami は AI 時代のための文書組版デザインシステム。文書を明快で読みやすく、記憶に残る形へ整えます。

Canvas#f5f4ed Accent#1B365D SerifJP Mincho / Tsanger fallback Sans= Serif (一頁一書体)

00 · See it

## 出力サンプル

Claude に要件を渡すだけで、一枚資料、長文、正式書簡、ポートフォリオ、履歴書、スライドまで、少数の明確なルールで整った版面に仕上がります。

One-Pager

Tesla 企業紹介、A4 1ページ

Resume

創業者 CV、2ページ

Portfolio

Kaku ターミナル作品集、7ページ

Slides

Agent キーノート、6枚

01 · Usage

## インストールと呼び出し

「履歴書を作って」「スタートアップ紹介の一枚資料を作って」「登壇用スライドを作って」のように要件を伝えるだけで、skill が自動起動します。スラッシュコマンドは不要です。

    # Claude Code
    npx skills add tw93/kami -a claude-code -g -y

    # Codex
    npx skills add tw93/kami -a codex -g -y

Claude Desktop の場合は kami.zip をダウンロードし、Customize > Skills > "+" > Create skill からそのままアップロードします。

02 · Manifesto

## 設計原則

暖かい紙色を土台に、強調色は ink blue のみ。階層は serif で作り、強い影や派手な配色は退かせます。印刷文書に向けて、安定し、明快で、読みやすい紙面を保つための設計です。

1. 1

   ページ背景は parchment `#f5f4ed`、純白は使わない

2. 2

   強調色は ink blue `#1B365D` のみ、第二の彩色は入れない

3. 3

   グレーはすべて暖色寄り、冷たいブルーグレーは禁止

4. 4

   英語は見出しと本文を serif、中国語は見出しを serif、本文は読みやすい本文体

5. 5

   serif 本文 400、見出し 500、合成ボールドは使わない

6. 6

   行間は 2 段階、見出し 1.1-1.3 / 本文 1.4-1.45

7. 7

   タグ背景は hex の実色のみ、rgba は使わない。WeasyPrint で二重矩形が出るためです

8. 8

   影は ring か whisper のみ、強い drop shadow は使わない

03 · Color

## 暖色で抑制する

強調色は 1 つ、ニュートラルは暖色のみ、寒色は入れない。Ink blue の使用面積はページ全体の 5% 以内に抑えます。超えると統制ではなく過剰になります。

### Canvas

Parchment

Page background, the emotional foundation

#F5F4ED

Ivory

Cards / elevated surfaces

#FAF9F5

Warm Sand

Button default / interactive surfaces

#E8E6DC

Deep Dark

Dark theme page base, not pure black

#141413

### Brand

Ink Blue

Primary color · CTA · quote bar · section overline

#1B365D

Ink Light

Links on dark surfaces · lighter variant

#2D5A8A

Dark Surface

Dark theme container · warm charcoal

#30302E

Error

Error state, deep warm red

#B53333

### Warm Neutrals

Near Black

#141413

Dark Warm

#3D3D3A

Olive

#504e49

Stone

#6b6a64

### Tag Tints: rgba から実色 hex へ

下記は ink blue `#1B365D` を parchment 上に重ねたときの等価な実色 hex です。タグ背景は `rgba()` を避け、WeasyPrint の二重矩形を防ぎます。

Tag sample

0.08

#EEF2F7
Tag sample

0.14

#E4ECF5
Default Tag sample

0.18

#E4ECF5
Tag sample

0.22

#D0DCE9
Tag sample

0.30

#D6E1EE

04 · Typography

## タイポグラフィ体系

階層は serif、機能要素は sans。serif は本文 400、見出し 500 を基本にします。

Aa

Serif · 見出し + 本文

JP Mincho / TsangerJinKai02

見出し、本文、引用、数値強調に使用。日本語は明朝体を優先し、TsangerJinKai02 は CJK fallback として扱います。

</>

Mono · コード

JetBrains Mono

コードブロック、バージョン番号、hex 値、等幅数字に使用。

### スケール（印刷 pt、画面 px = pt x 1.33）

Display
よい文書は
明快で、安定し、読みやすい
36-48 pt
weight 500
line 1.10
H1 Section
Color System · Palette
18-22 pt
weight 500
line 1.20
H2 Subsection
Canvas · Warm Neutrals
14-16 pt
weight 500
line 1.25
H3 Item
Tag Tints · Solid Hex
12-13 pt
weight 500
line 1.30
Body
Ink blue は各ページで 5% 以内。超えると抑制ではなく過剰になります。グレーは黄褐色の下地を持ち、R ≈ G > B を目安にします。
9.5-10 pt
weight 400
line 1.55
Caption
図注、脚注、補足説明。色は olive または stone へ一段落とします。
8.5-9 pt
weight 400
line 1.45
Label
Design System · v1.1.0
7.5-8 pt
weight 600
line 1.35

05 · Spacing & Shape

## リズムと形

基本単位は 4pt。情報密度が高いほどマージンを詰め、フォーマルな文書ほど広く取ります。

Scale | Value | Use |
--- | --- | --- | ---
xs | 2-3 pt | Inline elements |
sm | 4-5 pt | Tag padding · tight layout |
md | 8-10 pt | Component internals |
lg | 16-20 pt | Between components · card padding |
xl | 24-32 pt | Section title margins |
2xl | 40-60 pt | Between major sections |
3xl | 80-120 pt | Between long-doc chapters |

### Radii

4 pt
Tight
6 pt
Code block
8 pt
Default card
12 pt
Container
16 pt
Feature card
24 pt
Large container
32 pt
Hero

### 奥行き: 3 つの影の方法

Kami は強い影を使いません。奥行きは ring shadow、whisper shadow、明暗切り替えで作ります。

Ring Shadow

0 0 0 1pt var(--ring-warm)
ボタン・カード hover

Whisper Shadow

0 4pt 24pt rgba(0,0,0,0.05)
軽い浮き上がり・特集カード

Light ⇌ Dark

parchment ⇌ deep-dark
セクション単位・最も強い対比

06 · Components

## モジュール

必要最小限の固定セットを使い、文書上の具体的な課題に効く場面だけで使います。

#### Buttons

強い drop shadow ではなく ring shadow ・角丸 8pt

主要 CTA 副次 CTA Ghost

#### タグ（3 段階）

実色 hex ・弱から強へ選択

Light 0.08 Standard 0.18 Brush gradient

#### 引用

左 2pt のブランド実線 + olive テキスト

> 装飾より明快さを優先する。ひとつの Yes のために多くの No を選ぶ。

#### 指標カード

serif 数字 + sans ラベル ・ tabular-nums

6 文書タイプ
1 強調色
8 基本ルール

#### セクション見出し

serif 500 ・ 15pt ・サイズ主導の階層、装飾は不要

Selected Works · Projects

#### Dash List

丸点ではなくダッシュ ・ 編集文体

- 紙色は暖色、純白は使わない
- 強調色は ink blue だけ、第二色は入れない
- 階層は serif で担保する

#### コードブロック

ivory 背景 + 0.5pt 枠線 + 6pt 角丸

    // 温かみは色数ではなく、抑制で作る
    canvas   = parchment; accent = ink_blue
    palette  = warm_neutrals − cool_grays
    document = serif × hierarchy + generous_space
    beauty   = constraints × intention ÷ noise

#### 特集カード

whisper shadow + 16pt 角丸

Tesla 企業紹介 · One-Pager

A4 1ページ ・ 指標カード 4 枚 + 本文 3 セクション + タイムライン

日本語 A4 x 1 Ink Blue

07 · Diagrams

## インライン図表

アーキテクチャ、フロー、データ可視化をカバーする 12 種の SVG 図表を用意。必要な種類を Claude に伝えると、Kami の色と書体規則に沿って文書へ直接埋め込みます。

アーキテクチャ図 · Architecture

システム構成と接続関係、焦点ノードを 1 つに絞る

フローチャート · Flowchart

分岐と yes/no の流れ、成功側を主軸に配置

棒グラフ · Bar Chart

四半期売上の比較、単色または段階色で表現

ドーナツチャート · Donut Chart

売上構成の内訳、3-6 セグメントに対応

08 · Decision Lookup

## クイック参照

どの手法を使うか迷ったらこの表を参照。該当がなければ基本原則に戻って判断します。

場面 | 処方
--- | ---
大きな見出し | serif `500`、サイズで階層化、行間 `1.10-1.30`
本文（可読重視） | serif `400`、`9.5-10 pt`、行間 `1.55`
数値を強調 | `color: var(--brand)` を使い、太字には頼らない
セクション分離 | 左 `2.5pt` の brand 実線、または `0.5pt` 暖色破線
引用を置く | 左 `2pt` brand 実線 + olive テキスト
コードを載せる | ivory 背景 + `0.5pt` 枠線 + `6pt` 角丸 + mono 書体
主ボタンと副ボタン | 主: brand 塗り + ivory 文字、副: warm-sand + charcoal
特別カードを示す | `border: 0.5pt solid var(--brand)` または `border-left: 3pt`
セクション開始 | serif `500` ・ `15pt` ・サイズ主導の階層、装飾は不要
表紙を作る | 1 ページ構成、Display サイズ + 右寄せの著者/日付 + 広い余白
データカード | ivory 背景 + `8pt` 角丸 + serif 大数字 + sans 小ラベル

08 · Anti-Patterns

## 避けるべきこと

例外は許容できますが、理由を明示できる場合に限ります。

##### Don't

ページ背景に `#ffffff` の純白や `#f3f4f6` の寒色グレーを使わない。紙面が硬く見え、温かい紙質感が崩れます。

##### Do

常に `#f5f4ed` の parchment を使う。印刷時の白フチを防ぐため、`@page background` も同色に設定します。

##### Don't

タグに `rgba(27,54,93,0.18)` を使わない。WeasyPrint で文字領域と余白領域の不透明度がずれ、二重矩形が出ます。

##### Do

tint 対照表の実色 hex `#E4ECF5` を使う。描画が安定し、色ぶれを防げます。

##### Don't

見出しに `font-weight: 600` 以上の合成ボールドを使わない。線が潰れて可読性と品位が落ちます。

##### Do

本文 400、見出し 500（実フォント W05）。強調が必要ならサイズや左バーで対応し、合成ボールドは使わない。

##### Don't

強い drop shadow `0 2px 8px rgba(0,0,0,0.3)` を使わない。重く見え、印刷時に黒く潰れやすい。

##### Do

ring shadow `0 0 0 1pt` か whisper `rgba 0.05` を使う。あるいは明暗の切り替えで階層を作る。

09 · Background

## 設計の背景

米国株投資が好きで、Claude にリサーチレポートを書かせる場面が多いです。出力はいつも既定のドキュメント風で、灰色で平板、セッションごとにレイアウトが変わる。構成は追いづらく書式は古臭く、読み続ける気になれませんでした。書体、配色、余白をひとつずつ直していき、読んでいて心地よいページに仕上げました。

その後「あなたの知らない Agent：原理、アーキテクチャとエンジニアリング実践」の発表をすることになりました。すでに原稿があったのでスライドを一から作る気にならず、Claude Design で自分のスタイルのまま組版し、何度も調整を繰り返して、ようやく納得のいく仕上がりになりました。inline SVG 図表、暖色パレットの統一、編集リズムの引き締めを加え、よく使う文書形式をすべてカバーするまで育ったので、このプロセスをさらに抽象化して kami にしました。どのエージェントに渡しても安心して出せる、静かなデザインシステムです。