使い方・配信

部品は CSS のクラス(kf- 接頭辞)で、どのフレームワークからも使える。実体は https://design.ka-fune.com/v1/ から配信している。

読み込む#

HTML の head に 2 行。これで書体・トークン・全部品が入る。

<link rel="stylesheet" href="https://design.ka-fune.com/v1/kafune.css">
<script src="https://design.ka-fune.com/v1/kafune.js"></script>

あとはクラスを書くだけ。JSX でもテンプレートでも同じ。

<button class="kf-btn kf-btn-primary">保存する</button>
<span class="kf-status kf-status-ok">完了</span>

ファイル#

URL	中身
https://design.ka-fune.com/v1/kafune.css	tokens + 全部品の CSS。先頭で Google Fonts を @import する。ふつうはこれ 1 つ
https://design.ka-fune.com/v1/kafune.js	window.Kafune(マーク・社名・ボタン・状態・KPI・アバターの HTML、タブの切り替え)
https://design.ka-fune.com/v1/kafune.d.ts	window.Kafune の型。TypeScript から参照する
https://design.ka-fune.com/v1/tokens.css	トークンだけ(色・余白・角・書体の CSS 変数と文字スタイルのクラス)。部品を自前で書くとき
https://design.ka-fune.com/v1/tokens.json	トークンの元。他の道具(Figma、ネイティブ、PDF)に写すとき
https://design.ka-fune.com/v1/logo/…	ロゴの SVG 12 点(favicon.svg、lockup-horizontal-inverse.svg、lockup-horizontal.svg …)

CORS は全許可(Access-Control-Allow-Origin: *)。キャッシュは 1 時間。コードを押すとコピーできる。

JS の補助#

見た目は全部 CSS で決まる。window.Kafune は HTML 文字列を返す補助と、タブの切り替えだけ。

関数	返すもの
Kafune.brandHtml({ href, size })	マーク + KAFUNE の HTML。ヘッダの左
Kafune.markSvg({ size, stroke, ink })	マークのインライン SVG。線は currentColor
Kafune.buttonHtml({ variant, size, label })	ボタン
Kafune.statusHtml(tone, label)	状態ピル
Kafune.kpiHtml({ label, value, unit, sub })	KPI
Kafune.avatarHtml({ name, size, src })	アバター(頭文字)
Kafune.initials(name)	頭文字だけ
Kafune.tabs(root)	タブの切り替えを root に付ける
Kafune.closeMenus()	開いているメニューを閉じる
Kafune.strokeFor(px)	マークの線幅の決まり

版#

• /v1/ の中身は互換を保って更新する(クラス名と変数名を消さない、見た目の微調整はする)。壊す変更が要るときは /v2/ を作り、/v1/ は残す。
• JS の版は window.Kafune.version。CSS の先頭のコメントに生成日が入る。
• 正は git の design/。tokens.json を直して npm run deploy で、このサイトと /v1/ が一緒に更新される。

テーマ#

既定は OS の設定に従う。固定するなら html に data-theme="light" か data-theme="dark"。部品は色の値を直書きしていないので、どちらでも成り立つ。

<html lang="ja" data-theme="dark">

画面の骨組み#

上に Header、左に Sidebar(切り替えが 7 つ以上のとき)、残りが中身。表紙の「組むとこうなる」がこの形。

<header class="kf-header" id="h"></header>
<div class="kf-shell">
  <nav class="kf-side">…</nav>
  <main class="kf-main">…</main>
</div>
<script>document.getElementById('h').innerHTML = Kafune.brandHtml() + '<nav class="kf-nav">…</nav>' + '<span class="kf-who">name@example.com</span>';</script>

自前で持つとき#

外に出られない環境や、ビルドに取り込みたいときは kafune.css と kafune.js をそのまま置く。書体は kafune.css 先頭の @import を外し、Outfit・Noto Sans JP・JetBrains Mono を自分で配る。

ロゴ#

画像で置くなら https://design.ka-fune.com/v1/logo/mark.svg のように参照する。色を変えたいときは Kafune.markSvg({ size }) でインラインに出す(線は currentColor)。線幅の決まりは ロゴのページ。

キーボード#