JABARAC DESIGN
コンポーネントカタログComponent Catalog
「最もシンプルで、最も信頼でき、一貫した佇まいを持つ」ことを競争軸とする、汎用デザインシステムの部品リファレンス。地は白に近いグレージュ、署名色は一点だけ。署名色は臙脂に固定せず、アプリごとにブランド色を定義できる（左下のAPP BRANDで切替）。見本（プロダクトの図）は角丸を持ち、カタログの版面（地）は罫と図番号だけで組む——図と地に異なる文法を与えることで、図のJabaracDesignらしさが際立つ。
壱
Color & Theming
配色・テーマ地はグレージュ。署名色（--brand）はプロダクト色ではなく記号色で、ロゴ・息継ぎ線・選択の核・共有の封にのみ用いる。署名色は固定値ではなくトークンで、アプリは
--brand-base を1つ差し替えるだけで自分のブランド色を持てる（左下のAPP BRANDで切替して確認できる）。Nightの明度調整は color-mix で自動導出され、各アプリ色でも効く。BASE
Greige--page
Paper--paper
Surface--surface
Line--line
Ink--ink
Taupe--cta / 主動作
SIGNATURE / BRAND（テーマ可能・現在のアプリ色を表示）
Brand--brand
Brand Soft--brand-soft
Moss--ok / success
Ember--err / error
PRODUCT ACCENTS（分類色・彩度を落として沈める）
Sand--c-sand
Sage--c-sage
Rose--c-rose
Slate--c-slate
採用署名色はトークン、固定値ではない。各アプリは
--brand-base を1つ定義するだけで署名色を持つ。臙脂はその既定（House）に過ぎない。掟一画面で署名色が出るのは記号の一点のみ——ロゴ・息継ぎ線・選択の核・共有の封。通常のボタンには使わない（主動作はTaupe）。棄却アプリごとに鮮やかな主張色を複数持たせる案は、スイートが騒がしくなるため捨てた。色は1色、しかも沈める。弐
Typography
書体ほぼ全てのテキストを役割で受ける型階層。背骨は二層構造——明朝（記憶・蓄積の層）が見出し・数値・署名を、角ゴ（操作・現在の層）が本文・UI・補助を担う。サイズは等比ラダーを避け、上に大きく下に密へ不均等に刻む（32／26／22／17／15／13／11.5）。役割ごとに行間・字間を変え、和文は palt で詰め、数値は tnum で揺らさない。
静けさを、規律で支える。Display ・ 明朝 32
記録は、年単位で価値が増す。Headline ・ 明朝 26
今日のできごとTitle ・ 明朝 22
1,284件Data ・ 明朝 32 ・ tnum
見出しと数値は明朝。記憶・蓄積の層として、本文より一段「過去・蓄積」の手触りを持たせる。数値は等幅（tnum）で桁が動いても揺れない。
サブヘッドラインSubhead ・ 角ゴ700 17
本文へ導く一段大きい無強調の段落。要点だけを静かに置き、装飾で押し出さない。Lead ・ 角ゴ 17
本文。記録という行為そのものに敬意を払い、長文でも疲れない行間で組む。和文の読みやすさを最優先に、一行は詰め込みすぎない。Body ・ 角ゴ 15 ・ 1.9
サポーティングテキスト。本文を補い、補足や注意を一段弱い濃度で添える。Supporting ・ 角ゴ 13
図キャプション・脚注に用いる最小の本文。Caption ・ 角ゴ 11.5
SECTION LABEL ／ ラベルLabel ・ 角ゴ700 字間.14
本文と補助は角ゴ。操作・現在の層として可読性を優先する。サブヘッド＝太字17、本文＝15、サポーティング＝13、キャプション／ラベル＝11.5。濃度（ink→ash）でも階層を作る。
この記録は 過去3年 にわたり 1,284 件を数える。詳細は 配色の章 を参照。本文中の強調は地の色へ引き上げ、数値は等幅、リンクは署名色を使わず罫で示す。
最もシンプルで、最も信頼でき、一貫した佇まいを持つ。JabaracDesign 思想
- マーカーは署名色を使わず、地に沈む罫の点で示す。
- 署名色は記号色——ロゴ・息継ぎ線・選択の核・共有の封にのみ用いる。
- 箇条書きは本文と同じ行間で、項目間にだけ一拍の余白を置く。
.ty-strong（強調）／.ty-num（等幅数字）／.ty-link（罫リンク）／.ty-quote（引用・署名色の縦罫）／.ty-list（箇条書き）。SCALE — 役割と用途
| role | 書体 | size | 行間 | 主な用途 |
|---|---|---|---|---|
| .ty-display | 明朝 500 | 32 | 1.5 | 章扉・最大標題 |
| .ty-headline | 明朝 500 | 26 | 1.5 | ヘッドライン |
| .ty-title | 明朝 500 | 22 | 1.55 | タイトル・カード見出し |
| .ty-subhead | 角ゴ 700 | 17 | 1.6 | サブヘッドライン |
| .ty-lead | 角ゴ 400 | 17 | 1.75 | リード（導入段落） |
| .ty-body | 角ゴ 400 | 15 | 1.9 | 本文 |
| .ty-supporting | 角ゴ 400 | 13 | 1.8 | サポーティングテキスト |
| .ty-caption | 角ゴ 400 | 11.5 | 1.7 | キャプション・脚注 |
| .ty-label | 角ゴ 700 | 11.5 | 1.5 | ラベル・オーバーライン（字間.14em） |
| .ty-data | 明朝 tnum | 32 | 1.2 | 数値（桁が動いても揺れない） |
採用二層を書体で分離した。明朝＝記憶・蓄積（見出し・数値・署名）、角ゴ＝操作・現在（本文・UI）。和文は palt で詰め、数値は tnum で等幅。色（ink→ash）でも階層を作り、サイズだけに頼らない。
棄却等比スケール（modular scale 1.25 等）。機械的な均一刻みは全レイヤーが既定値へ収束する「AI感」を強めるため、重みで不均等に刻んだ（上は大胆に、下は密に）。
保留リンク色。署名色は記号色のため本文リンクには使わず、当面は罫（下線）で示す。色付きリンクを導入するかは、用途が固まるまで保留。
参
Space & Radius
余白・角丸・段余白は等差で割らず、内容の重みに応じて不均等に配る。角丸はプロダクト面にだけ存在し、JabaracDesignの署名として働く。段（影）は最小限に留め、面は罫で分ける。
SCALE
| トークン | 値 | 用途 |
|---|---|---|
| --space-* | 4 / 8 / 16 / 24 / 32 / 56 | 機械的な等差ではなく、図版の前は広く・補足の前は詰める |
| --radius-* | control 10 ／ card 12 ／ surface 16 | 角丸はプロダクト見本の中にのみ。版面（カタログ地）は角丸ゼロ |
| --tap-* | min 42 ／ main 48 | 片手・最小タップを前提とした下限 |
| --shadow-* | pop ／ float（既定は0） | 面は罫で分ける。影は Sheet・FAB・Snackbar に限る |
採用段ではなく罫。面の階層は影で作らず、1pxの罫と余白で作る。影は「物理的に浮いているもの」——下からせり上がるシート、押し出されたFAB、画面に浮くスナックバー——にだけ許す。理由なき影は額縁と同じく、AI的な既定値の痕跡になる。
肆
Motion
動き動きは「システムの振る舞いの説明」に限る。雰囲気のための運動は持たない。共通イージング
--ease と、方向の規則（肯定は下から上へ満ち、破壊・退場は上から下へ引く）で全部品を統率する。
押して確かめる
↑ 各ボタンを押すと、内側から色が満ち、離して一拍でその場に引く
押下で色が満ち（fill）、指を離して一拍置いてから引く（drain）。肯定は署名色が下から、破壊は Ember が上から。
prefers-reduced-motion では一切動かない。陸
Chips
選択チップ単一・複数選択の選択肢。選択は
点＋塗り＋枠＋太字 の四重表現で、色覚に依存させない。色は分類色（--accent）に追従する。STATES
Enabled通常
Selected選択（accent）
Selected選択（Slate）
Add追加（ghost）
Disabled無効
SINGLE SELECT
MULTI SELECT
タップで分類色が内側から満ち（満ち引き＝surge）、選択の核（点）も合わせて満ちる。複数選択の解除は上から引く。ラベルは6字目安——長い説明はチップに詰めず、メモ欄へ逃がす。
PROPS
| prop | 値 | 既定 | 備考 |
|---|---|---|---|
| select | single / multi | single | — |
| accent | --accent / .alt | --accent | 表示中プロダクトの分類色 |
| variant | default / ghost | default | ghost＝追加用 |
| label | ≤ 6字目安 | — | 長文は折返し崩れ |
採用満ち引き（surge）をボタン・ラジオ／チェックと共有し、方向の規則を守る——選択＝上から満ち、解除＝上から引く。色は記号色 brand ではなく分類色 --accent に追従させ、解除は中立の ash にして「破壊」と読ませない。
採用四重表現の一つ「点」を静止画ではなく動かす。常設した核を scale で満たし、選択が「点く」瞬間そのものを所作にする。
棄却マテリアル的なリップル（中心から広がる波紋）。出自が他システムで JabaracDesign の身体感に合わず、満ち引きへ置換した。
漆
Text Fields
入力メモ・短文の自由入力。フォーカス時の枠は署名色。書き手の言葉を扱う手紙系は明朝で組み、字数を控えめに添える。
STATES
Empty未入力
Focus合焦（枠＝brand）
Counter字数（手紙）
10 / 200
Error超過
200字を超えています。短くまとめてみましょう。
Disabled無効
PROPS
| prop | 値 | 既定 | 備考 |
|---|---|---|---|
| type | memo / letter | memo | letter は明朝・字数表示 |
| maxlength | — | 200（letter） | 超過で Ember |
| min-height | 48 / 72 | 72（area） | — |
捌
Switch
トグル設定のオン/オフ。オンの色は署名色——設定はシステム自身の振る舞いであり、記号色を許す数少ない例外。
STATES
On
Off
Disabled
玖
Stepper
数量の増減回数・分数など、片手で素早く調整する数値入力。キーボードを開かせない。境界では当該ボタンを無効化する。
30分
5刻み。減は上から引き（down）、増は下から満ちる。0未満にはしない。
PROPS
| prop | 値 | 備考 |
|---|---|---|
| step | 数値 | 用途別（分＝5 / 回数＝1） |
| min / max | 数値 | 境界で当該ボタンを無効化 |
| unit | 文字 | 明朝・等幅数字 |
拾
Slider
連続値おおよその量・強さの感覚的な指定。トラックは署名色。正確な数値が要るときは Stepper を使う。
感覚的でよいときは Slider、正確さが要るときは Stepper。役割を分ける。
拾壱
Radio / Check
単一・複数選択チップが馴染まない縦並びの選択に。マークは署名色で、満ちるように現れる。ラジオは再タップで解除しない（単一選択の保証）。
RADIO（単一）
軽い
普通
きつい
CHECK（複数）
記録を共有する
毎日のふりかえりを受け取る
チェックは解除があるため、解除時のみ上から引く（down）。ラジオは常に下から満ちる。
拾弐
Segmented
表示切替同一画面内の表示モード切替（リスト／グリッド、日／週／月）。つまみが横に滑って追従し、瞬間移動しない。選択肢は2–4。
つまみは滑って移動する。Switch（設定の真偽）とは別物で、これは表示の切替。
拾参
Cards
保管札・記録カード記録は消費される投稿ではなく、保管札である。時刻・種類アイコン・題・記録者・詳細導線で構成。記録者は助詞で語る（ログ＝「が記録」、手紙＝「から」）。
07:30朝のできごとHaruki が記録
よく晴れた。少し早く起きられた。
よく晴れた。少し早く起きられた。
21:10今日のひとことHaruki から
ありがとう。おつかれさま。
ありがとう。おつかれさま。
本文は2行まで。3行目は省略し、詳細へ送る。「再会の瞬間」に最も美しくあるための簡潔さ。
SEAL — 保存・共有状態
保存済み
共有済み
採用投稿ではなく保管札。SNS的な「いいね」「既読」「連続記録」は置かない。封（Seal）は保存済み・共有済みという事実だけを淡く示し、共有済みのときだけ署名色を許す。棄却滞在を促す通知バッジ・未読カウントの常設は、信頼を損なうため捨てた。
PROPS
| prop | 値 | 備考 |
|---|---|---|
| kind | log / note | 記録者の助詞が変わる |
| accent | product依存 | アイコン円の色 |
| lines | ≤ 2 | 3行目は省略し詳細へ |
| seal | saved / shared | shared のみ署名色。既読は表示しない |
拾肆
List Item
設定・選択リスト設定や選択肢の縦リスト。保管札（Cards）とは別物で、こちらは操作の入口。右端は導線（→）か状態（件数・時刻）。
きょうの記録
入力へ
入力へ
メッセージ
睡眠
タップで背景がやわらかく満ちる。区切りは罫のみで、行ごとにカード化しない。
拾伍
Bottom Sheet
選択シート画面下からせり上がる選択面。グリップ＋署名の息継ぎ線で「JabaracDesignの面」と分かる。登場は下から満ち、退場は下へ引く。
記録の種類
できごと
睡眠
ひとこと
背後は薄い暗幕。影は「物理的に浮いている面」にのみ許される一例。
拾陸
Dialog
確認・破壊的操作取り消せない操作の最終確認のみに使う。日常の保存には使わない（保存は即時＋取り消し）。破壊的確認は息継ぎ線も確定ボタンも Ember。
この記録を削除しますか
削除すると、共有先のタイムラインからも消えます。
肯定的な確認なら Taupe、破壊的なら Ember。両ボタンとも上から引く（down）。
採用確認の代わりに取り消し。日常操作にダイアログで割り込まない。保存は即時に終え、Snackbar の「取り消す」で回復路を残す。ダイアログは「取り消せない一線」を越えるときだけ立ち上がる。
拾漆
Tab Bar
フッターナビアプリ最上位のナビ。選択中は署名色と上辺インジケータ（左右に満ちる）で示す。中央のFABは記録への近道で、塗りの署名色を許す唯一の例外。
タブは2–4＋FABの5枠まで。多機能化しない。FABの円のみ塗りの署名色（主動作の象徴）。
PROPS
| prop | 値 | 備考 |
|---|---|---|
| items | 2–4 ＋ FAB | 5枠まで |
| selected | index | 署名色＋上辺インジケータ |
| fab | 記録 | 中央固定。塗り署名色を許す例外 |
拾玖
Snackbar
一時的な通知操作の結果を数秒だけ伝える。Feedback より軽く、画面下に浮く。行動は1つ（多くは「取り消す」）。数秒で下へ退場する。
記録を1件、削除しました
確認ダイアログを置かず、ここに回復路（取り消す）を残す。
弐拾
Feedback
保存・取り消し・エラー保存は即時。失敗は謝らず、事実と回復手段だけを示す（Ember）。トーンは「事実 → 現状 → 回復手段」。
保存しました 14:06
保存できませんでした。記録は端末に残っています
成功＝Moss、失敗＝Ember。行動は常に1つだけ添える。
PROPS
| prop | 値 | 備考 |
|---|---|---|
| type | success / error | success＝Moss / error＝Ember |
| action | undo / retry | 常に1つ |
| tone | — | 謝らない。事実→現状→回復手段 |
弐拾壱
Progress
待ち時間読み込みの表示。線は署名色、回転とドットは控えめに。急かす点滅はしない。確定的な進捗はバー、不確定は回転かドット。
点滅速度はゆるやかに。ユーザーを急かさない。
弐拾弐
Avatar
人の識別記録者・メンバーの識別。写真がなければ頭文字を明朝で。色は控えめに。重ねはまとまりを示す。
H
H
和
ABC
サイズ sm 28 / md 40 / lg 56。頭文字は明朝で「記憶の層」に置く。
弐拾参
Tag / Badge
分類・件数記録の分類タグと、未読・件数バッジ。分類タグは無彩か淡い分類色。件数バッジだけ署名色を許す（気づきを促すため）。
睡眠
できごと
保存済み
メッセージ 3
件数バッジの署名色は「注意を要する数」だけ。常設の未読煽りには使わない。
弐拾肆
Section Header
署名・一拍置く見出しJabaracDesignの署名。見出しの下に署名色の息継ぎ線、その下に一拍遅れた淡い補助。全プロダクト・全画面の主見出しに同じ所作で現れる——これがスイートを貫く「作法の統一」の核。
今日の記録
6月14日 日曜日
見た目（色・形）ではなく、この所作の共通性でスイートの一貫性を担保する。
RULES
| 要素 | 仕様 |
|---|---|
| 息継ぎ線 | 幅28px・太さ1.5px・色＝brand。一画面に主見出しの1本のみ |
| 補助 | 色＝ash・字間.22em・主見出しの後に配置 |
| 沈黙 | 見出し上に1行分の余白を確保し、一拍置く |
JabaracDesign.
版 第一版 ／ 2026年6月
署名色 --brand（既定 臙脂 #9B3A3A・アプリで差替）
書体 しっぽり明朝 ／ Zen角ゴシック New
収録 22図 ／ Foundations 4・Components 20
本書は「印刷された仕様見本帳」の文法で組まれている。見本（図）は角丸を持ち、版面（地）は罫と図番号で区切る。CSSは2層のデザイントークン（Primitive→Semantic）で管理し、署名色は固定せずアプリごとに
--brand-base を差し替える。理由なき額縁・無意味な装飾・均一なリズムを排し、設計判断は欄外の註に採用・棄却として残した。