Design Catalog

デザインカタログ

本ドキュメントセットで利用可能なデザインコンポーネントの見本帳です。文書の構成（章立てや分量）は作成者に委ねますが、見た目を一定に保つため、ここに掲載されている要素のクラスをそのまま流用してください。新規ドキュメントは src/pages/<slug>.ejs を作成し、本カタログの該当要素をコピー＆ペーストして組み立てます。

01 / Foundations

カラーパレット

本文・補助テキスト・罫線・コードなどに用いる中立色と、リンクや強調に用いる単一のアクセントカラー。

Neutrals

--bg

#ffffff

--bg-subtle

#fafafa

--bg-code

#f6f6f5

--border

#e7e7e5

--fg-faint

#8a8f97

--fg-muted

#5b6068

--fg

#1a1a1a

Accent

--accent

#2563eb

--accent-soft

#eff4ff

アクセントはリンクと <em> のマーカー1色のみ。彩度の高い色を増やさないことで本文への集中を保ちます。

02 / Foundations

タイポグラフィ

本文は Noto Sans JP（400/600/700）、メタ情報・コードは JetBrains Mono。本文の line-height は 1.8。

Headings — class="prose"

H1 / 章タイトル

H2 / セクション

H3 / サブセクション

H4 / 小見出し

本文ブロックは <div class="prose"> でラップしてください。要素間マージンと罫線（H2 下線）が自動で付きます。

Body — paragraph, emphasis, inline code, link

本文は 15px / line-height 1.8 を標準とします。日本語の連続でも読みやすく、句読点の前後のマーカーハイライトや、太字、inline code、リンク、[1] といったインライン要素が利用できます。

Type scale

34px / 700ドキュメントタイトル

28px / 700H1 章タイトル

22px / 700H2 セクション

17.5px / 700H3 サブセクション

15px / 400本文 / Body — 日本語と English が混在する典型的な本文。

13px / 400補助テキスト / Supporting text

11px / 600 monoEYEBROW / LABEL

03 / Patterns

ドキュメントヘッダー

タイトル・概要・メタ情報のセット。各ドキュメントの先頭に1つ配置する想定。

.doc-header

CATEGORY / IDENTIFIER

ドキュメントタイトルをここに記述します

本ドキュメントの概要を1〜3文で記述します。読者がスクロールせずに目的・対象・前提を把握できる粒度に留めます。

Author 山田太郎

Updated 2026-05-28

Version v1.0.0

メタ項目（Author / Updated / Version など）は必要なものだけ追加・削除して使用してください。

04 / Prose

リスト・引用

箇条書き・番号付きリスト・引用ブロック。.prose 内で使用します。

Unordered list

最初の項目。1行に収まらない場合も自然に折り返します。
2 つめの項目
- ネストした項目（インデントが付きます）
- さらに項目
3 つめの項目

Ordered list

手順を順に並べる場合に使用します。
連番は等幅フォントで表示されます。
ネストにも対応します。

Blockquote

引用は本文より少し薄い色で、左側にうっすらした罫線を付けて区別します。長い引用も読みやすいよう、段落間にも余白が入ります。

— 出典をここに記述

05 / Prose

表

列幅は内容に応じて style="width:..." で指定可能。横スクロールが必要な広い表にも対応します。

.table-wrap > table

項目	値	備考
`parameter-a`	true / false	既定値は `false`
`parameter-b`	0 — 100	0 未満および 100 超は不正値
`parameter-c`	string	UTF-8、最大 256 文字

06 / Prose

コードブロック

ファイル名や言語をヘッダに表示します。シンタックスハイライトはトークンクラス（tk-c コメント / tk-k キーワード / tk-s 文字列 / tk-n 数値 / tk-f 関数）を手で付与します。

.prose > pre + .code-head

typescriptsrc/example.ts
// 認証 → バリデーション → ハンドラの順に実行する
export async function handleRequest(req: Request): Promise<Response> {
  const user = await authenticate(req);
  if (!user) return json({ error: "unauthorized" }, 401);

  const result = await runUseCase(req, { user });
  return json(result, 200);
}

Shell — minimal

shellops
$ npm install
$ npm run build
$ npm run deploy --env=production

07 / Patterns

コールアウト

補足・注意・警告・成功の 4 種類。必要に応じて .callout__title を省略しても可。

.callout.callout--info

補足

追加の文脈や背景を補う情報。読まなくても本文は理解できる位置づけ。

.callout.callout--warn

注意

誤読されやすい仕様、注意して読むべき例外。

.callout.callout--danger

警告

取り返しが付かない操作、破壊的変更、不可逆な手順など。

.callout.callout--ok

完了条件

満たすべき条件、成功時の状態を示す。

08 / Patterns

図版

構成図・画面ショットなどの挿入用。.figure__media 内に <img> を入れるか、ストライプ背景のプレースホルダーで仮置きします。

.figure

FIGURE / placeholder.svg

Fig. 1 キャプションは図版番号と説明文を並べて記述します。複数行にわたっても番号は折り返しません。

09 / Patterns

脚注 / 参考文献

本文中のインライン参照（.fn-ref）と、ドキュメント末尾の脚注リストの組み合わせ。

Inline reference

本文中で参考情報を脚注として示す例[1]。複数の脚注を 1 文中で示すこともあります[2]。

.footnotes block — ドキュメント末尾

脚注 / 参考文献

参考にした書籍・ドキュメント・記事の出典をここに記述します。
URL を含む場合はリンク表記を使用します。