文字

英数字の見出しと社名は Outfit、本文は Noto Sans JP、ID・日時・コードは JetBrains Mono。金額や件数は本文と同じ書体の等幅数字にする。

スタイルは同名のクラス(.h1、.body …)として tokens.css に入っている。クラス名を押すとコピーできる。

Display `Outfit, "Noto Sans JP", system-ui, sans-serif`#

.display32px / 1.2 / 300 / 0.02em

Craft in Code

ページの大見出し、表紙、名刺の肩書き行。英数字向け。日本語が混じるときは h1 を使う。

.h124px / 1.3 / 400 / 0.02em

見出しの見本

画面の題。1 画面に 1 つ。

.h218px / 1.4 / 400 / 0.01em

節の題の見本

カードや節の題。

.brand15px / 1 / 300 / 0.18em

KAFUNE

ヘッダの社名。ロゴの文字と同じ書体・字間。画像のロゴを使えない場所の代わり。

.body14px / 1.7 / 400

本文の見本。1 文に 1 つのことを書き、行間は 1.7 にする。

本文。表のセル、フォームの値、説明文。

.body-strong14px / 1.7 / 500

強調の見本

本文の中の強調、カードの題名、表の行の主キー。

.small12px / 1.6 / 400

補足の見本。2026-10-24 のような日付もこの大きさ。

補足、項目名、表の見出し行、ヘルプ文。ink-muted と組む。

.label11px / 1.5 / 500 / 0.06em

項目名

小さな見出し。KPI の項目名、ピルの文字、表の見出し。ink-muted と組む。

.kpi26px / 1.2 / 400 / 0

1,234,567

KPI の数字。Outfit の等幅数字(tabular-nums)。ink-strong。

.num14px / 1.7 / 400

12,345

表の中の金額・件数・割合。本文と同じ書体の等幅数字(tabular-nums)。右寄せ。

.code12px / 1.5 / 400

ABC-123 · 2026-10-24 09:00

ID、日時、コマンド、パス。ink-faint と組むことが多い。