JABARAC DESIGN
コンポーネントカタログComponent Catalog
「最もシンプルで、最も信頼でき、一貫した佇まいを持つ」ことを競争軸とする、汎用デザインシステムの部品リファレンス。地は白に近いグレージュ、署名色は一点だけ。署名色は臙脂に固定せず、アプリごとにブランド色を定義できる（左下のAPP BRANDで切替）。見本（プロダクトの図）は角丸を持ち、カタログの版面（地）は罫と図番号だけで組む——図と地に異なる文法を与えることで、図のJabaracDesignらしさが際立つ。A component reference for a general-purpose design system that competes on being "the simplest, the most trustworthy, with a consistent bearing." The ground is a near-white greige; the signature color appears just once. It is not fixed to crimson—each app defines its own brand color (switch it under APP BRAND, lower left). The specimens (the product figures) carry rounded corners, while the catalog's page (the ground) is set with rules and figure numbers alone—giving figure and ground different grammars lets the JabaracDesign character of the figure stand out.
壱
Color & Theming
配色・テーマ地はグレージュ。署名色（--brand）はプロダクト色ではなく記号色で、ロゴ・息継ぎ線・選択の核・共有の封にのみ用いる。署名色は固定値ではなくトークンで、アプリは
--brand-base を1つ差し替えるだけで自分のブランド色を持てる（左下のAPP BRANDで切替して確認できる）。Nightの明度調整は color-mix で自動導出され、各アプリ色でも効く。The ground is greige. The signature color (--brand) is not a product color but a symbolic one, used only for the logo, the breath line, the core of selection, and the seal of sharing. It is a token, not a fixed value—an app gets its own brand color by swapping a single --brand-base (try it under APP BRAND, lower left). Night's brightness adjustment is derived automatically with color-mix and works for every app color.BASE
Greige--page
Paper--paper
Surface--surface
Line--line
Ink--ink
Taupe--cta / 主動作--cta / primary action
SIGNATURE / BRAND（テーマ可能・現在のアプリ色を表示）SIGNATURE / BRAND (themeable · shows the current app color)
Brand--brand
Brand Soft--brand-soft
Moss--ok / success
Ember--err / error
PRODUCT ACCENTS（分類色・彩度を落として沈める）PRODUCT ACCENTS (classification colors · desaturated to recede)
Sand--c-sand
Sage--c-sage
Rose--c-rose
Slate--c-slate
採用署名色はトークン、固定値ではない。各アプリは
--brand-base を1つ定義するだけで署名色を持つ。臙脂はその既定（House）に過ぎない。掟一画面で署名色が出るのは記号の一点のみ——ロゴ・息継ぎ線・選択の核・共有の封。通常のボタンには使わない（主動作はTaupe）。棄却アプリごとに鮮やかな主張色を複数持たせる案は、スイートが騒がしくなるため捨てた。色は1色、しかも沈める。AdoptedThe signature is a token, not a fixed value. Each app gets its signature by defining a single --brand-base. Crimson is merely the default (House). RuleOn one screen the signature appears at only one symbolic point—logo, breath line, the core of selection, the seal of sharing. It is never used on ordinary buttons (the primary action is Taupe). RejectedGiving each app several vivid assertive colors was discarded—it makes the suite noisy. One color, and a sunken one at that.弐
Typography
書体ほぼ全てのテキストを役割で受ける型階層。背骨は二層構造——明朝（記憶・蓄積の層）が見出し・数値・署名を、角ゴ（操作・現在の層）が本文・UI・補助を担う。サイズは等比ラダーを避け、上に大きく下に密へ不均等に刻む（32／26／22／17／15／13／11.5）。役割ごとに行間・字間を変え、和文は palt で詰め、数値は tnum で揺らさない。A type scale that catches nearly every kind of text by role. Its spine is a two-layer structure—Mincho serif (the layer of memory & accumulation) carries headings, numbers, and signatures, while Gothic sans (the layer of action & the present) carries body, UI, and support. Sizes avoid a geometric ladder, stepping unevenly—bold at the top, dense at the bottom (32 / 26 / 22 / 17 / 15 / 13 / 11.5). Leading and tracking change per role; Japanese is tightened with palt, numbers held steady with tnum.
静けさを、規律で支える。Quiet, upheld by discipline.Display ・ 明朝 32Display · Mincho 32
記録は、年単位で価値が増す。A record gains value by the year.Headline ・ 明朝 26Headline · Mincho 26
今日のできごとToday's notesTitle ・ 明朝 22Title · Mincho 22
1,284件 itemsData ・ 明朝 32 ・ tnumData · Mincho 32 · tnum
見出しと数値は明朝。記憶・蓄積の層として、本文より一段「過去・蓄積」の手触りを持たせる。数値は等幅（tnum）で桁が動いても揺れない。Headings and numbers are Mincho. As the layer of memory and accumulation, they carry a touch more of "the past, the accrued" than the body. Numbers are monospaced (tnum) so digits never shift.
サブヘッドラインSubheadlineSubhead ・ 角ゴ700 17Subhead · Gothic 700 · 17
本文へ導く一段大きい無強調の段落。要点だけを静かに置き、装飾で押し出さない。A larger, unemphasized paragraph that leads into the body. It sets down only the essentials, quietly, without pushing through decoration.Lead ・ 角ゴ 17Lead · Gothic 17
本文。記録という行為そのものに敬意を払い、長文でも疲れない行間で組む。和文の読みやすさを最優先に、一行は詰め込みすぎない。Body text. It honors the act of recording itself, set with leading that stays easy even at length. Japanese readability comes first; a line is never overpacked.Body ・ 角ゴ 15 ・ 1.9Body · Gothic 15 · 1.9
サポーティングテキスト。本文を補い、補足や注意を一段弱い濃度で添える。Supporting text. It complements the body, adding notes and cautions at a lighter density.Supporting ・ 角ゴ 13Supporting · Gothic 13
図キャプション・脚注に用いる最小の本文。The smallest body, for figure captions and footnotes.Caption ・ 角ゴ 11.5Caption · Gothic 11.5
SECTION LABEL ／ ラベルSECTION LABELLabel ・ 角ゴ700 字間.14Label · Gothic 700 · tracking .14
本文と補助は角ゴ。操作・現在の層として可読性を優先する。サブヘッド＝太字17、本文＝15、サポーティング＝13、キャプション／ラベル＝11.5。濃度（ink→ash）でも階層を作る。Body and support are Gothic. As the layer of action and the present, readability comes first. Subhead = bold 17, body = 15, supporting = 13, caption / label = 11.5. Density (ink→ash) builds hierarchy too.
この記録は 過去3年 にわたり 1,284 件を数える。詳細は 配色の章 を参照。本文中の強調は地の色へ引き上げ、数値は等幅、リンクは署名色を使わず罫で示す。This record counts 1,284 entries over the past three years. See the Color chapter for details. In-text emphasis is lifted to the ground color, numbers are monospaced, and links are shown with a rule rather than the signature color.
最もシンプルで、最も信頼でき、一貫した佇まいを持つ。JabaracDesign 思想The simplest, the most trustworthy, a consistent bearing.JabaracDesign philosophy
- マーカーは署名色を使わず、地に沈む罫の点で示す。Markers avoid the signature color, shown as a rule-dot that sinks into the ground.
- 署名色は記号色——ロゴ・息継ぎ線・選択の核・共有の封にのみ用いる。The signature is a symbolic color—used only for logo, breath line, the core of selection, the seal of sharing.
- 箇条書きは本文と同じ行間で、項目間にだけ一拍の余白を置く。Lists share the body's leading, placing a single beat of space only between items.
.ty-strong（強調）／.ty-num（等幅数字）／.ty-link（罫リンク）／.ty-quote（引用・署名色の縦罫）／.ty-list（箇条書き）。.ty-strong (emphasis) / .ty-num (monospaced figures) / .ty-link (rule link) / .ty-quote (quote · signature-color vertical rule) / .ty-list (bulleted list).SCALE — 役割と用途SCALE — role & use
| role | 書体font | size | 行間leading | 主な用途primary use |
|---|---|---|---|---|
| .ty-display | 明朝 500Mincho 500 | 32 | 1.5 | 章扉・最大標題Chapter title · largest |
| .ty-headline | 明朝 500Mincho 500 | 26 | 1.5 | ヘッドラインHeadline |
| .ty-title | 明朝 500Mincho 500 | 22 | 1.55 | タイトル・カード見出しTitle · card heading |
| .ty-subhead | 角ゴ 700Gothic 700 | 17 | 1.6 | サブヘッドラインSubheadline |
| .ty-lead | 角ゴ 400Gothic 400 | 17 | 1.75 | リード（導入段落）Lead (intro paragraph) |
| .ty-body | 角ゴ 400Gothic 400 | 15 | 1.9 | 本文Body |
| .ty-supporting | 角ゴ 400Gothic 400 | 13 | 1.8 | サポーティングテキストSupporting text |
| .ty-caption | 角ゴ 400Gothic 400 | 11.5 | 1.7 | キャプション・脚注Caption · footnote |
| .ty-label | 角ゴ 700Gothic 700 | 11.5 | 1.5 | ラベル・オーバーライン（字間.14em）Label · overline (tracking .14em) |
| .ty-data | 明朝 tnumMincho tnum | 32 | 1.2 | 数値（桁が動いても揺れない）Numbers (steady as digits change) |
採用二層を書体で分離した。明朝＝記憶・蓄積（見出し・数値・署名）、角ゴ＝操作・現在（本文・UI）。和文は palt で詰め、数値は tnum で等幅。色（ink→ash）でも階層を作り、サイズだけに頼らない。
棄却等比スケール（modular scale 1.25 等）。機械的な均一刻みは全レイヤーが既定値へ収束する「AI感」を強めるため、重みで不均等に刻んだ（上は大胆に、下は密に）。
保留リンク色。署名色は記号色のため本文リンクには使わず、当面は罫（下線）で示す。色付きリンクを導入するかは、用途が固まるまで保留。
AdoptedThe two layers are split by typeface. Mincho = memory & accumulation (headings, numbers, signature); Gothic = action & the present (body, UI). Japanese is tightened with palt, numbers monospaced with tnum. Density (ink→ash) builds hierarchy too, so it never rests on size alone.
RejectedA geometric scale (modular scale 1.25, etc.). Mechanically even steps push every layer toward the default—the "AI look"—so it is stepped unevenly by weight (bold at the top, dense at the bottom).
DeferredLink color. Since the signature is a symbolic color, body links don't use it and are shown with a rule (underline) for now. Whether to introduce a colored link is deferred until the use is settled.
参
Space & Radius
余白・角丸・段余白は等差で割らず、内容の重みに応じて不均等に配る。角丸はプロダクト面にだけ存在し、JabaracDesignの署名として働く。段（影）は最小限に留め、面は罫で分ける。Space is not divided evenly; it is distributed unevenly by the weight of the content. Rounded corners exist only on product surfaces, working as the JabaracDesign signature. Elevation (shadow) is kept to a minimum—surfaces are separated by rules.
SCALE
| トークンtoken | 値value | 用途use |
|---|---|---|
| --space-* | 4 / 8 / 16 / 24 / 32 / 56 | 機械的な等差ではなく、図版の前は広く・補足の前は詰めるNot a mechanical progression—wide before a figure, tight before a note |
| --radius-* | control 10 ／ card 12 ／ surface 16control 10 / card 12 / surface 16 | 角丸はプロダクト見本の中にのみ。版面（カタログ地）は角丸ゼロRounding lives only inside product specimens. The page (catalog ground) has none |
| --tap-* | min 42 ／ main 48min 42 / main 48 | 片手・最小タップを前提とした下限A floor assuming one-handed, minimum taps |
| --shadow-* | pop ／ float（既定は0）pop / float (default 0) | 面は罫で分ける。影は Sheet・FAB・Snackbar に限るSurfaces split by rules. Shadow is limited to Sheet, FAB, Snackbar |
採用段ではなく罫。面の階層は影で作らず、1pxの罫と余白で作る。影は「物理的に浮いているもの」——下からせり上がるシート、押し出されたFAB、画面に浮くスナックバー——にだけ許す。理由なき影は額縁と同じく、AI的な既定値の痕跡になる。AdoptedRules, not elevation. Surface hierarchy is built with 1px rules and space, not shadow. Shadow is allowed only on things "physically floating"—a sheet rising from below, an extruded FAB, a snackbar hovering over the screen. A shadow without reason, like a frame without reason, is a trace of the AI default.
肆
Motion
動き動きは「システムの振る舞いの説明」に限る。雰囲気のための運動は持たない。共通イージング
--ease と、方向の規則（肯定は下から上へ満ち、破壊・退場は上から下へ引く）で全部品を統率する。Motion is limited to "explaining the system's behavior." There is no movement for mood. A shared easing --ease and a rule of direction (the affirmative fills upward from below; the destructive or departing draws downward from above) govern every component.
押して確かめるpress to feel it
↑ 各ボタンを押すと、内側から色が満ち、離して一拍でその場に引く↑ press each button: color fills from within, then draws back a beat after release
押下で色が満ち（fill）、指を離して一拍置いてから引く（drain）。肯定は署名色が下から、破壊は Ember が上から。
prefers-reduced-motion では一切動かない。On press, color fills; a beat after release, it drains. The affirmative fills with the signature from below; the destructive with Ember from above. Under prefers-reduced-motion nothing moves at all.陸
Chips
選択チップ単一・複数選択の選択肢。選択は
点＋塗り＋枠＋太字 の四重表現で、色覚に依存させない。色は分類色（--accent）に追従する。Choices for single or multiple selection. Selection is a fourfold expression—dot + fill + border + bold—so it never relies on color vision. The color follows the classification accent (--accent).STATES
Enabled通常default
Selected選択（accent）selected (accent)
Selected選択（Slate）selected (Slate)
Add追加（ghost）add (ghost)
Disabled無効disabled
SINGLE SELECT
MULTI SELECT
選択すると分類色が下から満ち（満ち引き）、選択の核（点）も合わせて満ちる。選択解除では水位が引くように消える。ラベルは6字目安——長い説明はチップに詰めず、メモ欄へ逃がす。Selecting fills the accent from below (the tide coming in), and the core of selection (the dot) fills with it. Deselecting ebbs away as the level falls. Keep labels to about six characters—long descriptions go to a memo field, not the chip.
PROPS
| prop | 値value | 既定default | 備考notes |
|---|---|---|---|
| select | single / multi | single | — |
| accent | --accent / .alt | --accent | 表示中プロダクトの分類色the current product's classification color |
| variant | default / ghost | default | ghost＝追加用ghost = for adding |
| label | ≤ 6字目安≤ ~6 chars | — | 長文は折返し崩れlong text breaks the wrap |
採用満ち引き（潮）の比喩を選択状態に直結させた——選択＝水位が下から満ち、解除＝水位が引く。共通surgeの押下駆動ではなく、選択／解除そのものが動きを起こす。色は記号色 brand ではなく分類色 --accent に追従。
採用四重表現の一つ「点」を静止画ではなく動かす。常設した核を scale で満たし、選択が「点く」瞬間そのものを所作にする。
棄却マテリアル的なリップル（中心から広がる波紋）。出自が他システムで JabaracDesign の身体感に合わず、満ち引きへ置換した。
AdoptedThe tide metaphor is tied directly to selection state—select = the level fills from below, deselect = the level ebbs away. Rather than the shared press-driven surge, the act of selecting or deselecting is itself what moves. The color follows the classification --accent, not the symbolic brand.
AdoptedOne of the fourfold cues, the "dot," is moved rather than left static. A permanent core is filled with scale, making the very instant of selection a gesture.
RejectedThe Material-style ripple (a wave spreading from the center). Its origin is another system and it clashes with the bodily feel of JabaracDesign, so it was replaced with the surge.
漆
Text Fields
入力メモ・短文の自由入力。フォーカス時の枠は署名色。書き手の言葉を扱う手紙系は明朝で組み、字数を控えめに添える。Free entry for memos and short text. The focus border is the signature color. Letter-type fields, which carry the writer's own words, are set in Mincho with a discreet character count.
STATES
Empty未入力empty
Focus合焦（枠＝brand）focus (border = brand)
Counter字数（手紙）count (letter)
10 / 200
Error超過over limit
200字を超えています。短くまとめてみましょう。Over 200 characters. Try to keep it short.
Disabled無効disabled
PROPS
| prop | 値value | 既定default | 備考notes |
|---|---|---|---|
| type | memo / letter | memo | letter は明朝・字数表示letter: Mincho, with count |
| maxlength | — | 200（letter）200 (letter) | 超過で EmberEmber on overflow |
| min-height | 48 / 72 | 72（area）72 (area) | — |
捌
Switch
トグル設定のオン/オフ。オンの色は署名色——設定はシステム自身の振る舞いであり、記号色を許す数少ない例外。On/off for settings. The "on" color is the signature—settings are the system's own behavior, one of the few exceptions where the symbolic color is allowed.
STATES
On
Off
Disabled
玖
Stepper
数量の増減回数・分数など、片手で素早く調整する数値入力。キーボードを開かせない。境界では当該ボタンを無効化する。Numeric entry for counts, minutes, and the like—adjusted quickly with one hand. It never opens the keyboard. At a bound, the relevant button is disabled.
30分min
5刻み。減は上から引き（down）、増は下から満ちる。0未満にはしない。Steps of 5. Decrease draws from above (down), increase fills from below. Never goes below 0.
PROPS
| prop | 値value | 備考notes |
|---|---|---|
| step | 数値number | 用途別（分＝5 / 回数＝1）by use (minutes = 5 / count = 1) |
| min / max | 数値number | 境界で当該ボタンを無効化disable the relevant button at a bound |
| unit | 文字text | 明朝・等幅数字Mincho · monospaced figures |
拾
Slider
連続値おおよその量・強さの感覚的な指定。トラックは署名色。正確な数値が要るときは Stepper を使う。An intuitive setting for rough amount or intensity. The track is the signature color. When an exact number is needed, use the Stepper.
感覚的でよいときは Slider、正確さが要るときは Stepper。役割を分ける。Slider when intuition is enough, Stepper when precision is needed. Keep the roles separate.
拾壱
Radio / Check
単一・複数選択チップが馴染まない縦並びの選択に。マークは署名色で、満ちるように現れる。ラジオは再タップで解除しない（単一選択の保証）。For vertical lists where chips don't fit. The mark is the signature color, appearing as if filling in. Radios don't deselect on re-tap (a guarantee of single selection).
RADIO（単一）RADIO (single)
軽いLight
普通Normal
きついHard
CHECK（複数）CHECK (multiple)
記録を共有するShare this record
毎日のふりかえりを受け取るReceive a daily reflection
チェックは解除があるため、解除時のみ上から引く（down）。ラジオは常に下から満ちる。Because a check can be cleared, it draws from above (down) only on deselection. A radio always fills from below.
拾弐
Segmented
表示切替同一画面内の表示モード切替（リスト／グリッド、日／週／月）。つまみが横に滑って追従し、瞬間移動しない。選択肢は2–4。Switching view modes within one screen (list / grid, day / week / month). The thumb slides sideways to follow rather than jumping. Two to four options.
つまみは滑って移動する。Switch（設定の真偽）とは別物で、これは表示の切替。The thumb glides to move. Distinct from Switch (a setting's true/false)—this switches the view.
拾参
Cards
保管札・記録カード記録は消費される投稿ではなく、保管札である。時刻・種類アイコン・題・記録者・詳細導線で構成。記録者は助詞で語る（ログ＝「が記録」、手紙＝「から」）。A record is not a post to be consumed, but an archival tag. It is composed of time, a type icon, a title, the recorder, and a path to detail. The recorder is voiced by the particle (log = "recorded by," letter = "from").
07:30朝のできごとMorning noteHaruki が記録Recorded by Haruki
よく晴れた。少し早く起きられた。A clear morning. Woke a little earlier.
よく晴れた。少し早く起きられた。A clear morning. Woke a little earlier.
21:10今日のひとことA word for todayHaruki からFrom Haruki
ありがとう。おつかれさま。Thank you. Well done today.
ありがとう。おつかれさま。Thank you. Well done today.
本文は2行まで。3行目は省略し、詳細へ送る。「再会の瞬間」に最も美しくあるための簡潔さ。The body runs at most two lines. A third is truncated and sent to detail—a brevity meant to be most beautiful at "the moment of reunion."
SEAL — 保存・共有状態SEAL — saved / shared state
保存済みSaved
共有済みShared
採用投稿ではなく保管札。SNS的な「いいね」「既読」「連続記録」は置かない。封（Seal）は保存済み・共有済みという事実だけを淡く示し、共有済みのときだけ署名色を許す。棄却滞在を促す通知バッジ・未読カウントの常設は、信頼を損なうため捨てた。AdoptedAn archival tag, not a post. No SNS-style "likes," "read receipts," or "streaks." The Seal quietly shows only the fact of saved / shared, allowing the signature color only when shared. RejectedPermanent notification badges and unread counts that push for return visits were discarded—they erode trust.
PROPS
| prop | 値value | 備考notes |
|---|---|---|
| kind | log / note | 記録者の助詞が変わるthe recorder's particle changes |
| accent | product依存product-dependent | アイコン円の色color of the icon circle |
| lines | ≤ 2 | 3行目は省略し詳細へa third line is truncated to detail |
| seal | saved / shared | shared のみ署名色。既読は表示しないsignature only for shared. read state not shown |
拾肆
List Item
設定・選択リスト設定や選択肢の縦リスト。保管札（Cards）とは別物で、こちらは操作の入口。右端は導線（→）か状態（件数・時刻）。A vertical list of settings and choices. Distinct from Cards—this is an entry point for action. The right edge holds a path (→) or a state (count, time).
きょうの記録Today's record
入力へTo entry
入力へTo entry
メッセージMessages
睡眠Sleep
タップで背景がやわらかく満ちる。区切りは罫のみで、行ごとにカード化しない。On tap the background fills softly. Rows are divided by rules alone, never boxed into cards.
拾伍
Bottom Sheet
選択シート画面下からせり上がる選択面。グリップ＋署名の息継ぎ線で「JabaracDesignの面」と分かる。登場は下から満ち、退場は下へ引く。A selection surface rising from the bottom of the screen. A grip plus the signature breath line marks it as "a JabaracDesign surface." It enters filling from below and leaves drawing downward.
記録の種類Type of record
できごとEvent
睡眠Sleep
ひとことA word
背後は薄い暗幕。影は「物理的に浮いている面」にのみ許される一例。Behind it, a thin scrim. One case where shadow is allowed only for "a surface physically floating."
拾陸
Dialog
確認・破壊的操作取り消せない操作の最終確認のみに使う。日常の保存には使わない（保存は即時＋取り消し）。破壊的確認は息継ぎ線も確定ボタンも Ember。Used only for the final confirmation of an irreversible action. Not for everyday saving (which is instant + undo). For a destructive confirmation, both the breath line and the confirm button are Ember.
この記録を削除しますかDelete this record?
削除すると、共有先のタイムラインからも消えます。Deleting also removes it from the timelines you shared it to.
肯定的な確認なら Taupe、破壊的なら Ember。両ボタンとも上から引く（down）。Taupe for an affirmative confirmation, Ember for a destructive one. Both buttons draw from above (down).
採用確認の代わりに取り消し。日常操作にダイアログで割り込まない。保存は即時に終え、Snackbar の「取り消す」で回復路を残す。ダイアログは「取り消せない一線」を越えるときだけ立ち上がる。AdoptedUndo instead of confirm. Everyday actions are never interrupted by a dialog. Saving finishes instantly, leaving a recovery path through the Snackbar's "undo." A dialog rises only when crossing "the irreversible line."
拾漆
Tab Bar
フッターナビアプリ最上位のナビ。選択中は署名色と上辺インジケータ（左右に満ちる）で示す。中央のFABは記録への近道で、塗りの署名色を許す唯一の例外。The app's top-level navigation. The selected tab is shown with the signature color and a top-edge indicator (filling left and right). The central FAB is a shortcut to recording—the only exception that allows a filled signature color.
タブは2–4＋FABの5枠まで。多機能化しない。FABの円のみ塗りの署名色（主動作の象徴）。Two to four tabs plus the FAB, five slots at most. It does not grow feature-heavy. Only the FAB's circle is a filled signature color (the symbol of the primary action).
PROPS
| prop | 値value | 備考notes |
|---|---|---|
| items | 2–4 ＋ FAB2–4 + FAB | 5枠までup to 5 slots |
| selected | index | 署名色＋上辺インジケータsignature color + top-edge indicator |
| fab | 記録record | 中央固定。塗り署名色を許す例外fixed center. the exception that allows a filled signature |
拾玖
Snackbar
一時的な通知操作の結果を数秒だけ伝える。Feedback より軽く、画面下に浮く。行動は1つ（多くは「取り消す」）。数秒で下へ退場する。It conveys the result of an action for just a few seconds. Lighter than Feedback, it floats at the bottom of the screen. One action (often "undo"). After a few seconds, it exits downward.
記録を1件、削除しましたDeleted one record
確認ダイアログを置かず、ここに回復路（取り消す）を残す。Rather than a confirmation dialog, the recovery path (undo) is left here.
弐拾
Feedback
保存・取り消し・エラー保存は即時。失敗は謝らず、事実と回復手段だけを示す（Ember）。トーンは「事実 → 現状 → 回復手段」。Saving is instant. Failure does not apologize; it states only the fact and the recovery (Ember). The tone is "fact → state → recovery."
保存しました 14:06Saved 14:06
保存できませんでした。記録は端末に残っていますCouldn't save. Your record is kept on this device
成功＝Moss、失敗＝Ember。行動は常に1つだけ添える。Success = Moss, failure = Ember. Always attach exactly one action.
PROPS
| prop | 値value | 備考notes |
|---|---|---|
| type | success / error | success＝Moss / error＝Embersuccess = Moss / error = Ember |
| action | undo / retry | 常に1つalways one |
| tone | — | 謝らない。事実→現状→回復手段no apology. fact → state → recovery |
弐拾壱
Progress
待ち時間読み込みの表示。線は署名色、回転とドットは控えめに。急かす点滅はしない。確定的な進捗はバー、不確定は回転かドット。A loading indicator. The line is the signature color; spin and dots stay restrained. No hurrying blink. A determinate progress uses the bar; an indeterminate one, the spinner or dots.
点滅速度はゆるやかに。ユーザーを急かさない。Keep the pulse slow. Don't rush the user.
弐拾弐
Avatar
人の識別記録者・メンバーの識別。写真がなければ頭文字を明朝で。色は控えめに。重ねはまとまりを示す。Identifying a recorder or member. Without a photo, the initial is set in Mincho. Color stays restrained. Overlapping shows a group.
H
H
和H
ABC
サイズ sm 28 / md 40 / lg 56。頭文字は明朝で「記憶の層」に置く。Sizes sm 28 / md 40 / lg 56. The initial is set in Mincho, placed in "the layer of memory."
弐拾参
Tag / Badge
分類・件数記録の分類タグと、未読・件数バッジ。分類タグは無彩か淡い分類色。件数バッジだけ署名色を許す（気づきを促すため）。Classification tags for records, plus unread / count badges. Classification tags are neutral or a pale classification color. Only the count badge is allowed the signature color (to prompt notice).
睡眠Sleep
できごとEvent
保存済みSaved
メッセージMessages 3
件数バッジの署名色は「注意を要する数」だけ。常設の未読煽りには使わない。The badge's signature color is only for "a number that needs attention." Not for a permanent unread nag.
弐拾肆
Section Header
署名・一拍置く見出しJabaracDesignの署名。見出しの下に署名色の息継ぎ線、その下に一拍遅れた淡い補助。全プロダクト・全画面の主見出しに同じ所作で現れる——これがスイートを貫く「作法の統一」の核。The JabaracDesign signature. Below the heading, a signature-color breath line; below that, a pale support a beat behind. It appears with the same gesture on the main heading of every product and every screen—the core of the "unity of manner" that runs through the suite.
今日の記録Today's record
6月14日 日曜日Sunday, June 14
見た目（色・形）ではなく、この所作の共通性でスイートの一貫性を担保する。Consistency across the suite is secured not by look (color, shape) but by the shared nature of this gesture.
RULES
| 要素element | 仕様spec |
|---|---|
| 息継ぎ線Breath line | 幅28px・太さ1.5px・色＝brand。一画面に主見出しの1本のみ28px wide · 1.5px thick · color = brand. Only one, for the main heading, per screen |
| 補助Support | 色＝ash・字間.22em・主見出しの後に配置color = ash · tracking .22em · placed after the main heading |
| 沈黙Silence | 見出し上に1行分の余白を確保し、一拍置くreserve a line of space above the heading—a beat of pause |
JabaracDesign.
版 第一版 ／ 2026年6月Edition First / June 2026
署名色 --brand（既定 臙脂 #9B3A3A・アプリで差替）Signature --brand (default crimson #9B3A3A, swapped per app)
書体 しっぽり明朝 ／ Zen角ゴシック NewType Shippori Mincho / Zen Kaku Gothic New
収録 22図 ／ Foundations 4・Components 20Contents 22 figures / Foundations 4 · Components 20
本書は「印刷された仕様見本帳」の文法で組まれている。見本（図）は角丸を持ち、版面（地）は罫と図番号で区切る。CSSは2層のデザイントークン（Primitive→Semantic）で管理し、署名色は固定せずアプリごとに
--brand-base を差し替える。理由なき額縁・無意味な装飾・均一なリズムを排し、設計判断は欄外の註に採用・棄却として残した。This book is set in the grammar of a "printed specification sample book." The specimens (figures) carry rounded corners; the page (ground) is divided by rules and figure numbers. The CSS is managed with two layers of design tokens (Primitive→Semantic), and the signature color is not fixed—each app swaps --brand-base. Gratuitous frames, meaningless ornament, and uniform rhythm are excluded; design decisions are left in the margin notes as adopted and rejected.