Design System
⌘K

ブランドブック

株式会社Kafune の見た目と言葉の決まり。サイト(ka-fune.com)、名刺、社内のアプリ、スライド、メールの署名まで、Kafune の名前で出るものはすべてここに従う。迷ったらこの文書を引き、ここに無い判断は代表に聞いてから足す。

言葉

  • 日本語で書く。文は短く、1 文に 1 つのこと。語尾は「です・ます」より「〜する」「〜した」の体言止めと動詞止めを優先する(画面の中では敬語を省く)。
  • 書くのは、聞かれたこと・判断に要ること・型として要ることだけ。頼まれていない約束を足さない。
  • 数字は 3 桁区切り、円は「12,300 円」か表の見出しに「(円)」。日付は 2026-10-24、時刻は 09:00。
  • 状態は名詞か「〜済み」「〜待ち」(完了、確認待ち、進行中)。同じ状態に同じ言葉を使う。
  • ボタンは動詞(登録する、送る、取り消す)。「OK」「はい」「確認」だけのボタンは置かない。
  • 社名は文中では「株式会社Kafune」か「Kafune」。英字のロゴ・署名では KAFUNE(全部大文字、brand スタイル)。肩書きの行は「Craft in Code — Tokyo」。
  • 絵文字は画面の部品に使わない。感嘆符は使わない。

色

  • 地は page、面は surface、一段沈めるときは surface-sunken。面は影でなく line の 1px で分ける。
  • 文字は ink。見出し・KPI の数字・行の主キーは ink-strong。項目名と補足は ink-muted、日時と ID は ink-faint。ink-faint より薄い文字は置かない(4.5:1 を切る)。
  • 差し色 accent(#88C0D0)は、ロゴの点、選択範囲、進捗の塗り、現在地の下線にだけ使う。文字にはしない(白地で 2:1)。塗りの上の文字は on-accent。薄く使うなら accent-soft。
  • リンクは link。下線は hover で出す。
  • 主ボタンの塗りは primary、文字は on-primary。画面に 1 つ。
  • 状態の色は ok warn danger info の 4 組。地は -soft、文字と点は -ink。色だけで意味を伝えず、必ず言葉を添える。ok と danger は明度でも区別がつく(緑と赤の色相だけに頼らない)。
  • 暗い配色(dark)は [data-theme="dark"] か OS の設定で切り替わる。トークン名は変わらないので、部品は色の値を直書きしない。
  • 全体の色は Nord の青灰を土台にしている。新しい色を足すときは Nord から取り、ここに書いてから使う。

文字

  • 英数字の見出しと社名は display 族(Outfit)。本文は sans(Noto Sans JP)。ID・日時・コードは mono(JetBrains Mono)。金額や件数は本文と同じ書体で、等幅数字(tabular-nums)にする。mono は数字には使わない(幅が広く見える)。3 つとも Google Fonts から読む(300/400/500)。
  • 画面の題は h1、節の題は h2、本文は body、補足は small、小さな見出しは label。表紙や LP の大見出しだけ display。
  • 金額・件数・割合は num(Noto Sans JP)、大きく見せるなら kpi(Outfit)。どちらも tabular-nums で桁を揃え、右寄せにする。
  • 本文の行間は 1.7。字間は Outfit の見出しだけ少し広げる(display 0.02em、brand 0.18em)。太字は 500 まで。700 は使わない。
  • 書体が無い環境(PDF、画像、メール)では、ロゴは assets/Logos のアウトライン化した SVG を使う。

余白・角・線・影

  • 余白は 4px の倍数。space-2(8)で部品の中、space-4(16)でカードの内側と行間、space-6(24)でカードの間、space-8(32)で画面の左右と節の間。
  • 角は radius-sm(4)を操作部品に、radius-md(8)を面に、radius-pill をピルに。それより丸い角は使わない。
  • 線は line の 1px。操作対象の縁だけ line-strong(3:1 を保つ)。2px の線は現在地の下線と罫の強調にだけ。
  • 影は浮いているもの(メニュー、ダイアログ)にだけ shadow-pop。カードや表に影を付けない。光彩も付けない。
  • フォーカスは消さない。ボタン・リンク・選択は focus の 2px 実線(outline-offset 2px)。入力欄は枠を focus 色にして外に薄い輪(3px、24%)。入力欄に太い実線を重ねない。

ロゴ

  • マークは「帆の K」。パスは ka-fune.com/favicon.svg のもので、形を描き直さない。変えてよいのは線幅と色だけ。
  • 線幅は大きさで決める。32px 以下は 1.8、48px 以上は 1.0、印刷は線の実寸 0.2mm(高さ 13mm なら 0.5)。
  • 線と文字は ink、4 つの点は accent。暗い地の上は -inverse(線と文字が #ECEFF4)。
  • 文字は KAFUNE、Outfit 300、字間 0.18em。横組みはマークの描画高さ = 文字のキャップハイト。縦組みはマークを文字の 1.5 倍にして上に置く。
  • 置き方の詳細は Logo の部品と assets/Logos の README。

アイコン

  • 絵文字は使わない。アイコンが要るときは 1.5px の線画(stroke、currentColor、角丸)で、マークと同じ筆致にする。塗りのアイコンは使わない。
  • アイコンだけのボタンには必ず aria-label を付ける。意味を持つアイコンは隣に言葉を置く。
  • 決まったアイコン集はまだ無い。足すときは assets/Icons に 24px の SVG で置き、README に用途を書く。

画面の組み方

  • 上に Header、下に内容。内容は Card を space-6 で並べる。幅は最大 1120px、スマホでは左右 space-4。
  • 主役は情報で、部品ではない。目立つ色や強い影は、読むべきものから目を奪う。
  • 入力は少なく。判断が要るところだけ warn で示す。
  • 一覧は Table、数字は Kpi、状態は Status、その場の知らせは Notice。
  • ダークは同じ部品で成り立つようにし、画像のロゴだけ -inverse に差し替える。

やらないこと

やらない理由
青紫のグラデーション、光彩の影作り物に見える。Kafune の色は青灰と水色の 2 つで足りる
左に色の帯を付けたカード帯が情報より先に目に入る。状態は Status と Notice で
彩度の高い原色の差し色毎日見る業務の画面で疲れる
radius-md より丸い角、丸い大きなボタン玩具に見える
画面の部品に絵文字環境で見え方が変わり、意味も曖昧
中央寄せの大見出し + 大きなボタン 1 つLP の構図。道具の画面ではない
ロゴの描き直し、傾け、色の置き換え会社の顔。代表の判断なしに形を変えない
色だけで示す状態・増減言葉と記号で示す
消えるトースト読む前に消える。Notice を残す

使い方

  • トークンは tokens.json が正。tokens.css はそこから生成する(design/scripts/build-tokens.mjs、コントラストの検査つき)。CSS では var(--ink) のように参照し、値を直書きしない。
  • 部品は components/bundle.css のクラス(kf- 接頭辞)。JSX・テンプレートから直接クラスを書く。components/bundle.js の window.Kafune はマークと社名を出す補助。
  • ロゴは assets/Logos。生成は design/scripts/build-logo.mjs。
  • 配信は https://design.ka-fune.com/v1/kafune.css と kafune.js(読み込み方は「使い方・配信」のページ)。
  • 正は git の design/。このサイト(design.ka-fune.com)はそこから生成したもの。
コピーした