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--bg
Paper--bg-raised
Surface--surface
Line--line
Ink--text
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 · hue-wheel set · desaturated to recede)
Red--red
Orange--orange
Yellow--yellow
Green--green
Teal--teal
Blue--blue
Purple--purple
Pink--pink
Brown--brown
Gray--gray
SEMANTIC TOKENS（意図の層・現在選択中のモードを反映）SEMANTIC TOKENS (the layer of intent · reflects the current mode)
| トークンtoken | 色（現在のモード）color (current mode) | 役割role |
|---|---|---|
| 地・面（奥→手前）ground & surface (back → front) | ||
| --bg | | 最背面の地backmost ground |
| --bg-line | | 地の上の罫rule on the ground |
| --bg-raised | | 持ち上がった地（プロダクトの面）raised ground (product surface) |
| --surface | | 面（カード等）surface (cards, etc.) |
| --line | | 罫rule |
| 文字（本文→補助）text (body → muted) | ||
| --text | | 本文body text |
| --text-muted | | 補助文字muted text |
| 署名色（ブランド・テーマ可能）signature (brand · themeable) | ||
| --brand | | 署名色（記号の一点のみ）signature (a single symbolic point) |
| --brand-soft | | 署名色・淡signature, soft |
| --on-brand | | 署名色塗りの上の文字text on a brand fill |
| 主動作・分類・状態action · classification · status | ||
| --cta | | 主動作（沈むトープ）primary action (sunken taupe) |
| --on-cta | | 主動作の上の文字text on the primary action |
| --accent | | 分類色（現在のアプリ）classification (current app) |
| --ok | | 成功（Moss）success (Moss) |
| --err | | エラー（Ember）error (Ember) |
CLASSIFICATION COLORS（分類色・色相環／テーマ非依存・Light/Night共通）CLASSIFICATION COLORS (hue wheel · theme-independent · same in Light / Night)
| トークンtoken | 色（固定）color (fixed) | 色相hue |
|---|---|---|
| --red | | 赤red |
| --orange | | 橙orange |
| --yellow | | 黄yellow |
| --green | | 緑green |
| --teal | | 青緑teal |
| --blue | | 青blue |
| --purple | | 紫purple |
| --pink | | 桃pink |
| --brown | | 茶brown |
| --gray | | 灰gray |
分類色はプリミティブ層の固定値で、テーマ（Light/Night）やアプリを切り替えても変わらない（上の値が両モードで同一なのはこのため）。セマンティックの
--accent は、表示中アプリがこの中から選んだ1色を指す（House＝--yellow）。彩度を落として地に沈める原則のまま、タグ・ドットなど分類の一点に用いる。Classification colors are fixed values in the primitive layer—unchanged when you switch theme (Light/Night) or app (which is why the values above read the same in both modes). The semantic --accent points to one of them chosen by the current app (House = --yellow). Used—desaturated and sunken into the ground—only at single points of classification such as tags and dots.採用署名色はトークン、固定値ではない。各アプリは
--brand-base を1つ定義するだけで署名色を持つ。臙脂はその既定（House）に過ぎない。掟一画面で署名色が出るのは記号の一点のみ——ロゴ・息継ぎ線・選択の核・共有の封。通常のボタンには使わない（主動作はTaupe）。棄却アプリごとに鮮やかな主張色を複数持たせる案は、スイートが騒がしくなるため捨てた。色は1色、しかも沈める。採用分類色は Notion 流に色相環10色（--red…--gray）へ拡張。ただし彩度は落として地に沈める原則は不変——分類はタグ・ドットの一点に留め、面を塗らない。旧名（--c-sand等）は近い色相のエイリアスとして温存した。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.AdoptedClassification colors are extended to a Notion-style hue wheel of ten (--red…--gray). The rule is unchanged—desaturated and sunken into the ground: classification stays at a single point (tag, dot), never filling a surface. The old names (--c-sand, etc.) are kept as aliases to the nearest hue.弐
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) |
SKELETON
採用二層を書体で分離した。明朝＝記憶・蓄積（見出し・数値・署名）、角ゴ＝操作・現在（本文・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 |
LAYOUT
| param | 値value |
|---|---|
| .chip · default | |
| width | hug |
| min-height | 42px |
| padding | 9px 16px |
| layout | flow |
| direction | horizontal |
| align-cross | center |
| gap | 0 |
| radius | 10px |
| border | 1px solid var(--line) |
| background | var(--surface) |
| overflow | hidden |
| cursor | pointer |
| selected dot ::before grows 0 → 6px (margin-right 7) on aria-pressed | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| tap | 分類色が下から満ち、点が点く (pos)accent fills from below, the dot lights (pos) | 選択（single / multi）select (single / multi) |
| tap · 解除 | 上から引く (neg)ebbs from above (neg) | 選択解除deselect |
| Enter / Space | tap と同じsame as tap | トグルtoggle |
採用満ち引き（潮）の比喩を選択状態に直結させた——選択＝水位が下から満ち、解除＝水位が引く。共通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) | — |
| disabled | true / false | false | opacity .5・地は bg-raisedopacity .5 · ground is bg-raised |
LAYOUT
| param | 値value |
|---|---|
| .tf.area · multiline (default) | |
| width | fill |
| min-height | 72px |
| padding | 12px 14px |
| layout | flow |
| direction | vertical |
| radius | 10px |
| border | 1px solid var(--line) |
| background | var(--surface) |
| overflow | auto |
| single-line .tf : min-height 48 · resize vertical (area only) | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| focus | 枠が署名色にborder turns the signature color | 入力可能editable |
| type | 字数を更新（letter）count updates (letter) | 超過で EmberEmber on overflow |
捌
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. On and off are shown as a tide—the signature fills from below and ebbs downward.
STATES
On
Off
Disabled
FIELD — 設定行FIELD — setting row
記録を共有するShare records家族のタイムラインに表示されますShown on the family timeline
夜間はおやすみQuiet at night22:00〜7:00 は通知しませんNo notifications 22:00–7:00
設定はリスト行に置く。題＋一行の補足、右にトグル。小サイズ（sm）は密なリスト用。Settings live in list rows—a title plus a one-line note, with the toggle at the right. The small size (sm) is for dense lists.
PROPS
| prop | 値value | 既定default | 備考notes |
|---|---|---|---|
| checked | true / false | false | オンは署名色（設定の例外）on is the signature color (settings exception) |
| size | md / sm | md | sm は密なリスト用sm for dense lists |
| field | — | — | 題＋補足の行に内包するwrap in a title + note row |
| disabled | true / false | false | opacity .4・操作不可opacity .4 · not operable |
LAYOUT
| param | 値value |
|---|---|
| .toggle · md | |
| width | 46px |
| height | 26px |
| radius | 999px |
| background | var(--line) |
| overflow | hidden |
| cursor | pointer |
| sm : 38 × 22 · thumb 16 (md thumb 20) | |
| .switch-field · setting row | |
| width | fill |
| max-width | 380px |
| padding | 12px 2px |
| layout | flow |
| direction | horizontal |
| align-cross | center |
| gap | 16px |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| tap | 署名色が満ち／引くsignature fills / ebbs | on / off トグルtoggles on / off |
| Enter / Space | tap と同じsame as tap | トグルtoggle |
玖
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.
STATES
Enabled通常default
＋／− は CTA 色+ / − in the CTA color
Hoverホバー（ボタン）hover (button)
地がわずかに沈むthe ground dips slightly
Disabled境界で無効disabled at bound
当該ボタンが ash・opacity .4that button turns ash · opacity .4
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 |
| value | 数値number | 中央表示・min-width 64shown centered · min-width 64 |
LAYOUT
| param | 値value |
|---|---|
| .stepper · control | |
| width | hug |
| layout | flow |
| direction | horizontal |
| align-cross | center |
| radius | 12px |
| border | 1px solid var(--line) |
| background | var(--surface) |
| overflow | hidden |
| button 46 × 46 · .val min-width 64 (left/right rule) | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| ＋ tap | 下から満ち (pos)fills from below (pos) | 値 ＋step（max で停止）value +step (stops at max) |
| − tap | 上から引く (neg)ebbs from above (neg) | 値 −step（min で停止）value −step (stops at min) |
拾
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. The current position is shown quietly as a number.
STATES
Enabled通常default
トラック＝署名色track in the signature color
Disabled無効disabled
range・knob が ash に沈み、全体 opacity .45range and knob recede to ash; the whole at opacity .45
PROPS
| prop | 値value | 既定default | 備考notes |
|---|---|---|---|
| min / max | 数値number | 0 / 100 | 端にラベルを添えられるend labels optional |
| value | min–max | — | 数値表示は明朝・tnumreadout in Mincho · tnum |
| disabled | — | — | トラックは ash に沈むtrack recedes to ash |
LAYOUT
| param | 値value |
|---|---|
| .slider-wrap · assembly | |
| width | fill |
| max-width | 360px |
| layout | flow |
| direction | vertical |
| .slider · track row | |
| width | fill |
| height | 46px |
| layout | flow |
| direction | horizontal |
| align-cross | center |
| track 3px (var --line) · range 3px (var --brand) · knob 22×22 round | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| drag | knob が指に追従the knob follows the finger | 値が連続変化value changes continuously |
| ← / → | 1 ステップ移動moves one step | 値増減increment / decrement |
| tap · track | knob がその位置へthe knob jumps there | 値設定sets the value |
拾壱
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.
STATES
Unchecked未選択unchecked
マークは scale(0)・透明mark at scale(0), transparent
Checked選択（aria-checked）checked (aria-checked)
枠＝署名色、マークが満ちて現れるborder in the signature color; the mark fills in
PROPS
| prop | 値value | 既定default | 備考notes |
|---|---|---|---|
| type | radio / check | radio | 単一は再タップ解除なし／複数は解除可single: no re-tap deselect; multi: deselectable |
| checked | true / false | false | aria-checked が状態を駆動aria-checked drives the state |
| label | テキストtext | — | マークの右に置くplaced to the right of the mark |
LAYOUT
| param | 値value |
|---|---|
| .opt · radio / check row | |
| width | fill |
| padding | 11px 4px |
| layout | flow |
| direction | horizontal |
| align-cross | center |
| gap | 12px |
| cursor | pointer |
| control 22×22 · radio radius 50% · check radius 6px · border 1.5px | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| tap | マークが満ちて現れる (pos)the mark fills in (pos) | 選択（radio は再tap解除なし）select (radio: no re-tap deselect) |
| tap · 解除 | 上から引く (neg)・check のみebbs from above (neg) · check only | 選択解除deselect |
| ↑ / ↓ , Space | 移動・選択move & select | 選択変更change selection |
拾弐
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.
STATES
Unselected非選択unselected
文字＝ash、塗りなしlabel in ash, no fill
Selected選択（aria-selected）selected (aria-selected)
文字が濃く・太く、つまみが滑って下に入るlabel darkens and bolds; the thumb glides beneath
PROPS
| prop | 値value | 既定default | 備考notes |
|---|---|---|---|
| options | 2–4 | — | つまみ幅は数で決まるthumb width follows the count |
| selected | 索引index | 0 | aria-selected が現在を示すaria-selected marks the current one |
| content | icon / text | text | アイコンのみ／文字のみicon-only or text-only |
LAYOUT
| param | 値value |
|---|---|
| .seg · container | |
| width | hug |
| padding | 3px |
| layout | flow |
| direction | horizontal |
| radius | 10px |
| border | 1px solid var(--line) |
| background | var(--surface) |
| button : min-height 36 · padding 8·18 · radius 8 | |
| .thumb (overlay z:0) : inset-y 3 · radius 8 · shadow · glides L/W | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| tap | つまみが滑って移動the thumb glides across | 表示モード切替switches view mode |
拾参
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.
SKELETON — 読み込み中の状態SKELETON — loading state
保管札はスケルトン状態を持つ：
aria-busy="true" を付けると、アイコン円・時刻・題（1行）・本文（2行）がプレースホルダに組み上がる（別に .sk-card は作らない＝実部品の状態で組む）。実演と再生は Skeleton 節。The card has a skeleton state: add aria-busy="true" and the icon circle, time, title (1 line), and body (2 lines) compose into placeholders—no separate .sk-card (built from the real parts' state). A live demo and replay are in the Skeleton section.STATES
Enabled通常default
静的表示（ホバー等なし）static (no hover, etc.)
Skeleton読み込み中（aria-busy）loading (aria-busy)
アイコン円・時刻・題・本文がプレースホルダにicon, time, title, body become placeholders
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 |
| layout | block / row | row は横並び（gap 14）row is horizontal (gap 14) |
LAYOUT
| param | 値value |
|---|---|
| .card · default (block) | |
| width | 320px |
| max-width | 100% |
| padding | 16px |
| radius | 12px |
| border | 1px solid var(--line) |
| background | var(--surface) |
| .card.row : layout flow · horizontal · align-cross center · gap 14 | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| 操作なし（静的な保管札）no interaction (a static archival tag) | ||
拾肆
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.
STATES
Enabled通常default
罫で区切られた行rows divided by rules
Hover / Pressedホバー・タップhover / tap
背景がやわらかく満ちる（surge）background fills softly (surge)
PROPS
| prop | 値value | 既定default | 備考notes |
|---|---|---|---|
| leading | dot / none | none | 先頭のアイコン円a leading icon circle |
| meta | arrow / count / time | arrow | 右端の導線・状態trailing path or state |
| sub | true / false | false | 2行目の補足a second sub-line |
LAYOUT
| param | 値value |
|---|---|
| .list · container | |
| width | fill |
| max-width | 380px |
| layout | flow |
| direction | vertical |
| background | var(--surface) |
| border | 1px solid var(--line) |
| radius | 12px |
| overflow | hidden |
| .li · row (1px rule between) | |
| width | fill |
| padding | 14px 16px |
| layout | flow |
| direction | horizontal |
| align-cross | center |
| gap | 14px |
| .lmeta pushed to trail (margin-left auto) | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| tap | 背景が下から満ちる (pos)the background fills from below (pos) | 行を開く／選択opens or selects the row |
| Enter / Space | tap と同じsame as tap | 開く／選択open / select |
拾伍
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."
STATES
Closed閉closed
translateY(101%)・画面外translateY(101%), off-screen
Open開（sheet-open）open (sheet-open)
下から満ちて translateY(0)、背後に暗幕fills up to translateY(0); scrim behind
PROPS
| prop | 値value | 既定default | 備考notes |
|---|---|---|---|
| open | true / false | false | 下から満ち、下へ引くfills up, ebbs down |
| opt | default / danger | default | danger は Emberdanger is Ember |
LAYOUT
| param | 値value |
|---|---|
| sheet · pinned bottom (in-app) | |
| layout | overlay |
| placement-x | stretch |
| y-end | 0 |
| z | 6 |
| background | var(--surface) |
| radius | 16px 16px 0 0 |
| shadow | var(--shadow-float) |
| transform | translateY(101%) |
| open (.sheet-open) : transform translateY(0) | |
| .fbody padding 18 · .opt padding 13·4 · 1px rule between | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| open | 下からせり上がる (pos)・暗幕rises from below (pos), scrim behind | シート表示sheet appears |
| tap · opt | 満ち (surge)fills (surge) | 選択して閉じるselects and closes |
| scrim / Esc | 下へ引く (neg)slides down (neg) | 閉じるcloses |
拾陸
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).
STATES
Closed閉closed
opacity 0・scale .96opacity 0, scale .96
Open開（dialog-open）open (dialog-open)
opacity 1・scale 1、暗幕が満ちるopacity 1, scale 1; scrim fills
PROPS
| prop | 値value | 既定default | 備考notes |
|---|---|---|---|
| open | true / false | false | 取消し不能操作の最終確認のみonly for the final confirm of an irreversible action |
| confirm | default / danger | default | danger は Ember（息継ぎ線も）danger is Ember (breath line too) |
LAYOUT
| param | 値value |
|---|---|
| .dialog · content box | |
| width | 300px |
| padding | 22px |
| layout | flow |
| direction | vertical |
| background | var(--surface) |
| border | 1px solid var(--line) |
| radius | 16px |
| .acts : flow horizontal · gap 10 · each button grow 1 · min-height 46 | |
| overlay wrap (.flow-dialog-wrap) | |
| layout | overlay |
| placement-x | stretch |
| placement-y | stretch |
| align-main | center |
| align-cross | center |
| padding | 24px |
| z | 7 |
| opacity | 0 |
| open : opacity 1 · dialog scale .96 → 1 | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| open | 立ち上がる（scale）・暗幕scales in, scrim behind | 確認を表示shows the confirmation |
| tap · confirm / cancel | 上から引く (neg)ebbs from above (neg) | 実行／取消して閉じるcommits or cancels, then closes |
| Esc | —— | 閉じるcloses |
採用確認の代わりに取り消し。日常操作にダイアログで割り込まない。保存は即時に終え、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).
STATES
Unselected非選択unselected
文字＝ash、インジケータ scaleX(0)label ash, indicator scaleX(0)
Selected選択（aria-selected）selected (aria-selected)
署名色、上辺インジケータが左右に満ちるsignature color; the top indicator fills left-right
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 |
LAYOUT
| param | 値value |
|---|---|
| .tabbar · container | |
| width | fill |
| max-width | 380px |
| layout | flow |
| direction | horizontal |
| background | var(--surface) |
| border | 1px solid var(--line) |
| radius | 14px |
| overflow | hidden |
| tab button : grow 1 · flow vertical · align-cross center · padding 11·4·9 · gap 4 | |
| .ind (overlay top center) : 24×2 · scaleX 0→1 on selected | |
| .fab : width 54 (no grow) · .plus 46 round · shadow | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| tap · tab | インジケータが左右に満ちるthe indicator fills left–right | タブ切替switches tab |
| tap · FAB | Taupe 満ち (pos)fills with Taupe (pos) | 記録を作成starts a record |
拾玖
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.
DEMO — タップで発生DEMO — tap to trigger
画面下から滑り込み、約4秒で下へ退場する。「取り消す」で即時に戻し、戻した旨を一拍だけ知らせる。
prefers-reduced-motion では滑らず即時に切り替わる。It slides in from the bottom and exits downward after about four seconds. "Undo" reverses it at once and briefly notes that it was undone. Under prefers-reduced-motion it switches instantly without sliding.STATES
Hidden退場hidden
opacity 0・translateY(150%)opacity 0, translateY(150%)
Visible表示（.show）visible (.show)
下から滑り込み opacity 1・translateY(0)slides up to opacity 1, translateY(0)
PROPS
| prop | 値value | 既定default | 備考notes |
|---|---|---|---|
| message | テキストtext | — | 1行single line |
| action | true / false | true | 多くは「取り消す」often "undo" |
| visible | true / false | false | 約4秒で下へ退場exits downward after ~4s |
LAYOUT
| param | 値value |
|---|---|
| .snack · pill | |
| width | hug |
| padding | 13px 18px |
| layout | flow |
| direction | horizontal |
| align-cross | center |
| gap | 14px |
| background | var(--text) |
| radius | 10px |
| shadow | var(--shadow-float) |
| .snack-host · fixed bottom (overlay) | |
| layout | overlay |
| placement-x | stretch |
| align-main | center |
| y-end | 24px |
| z | 200 |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| show | 下から滑り込む (pos)slides up from below (pos) | 表示（約4秒）shows (~4s) |
| tap · Undo | —— | 復元して即時退場reverses, then exits at once |
| timeout | 下へ引く (neg)slides down (neg) | 自動退場auto-dismiss |
弐拾
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.
DEMO — 保存の結果DEMO — result of saving
成功＝Moss＋「取り消す」、失敗＝Ember＋「再試行」。再試行は保存中（時計）を経て成功へ推移する。結果はやわらかく現れる。Success = Moss + "Undo," failure = Ember + "Retry." Retry passes through a saving state (clock) to success. Results appear softly.
STATES
Success成功（.ok）success (.ok)
Moss・「取り消す」Moss · "undo"
Error失敗（.ng）error (.ng)
Ember・枠も Ember 寄り・「再試行」Ember; border leans Ember · "retry"
Saving保存中（.wait）saving (.wait)
ash・時計、成功へ推移ash · clock, transitions to success
Enter出現（.pop→.show）enter (.pop→.show)
opacity 0→1・下から8pxopacity 0→1, up 8px
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 |
LAYOUT
| param | 値value |
|---|---|
| .fb · feedback bar | |
| width | 360px |
| max-width | 100% |
| padding | 11px 14px |
| layout | flow |
| direction | horizontal |
| align-cross | center |
| gap | 9px |
| radius | 10px |
| border | 1px solid var(--line) |
| background | var(--surface) |
| .act pushed to trail (margin-left auto) | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| result | ふわっと出現（.pop→.show）fades up (.pop→.show) | Moss / Ember で提示shown in Moss / Ember |
| tap · action | —— | 取消／再試行undo / retry |
弐拾壱
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.
確定的な進捗はバー（題＋%）、不確定は回転かドット。点滅はゆるやかに、ユーザーを急かさない。Determinate progress uses the bar (title + %); indeterminate uses the spinner or dots. The pulse stays slow—never rushing the user.
STATES
—状態なしno states
押下・合焦なし（読み込み表示。回転・点滅は常時アニメ）no pressed/focus (a loading indicator; spin/pulse animate continuously)
PROPS
| prop | 値value | 備考notes |
|---|---|---|
| type | 確定 / 不確定determinate / indeterminate | 確定＝バー、不確定＝回転・ドットdeterminate = bar, indeterminate = spin / dots |
| value | 0–100 | 確定のみ。%は明朝・tnumdeterminate only. % in Mincho · tnum |
| size | md / sm | バー4/3px・回転26/18pxbar 4/3px · spin 26/18px |
LAYOUT
| param | 値value |
|---|---|
| .bar-field · determinate | |
| width | fill |
| max-width | 360px |
| layout | flow |
| direction | vertical |
| gap | 7px |
| .bar-head : flow horizontal · align-cross baseline · align-main space-between | |
| .bar · track | |
| width | fill |
| height | 4px |
| radius | 2px |
| background | var(--line) |
| overflow | hidden |
| .v fill : height fill · var(--brand) · width = value% | |
| indeterminate : .spin 26 (sm 18) round · .dots 7px ×3 | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| 操作なし（読み込み表示）no interaction (a loading indicator) | ||
弐拾弐
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+5
サイズ sm 28 / md 40 / lg 56。状態点は在席＝Moss・不在＝ash（署名色は使わない）。重ねは末尾に残数（+N）。Sizes sm 28 / md 40 / lg 56. The status dot is present = Moss, away = ash (never the signature color). A stack ends with the overflow count (+N).
SKELETON — 読み込み中の状態SKELETON — loading state
HH和
STATES
Present在席（.st）present (.st)
状態点＝Mossstatus dot = Moss
Away不在（.st.off）away (.st.off)
状態点＝ashstatus dot = ash
Skeleton読み込み中（aria-busy）loading (aria-busy)
円のプレースホルダ、状態点は隠れるcircle placeholder; status dot hidden
PROPS
| prop | 値value | 備考notes |
|---|---|---|
| size | sm / md / lg | 28 / 40 / 56 |
| status | 在席 / 不在present / away | Moss / ash。記号色は不可Moss / ash. no signature color |
| stack | +N | 重ねの末尾に残数overflow count at the tail |
| fallback | 頭文字initial | 明朝（記憶の層）Mincho (layer of memory) |
LAYOUT
| param | 値value |
|---|---|
| .av · md (default) | |
| width | 40px |
| height | 40px |
| layout | flow |
| direction | horizontal |
| align-main | center |
| align-cross | center |
| radius | 999px |
| border | 1px solid var(--line) |
| background | color-mix(in srgb, var(--c-slate) 30%, var(--surface)) |
| sm / lg : 28 / 56 | |
| .st dot (overlay end/end, offset −1) : 11 (sm 9 / lg 14) round | |
| .avstack : flow horizontal · each margin-left −10 (overlap) | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| 操作なし（静的な識別子）no interaction (a static identifier) | ||
弐拾参
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.
VARIANTS — 状態・小・取り外しVARIANTS — status, small, removable
同期済みSynced
未送信Unsent
下書きDraft
できごとEvent
状態タグは ok＝Moss / err＝Ember を淡く。フィルタ用は × で外せる（押すと引くように消える）。煽りには使わない。Status tags use ok = Moss / err = Ember, lightly. Filter tags can be removed with × (it ebbs away on press). Never for nagging.
STATES
—タグ本体は状態なしtag itself has no states
分類・状態は variant（app / ok / err）で表すclass/status shown by variant (app / ok / err)
Remove hover×ホバー× hover
×の不透明度1・淡い地× opacity 1, faint ground
Leaving取り外し（.leaving）dismiss (.leaving)
opacity 0・scale .9 で引くように消えるebbs away: opacity 0, scale .9
PROPS
| prop | 値value | 備考notes |
|---|---|---|
| variant | 分類 / app / 状態plain / app / status | app＝分類色、状態＝ok/errapp = accent, status = ok/err |
| size | md / sm | — |
| removable | — | × で外す。フィルタ向けremove with ×. for filters |
| count | 数値number | バッジのみ署名色を許すonly the badge may use the signature |
LAYOUT
| param | 値value |
|---|---|
| .tag · default | |
| width | hug |
| height | hug |
| padding | 3px 12px |
| layout | flow |
| direction | horizontal |
| align-cross | center |
| gap | 5px |
| radius | 999px |
| border | 1px solid var(--line) |
| sm : padding 2px 9px | |
| .count badge : min-width 18 · height 18 · radius 9 · var(--brand) | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| × tap · removable | 引くように消える (neg)ebbs away (neg) | タグを除去removes the tag |
弐拾肆
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.
STATES
—状態なしno states
静的な見出し（押下・合焦なし）a static heading (no pressed/focus)
PROPS
| prop | 値value | 既定default | 備考notes |
|---|---|---|---|
| heading | テキストtext | — | 明朝16・字間.16emMincho 16 · tracking .16em |
| support | テキストtext | — | 任意。省略可optional |
| breath | true / false | true | 署名色の線。1画面1本signature line. one per screen |
LAYOUT
| param | 値value |
|---|---|
| .sighead · centered column | |
| width | hug |
| layout | flow |
| direction | vertical |
| align-cross | center |
| .h heading (serif 16, tracking .16em) | |
| .breath : 28 × 1.5 · var(--brand) · 11px below heading | |
| .sub : ash · tracking .22em · 9px below (a beat behind) | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| 操作なし（静的な見出し）no interaction (a static heading) | ||
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 |
弐拾陸
Tooltip
補足ラベルアイコンや控えめな操作の説明を一行だけ。hover と focus の両方で出るため、キーボード操作でも読める。煽らず、すぐ消える。JSは使わない（CSSのみ）。A one-line explanation for an icon or a quiet control. It appears on both hover and focus, so it is readable by keyboard too. It doesn't nag, and it vanishes quickly. No JS (CSS only).
記録は端末にも残りますA copy is kept on this device
上に余白がなければ
.below で下に出す。hover だけに頼らず focus でも出すのが要点（アクセシビリティ）。Use .below when there's no room above. The key is not relying on hover alone—it also appears on focus (accessibility).STATES
Hidden非表示hidden
opacity 0・操作不可opacity 0, inert
Hover / Focusホバー・合焦hover / focus
opacity 1 で現れる（focus-within でも＝キーボード可）appears at opacity 1 (also focus-within: keyboard)
PROPS
| prop | 値value | 既定default | 備考notes |
|---|---|---|---|
| position | above / below | above | .below で下に（上に余白がなければ）.below when no room above |
| trigger | hover + focus | — | 常に両方（CSSのみ）always both (CSS only) |
| content | 1行single line | — | nowrap（折返さない）nowrap |
LAYOUT
| param | 値value |
|---|---|
| .tip · bubble (above, default) | |
| layout | overlay |
| placement-x | center |
| placement-y | start |
| y-offset | 8px |
| z | 70 |
| padding | 6px 10px |
| radius | 7px |
| background | var(--text) |
| shadow | var(--shadow-pop) |
| opacity | 0 |
| shown on hover / focus-within : opacity 1 | |
| .below : placement-y end (caret flips up) | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| hover / focus | opacity 1 で現れるfades in to opacity 1 | 補足を表示shows the note |
| blur / leave | 消えるfades out | 非表示hides |
弐拾漆
Tabs
タブ・表示切替ビュー内のパネルを切り替える。Tab Bar（アプリ最上位ナビ）や Segmented（モード切替）とは別物。選択は署名色の下罫（選択の核）＋太字で示し、下罫は滑って追従する。矢印キーで移動。Switches panels within a view—distinct from the Tab Bar (the app's top-level nav) and Segmented (a mode switch). Selection is shown by a signature-color underline (the core of selection) plus bold, and the underline glides to follow. Arrow keys move between tabs.
今日の記録は3件。朝のできごと、昼の散歩、夜のひとこと。Three records today: a morning note, a midday walk, an evening word.
今週は18件。よく晴れた日が多く、睡眠も安定していた。Eighteen this week. Many clear days, and sleep was steady.
すべての記録は1,284件。年単位で価値が増していく資産。1,284 records in all—an asset that gains value by the year.
選択タブの下に署名色の罫が滑って移動する。Segmented（同列の二択〜四択モード）と違い、Tabs は各タブが別パネルを持つ。A signature-color rule glides beneath the selected tab. Unlike Segmented (two-to-four peer modes), each tab here owns its own panel.
STATES
Unselected非選択unselected
文字＝ashlabel in ash
Selected選択（aria-selected）selected (aria-selected)
濃く・太字、下罫が滑って追従darkens, bold; the underline glides to follow
Panel hidden非表示パネル（[hidden]）hidden panel ([hidden])
display:nonedisplay: none
PROPS
| prop | 値value | 既定default | 備考notes |
|---|---|---|---|
| selected | aria-selected | — | 署名色の下罫＋太字signature underline + bold |
| a11y | roving tabindex | — | 矢印キーで移動・aria-controlsarrow-key move · aria-controls |
| panel | — | — | 各タブが別パネル（[hidden]で出し分け）each tab owns a panel (toggled by [hidden]) |
LAYOUT
| param | 値value |
|---|---|
| .tabs · wrapper | |
| width | hug |
| max-width | 380px |
| .tablist · tab row | |
| layout | flow |
| direction | horizontal |
| gap | 2px |
| border-bottom | 1px solid var(--line) |
| button : padding 11·14 · min-height 42 · cursor pointer | |
| .tab-ink (overlay bottom) : height 2 · var(--brand) · glides L/W | |
| .tabpanel : padding 16·2·4 · max-width 44em | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| tap · tab | 下罫が滑って追従the underline glides to follow | パネル切替switches panel |
| ← / → | roving で移動roving move | パネル切替switches panel |
弐拾捌
Drawer
ナビゲーションドロワー横から滑り込むナビゲーション面。下からの Bottom Sheet に対し、これは横から。現在地は署名色の左罫（選択の核）で示す。scrim・Escape・項目選択で閉じる。浮く面なので影を許す。A navigation surface that slides in from the side. Where the Bottom Sheet rises from below, this comes from the side. The current location is shown by a signature-color left rule (the core of selection). It closes on scrim, Escape, or item selection. Being a floating surface, it is allowed a shadow.
本文のプレビュー。左上のメニューからドロワーを開く。Content preview. Open the drawer from the menu at the top left.
下から一拍で開く Sheet と、横から滑る Drawer を使い分ける。現在地だけ署名色の左罫を許す。背後の薄い暗幕（scrim）をタップしても閉じる。Use the Sheet (rising from below) and the Drawer (gliding from the side) for different needs. Only the current location is allowed the signature-color left rule. Tapping the thin scrim behind it also closes it.
STATES
Closed閉closed
translateX(-100%)・暗幕 0translateX(-100%), scrim 0
Open開（.open）open (.open)
横から滑り込み translateX(0)、暗幕が満ちるslides in to translateX(0); scrim fills
Item hover / focus項目ホバー・合焦item hover / focus
地が淡く満ちるa faint ground fills
Current現在地（aria-current）current (aria-current)
署名色＋左に署名色の罫（inset 3px）signature color + a left signature rule (inset 3px)
PROPS
| prop | 値value | 備考notes |
|---|---|---|
| side | left | 既定は左。横から滑り込むdefault left. glides in from the side |
| item | アイコン＋題icon + label | 現在地は aria-current＋署名色左罫current: aria-current + signature left rule |
| dismiss | scrim / Esc | 外側・Escape・項目選択で閉じるcloses on scrim / Escape / selection |
| elevation | float | 浮く面の例外として影を許すa floating-surface exception allows shadow |
LAYOUT
| param | 値value |
|---|---|
| .drawer · side panel (overlay) | |
| width | 244px |
| max-width | 85% |
| padding | 22px 0 12px |
| layout | flow |
| direction | vertical |
| background | var(--surface) |
| border | 1px solid var(--line) |
| shadow | var(--shadow-float) |
| placement-y | stretch |
| x-start | 0 |
| z | 2 |
| transform | translateX(-100%) |
| open : transform translateX(0) · scrim z:1 fills | |
| .di item : flow horizontal · align-cross center · gap 12 · padding 12·20 | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| open · burger | 横から滑り込む (pos)・暗幕slides in from the side, scrim | ドロワー表示drawer appears |
| tap · item | —— | 遷移して閉じるnavigates and closes |
| scrim / Esc | 横へ引く (neg)slides back (neg) | 閉じるcloses |
弐拾玖
Table
データ表記録の一覧。カタログ地の仕様表（
.tbl）とは別の、プロダクトのデータ表。数字は静かな主役——明朝・等幅（tnum）・右寄せ。行は罫で分け、ホバーで淡く沈む。見出しをタップ（＋Space/Enter）で並べ替え、aria-sort を反映する。A list of records—a product data table, distinct from the catalog's spec table (.tbl). Numbers are the quiet protagonist—Mincho, monospaced (tnum), right-aligned. Rows are divided by rules and sink lightly on hover. Tap a header (or Space/Enter) to sort, reflected in aria-sort.| 種類Type | 時刻Time | 分Min |
|---|---|---|
| できごとEvent | 07:30 | 12 |
| 睡眠Sleep | 23:10 | 430 |
| 散歩Walk | 12:40 | 35 |
| 読書Reading | 21:00 | 60 |
数字列は明朝・tnum で右寄せし、桁が揃う。見出しで昇順／降順を切り替える（▲▼と aria-sort）。行ごとにカード化せず、罫だけで分ける。Numeric columns are Mincho · tnum, right-aligned so digits line up. Headers toggle ascending / descending (▲▼ and aria-sort). Rows are divided by rules alone, never boxed into cards.
STATES
Row hover行ホバーrow hover
地が淡く沈むthe ground sinks lightly
Sortable hover見出しホバーheader hover
文字が濃くなる（cursor pointer）label darkens (cursor pointer)
Sorted並べ替え（aria-sort）sorted (aria-sort)
▲昇順／▼降順の指標が現れるa ▲ ascending / ▼ descending mark appears
PROPS
| prop | 値value | 備考notes |
|---|---|---|
| column | text / numtext / num | num＝明朝・tnum・右寄せnum = Mincho · tnum · right-aligned |
| sortable | — | 見出しで昇降。data-sortで基準値sort on header. sort key via data-sort |
| row | — | 罫で分け、ホバーで淡く。カード化しないdivided by rules, light hover. no cards |
| label | aria-label | 表には名前を与える（必須）give the table a name (required) |
LAYOUT
| param | 値value |
|---|---|
| .dtable-wrap · container | |
| width | fill |
| max-width | 380px |
| background | var(--surface) |
| border | 1px solid var(--line) |
| radius | 12px |
| overflow | hidden |
| thead th : padding 11·14 · tinted ground · 1px bottom rule · nowrap | |
| tbody td : padding 12·14 · 1px bottom rule · td.num right-aligned | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| tap / Enter·Space · header | ▲▼ を切替toggles ▲▼ | 昇順／降順で並べ替えsorts ascending / descending |
| hover · row | 淡く沈むsinks lightly | （視覚のみ）visual only |
参拾
Accordion
開閉リスト題をタップで本文が開く開示リスト。複数を同時に開ける（独立した開示）。開いている項目は署名色、指標（▾）が回る。高さは滑らかに伸び、罫で分けてカード化しない（版面の文法）。よくある質問や設定の詳細など、要点を畳んで置くときに使う。A disclosure list where tapping a heading reveals its body. Multiple can be open at once (independent disclosures). The open item turns the signature color and its caret (▾) rotates. Height grows smoothly; rows are divided by rules, never boxed into cards. Use it to fold away detail—FAQs, advanced settings—keeping only the essentials in view.
記録はまず端末に保存され、共有を選んだものだけが家族のタイムラインに送られます。署名色が示すのは「共有済み」という事実だけです。Records are saved to your device first; only the ones you choose to share are sent to the family timeline. The signature color marks only the fact of "shared."
できます。保存は即時で、取り消しや編集はいつでも。記録は消費されるものではなく、時間とともに価値が増す資産です。Yes. Saving is instant, and undo or edit is always available. A record isn't something consumed—it's an asset that gains value over time.
滞在を促す通知は置きません。受け取るのは、あなたが選んだ「毎日のふりかえり」だけです。There are no notifications that nag you to return. You receive only the "daily reflection" you opted into.
開いた項目だけ署名色になり、指標が回る。アクセシビリティは
aria-expanded／aria-controls で示し、ネイティブの <button> なので Enter/Space で開閉できる。Only the open item takes the signature color, and its caret rotates. Accessibility is conveyed with aria-expanded / aria-controls; being a native <button>, it toggles with Enter/Space.STATES
Closed閉（aria-expanded=false）closed (aria-expanded=false)
パネル grid-rows 0fr、▾が45°panel grid-rows 0fr; caret at 45°
Open開（aria-expanded=true）open (aria-expanded=true)
grid-rows 1fr に伸び、題＝署名色、▾が回るgrows to grid-rows 1fr; heading signature, caret rotates
PROPS
| prop | 値value | 備考notes |
|---|---|---|
| expanded | true / false | 複数同時に開ける（独立）multiple may be open (independent) |
| head | 題＋指標title + caret | 明朝。開＝署名色、▾が回るMincho. open = signature, caret rotates |
| a11y | aria-expanded | <button>＋aria-controls。Enter/Space可<button> + aria-controls. Enter/Space |
LAYOUT
| param | 値value |
|---|---|
| .accordion | |
| width | fill |
| max-width | 380px |
| border-top | 1px solid var(--line) |
| .acc-item : 1px bottom rule | |
| .acc-head · trigger | |
| width | fill |
| padding | 15px 4px |
| min-height | 42px |
| layout | flow |
| direction | horizontal |
| align-cross | center |
| gap | 12px |
| cursor | pointer |
| .acc-panel : grid rows 0fr → 1fr on open · .acc-body padding 0·4·16 · max-width 44em | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| tap / Enter·Space · head | 高さが滑らかに伸縮、▾が回るheight grows smoothly, the caret rotates | 開閉expand / collapse |
参拾壱
Empty State
空の状態まだ蓄積がない画面の佇まい。「記録は蓄積の資産／再会の瞬間に最も美しく」という思想ゆえ、空の状態こそ静かに、次の一歩だけを示す。煽らず、装飾せず、印は淡く、CTAは一つ。How a screen looks before anything has accumulated. Because "a record is an asset / most beautiful at the moment of reunion," the empty state stays quiet and shows only the next step. No nagging, no ornament—the mark is pale, the call to action is one.
まだ記録がありませんNo records yet
最初の記録をつけてみましょう。小さな一行から、年単位で価値が増していきます。Add your first record. From a single small line, it grows in value by the year.
空の画面を「失敗」や「不足」として扱わない。印は淡く、言葉は前向きに、動線は一つだけ。これが「静けさとしての信頼」（原則3）の現れ。An empty screen is never treated as a failure or a lack. The mark is pale, the words are forward-looking, and there is a single path on. This is "trust as quietness" (Principle 3) made visible.
STATES
—状態なしno states
静的表示（CTAボタンは別途 Button の状態）static (the CTA button has Button's own states)
PROPS
| prop | 値value | 既定default | 備考notes |
|---|---|---|---|
| mark | アイコンicon | — | 46×46・opacity .5・淡い印46×46 · opacity .5 · pale |
| title | テキストtext | — | 明朝17Mincho 17 |
| description | テキストtext | — | max-width 26emmax-width 26em |
| cta | 0–1 | — | 動線は一つだけa single path on |
LAYOUT
| param | 値value |
|---|---|
| .empty | |
| layout | flow |
| direction | vertical |
| align-main | center |
| align-cross | center |
| padding | 40px 24px |
| max-width | 340px |
| .em-mark 46×46 opacity .5 · .em-d max-width 26em · one CTA | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| 本体は操作なし（CTA は Button に準ずる）no interaction in itself (the CTA follows Button) | ||
参拾弐
Search
検索記録を素早く手繰り寄せる入力。先頭に虫眼鏡、入力があれば × で一括消去できる。フォーカス枠は署名色（Text Field と同じ作法）。片手・最短動線（原則4）。An input to pull a record close quickly. A magnifier leads; once there's text, × clears it all at once. The focus border is the signature color (the same manner as Text Field). One-handed, shortest path (Principle 4).
入力があるときだけ × が現れ、押すと一括で消えて再入力に集中できる。フォーカスで枠が署名色に変わる。The × appears only when there's text; pressing it clears everything so you can refocus. On focus, the border turns the signature color.
STATES
Empty未入力empty
× は非表示× hidden
Has value入力あり（.has-value）has value (.has-value)
× が現れ一括消去できる× appears to clear all
Focus合焦（focus-within）focus (focus-within)
枠＝署名色border in the signature color
PROPS
| prop | 値value | 既定default | 備考notes |
|---|---|---|---|
| placeholder | テキストtext | — | 「記録を検索」などe.g. "Search records" |
| clear | auto | — | 入力時のみ ×× only when there is text |
| min-height | 48 | 48 | tap 域・pill 形tap target · pill shape |
LAYOUT
| param | 値value |
|---|---|
| .search | |
| width | fill |
| max-width | 340px |
| min-height | 48px |
| padding | 0 14px |
| layout | flow |
| direction | horizontal |
| align-cross | center |
| gap | 9px |
| background | var(--surface) |
| border | 1px solid var(--line) |
| radius | 999px |
| .lead icon 17 (no shrink) · input grow 1 · .clear round (shown on value) | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| type | × が現れるthe × appears | 絞り込みfilters |
| focus | 枠が署名色にborder turns signature | 入力可能editable |
| × tap | 一括消去clears all | 入力クリアinput cleared |
参拾参
Image
画像アスペクト比を保つ器に
object-fit:cover で収める。角丸はプロパティ（既定はカード角丸／r-none・r-control・r-card・r-surface・round）。読み込み中（aria-busy）は同じ器がスケルトンの箱になり、レイアウトが飛ばない。An image is fit into an aspect-ratio container with object-fit:cover. The corner radius is a property (default card radius / r-none・r-control・r-card・r-surface・round). While loading (aria-busy), the same container becomes a skeleton box, so the layout never jumps.
左：既定（3:2・カード角丸）／中：
round（1:1の円）／右：r-surface（1:1）。器がアスペクト比を持つので、画像の有無でレイアウトが動かない。Left: default (3:2, card radius) / center: round (1:1 circle) / right: r-surface (1:1). The container owns the aspect ratio, so layout doesn't shift whether the image is present or not.SKELETON — 読み込み中の器SKELETON — the loading container
aria-busy="true" を親に付けると、器がそのままプレースホルダの箱になる。アスペクト比・角丸はそのまま保たれる。Set aria-busy="true" on the parent and the container becomes a placeholder box—keeping the very same aspect ratio and corner radius.STATES
Loaded読込済みloaded
object-fit:cover で器に収まるfit with object-fit: cover
Skeleton読み込み中（aria-busy）loading (aria-busy)
同じ器がプレースホルダの箱に、img は隠れるthe container becomes a placeholder; img hidden
PROPS
| prop | 値value | 備考notes |
|---|---|---|
| radius | none / control / card / surface / round | 既定 card。round＝円default card. round = circle |
| aspect | inline aspect-ratioinline aspect-ratio | 既定 3/2。器が比率を保持default 3/2. container holds the ratio |
| fit | cover | object-fit で器に収めるobject-fit to fill the container |
| alt | 必須required | 装飾なら空 altempty alt if decorative |
LAYOUT
| param | 値value |
|---|---|
| .img · container | |
| width | fill |
| radius | 12px |
| background | var(--bg-raised) |
| overflow | hidden |
| aspect-ratio 3/2 default (override inline) · width often set inline | |
| > img : width fill · height fill · object-fit cover | |
| radius : r-none 0 / r-control 10 / r-card 12 / r-surface 16 / round 50% | |
INTERACTION
| 契機trigger | 応答response | 結果result |
|---|---|---|
| 操作なし（静的表示。読み込み中は STATES 参照）no interaction (static; see STATES for loading) | ||
参拾肆
Iconography
アイコン線で描く一群の記号。すべて 24px の升目・線幅 1.6・塗りなし・端と角は丸で統一し、太さ・密度を揃えて佇まいを乱さない。色は
currentColor で親に従う——だからボタンやリストの中で文字色のまま沈み、署名色を奪わない。本採用は約50点で、Core／Actions／Media／Navigation／Voice の5系統に分かれる。実物一覧と分類フィルタは下の一覧に掲げ、分類で絞り込める。A family of symbols drawn in line. All are unified to a 24px grid, 1.6 stroke, no fill, round caps and joins—matching weight and density so the bearing is never disturbed. Color follows the parent via currentColor, so inside a button or list an icon recedes in the text color and never steals the signature. The adopted set is about fifty marks across five families: Core, Actions, Media, Navigation, and Voice. The full specimen sheet with category filters is shown in the gallery below.
home
image
account
settings
save
sort
speaker on
speaker off
play
stop
record
prev
forward
bookmark
like
search
zoom in
zoom out
trash
check
comment
calendar
diagnosis
microphone
voice training
fall
hicup
vibrato
raps voice
whisper voice
accent
bend
voice cut
edge voice
lessons
camera on
camera off
metronome
close
edit
export
plus
right arrow
left arrow
chevron left
chevron right
retry
同じ升目・同じ線幅で描くと、別々の記号でも一群に見える。色は
currentColor＝本文色（ash）で沈み、Night でも自動で反転する。アプリ固有の Voice 系（ビブラート・エッジ等）まで含む全47点。分類は複数選択でき、選んだ分類の OR で絞り込む。Drawn on one grid at one stroke weight, separate marks read as a single family. Color follows currentColor—the body ink (ash)—and inverts automatically in Night. All 47 marks, including the app-specific Voice family (vibrato, edge, and so on). Categories are multi-select, filtered by OR. SPEC
| 項目item | 値value | 備考notes |
|---|---|---|
| viewBox | 0 0 24 24 | 升目を揃えるa shared grid |
| stroke | 1.6 / round | 端・角ともに丸round cap and join |
| fill | none | 塗らず線で描くline only, no fill |
| color | currentColor | 親の文字色に従うfollows the parent text color |
| category | Core / Actions / Media / Navigation / Voice | 複数所属あり・OR で絞るmulti-tagged · filter by OR |
採用色は持たせず
currentColor に従う。アイコンが自前の色を持つと、一画面の署名色（記号の一点）と競合する。文字色のまま沈め、強調は配置と余白で行う。掟升目・線幅・端の丸めを全点で揃える——「同じ手で描いた」連続性が、網羅性より佇まいを支える。棄却比較用に作った別案（線の太い系統など）はプレビューでは隠し、本採用の1.6系だけを掲げる。迷いを並べない。作法新規アイコンは images/icons/ に 24px・線1.6・塗りなしで追加し、本節の一覧へ分類とともに掲げる。AdoptedIcons carry no color of their own; they follow currentColor. If an icon owned a color, it would compete with the screen's single signature point. It recedes in the text color, and emphasis is made by placement and space. RuleGrid, stroke weight, and corner rounding are matched across every mark—the continuity of "drawn by one hand" upholds the bearing more than coverage does. RejectedAlternate studies (heavier-stroke families and the like) are hidden in the preview; only the adopted 1.6 family is shown. Hesitation is not put on display. MannerA new icon is added to images/icons/ at 24px, 1.6 stroke, no fill, then shown—with its categories—in this section's gallery.参拾伍
Skeleton
読み込みの器来る内容の形を先に置いて版面を保持する（読み込み後にレイアウトが飛ばない）。トリガは
aria-busy="true"——標準ARIAで支援技術に「読み込み中」が伝わり、配下のプリミティブ（アバター・テキスト・画像）が自分のスケルトン姿になる。合成物（カード）は実部品を aria-busy 下に置くだけ。シマー（背景グラデの掃引）は採らず、静かな息で急かさない。It holds the page by placing the shape of what's coming (so layout doesn't jump after load). The trigger is aria-busy="true"—standard ARIA tells assistive tech "loading," and descendant primitives (avatar, text, image) take their own skeleton form. A composite (card) just places its real parts under aria-busy. No shimmer (a sweeping gradient); a quiet breath that doesn't rush.
和
アバター＝円（サイズは
.av 指定どおり）、テキスト＝行（--skel-lines で行数）、画像＝器の箱。どれも実部品が aria-busy 下で姿を変えただけ。Avatar = circle (size from .av), text = lines (--skel-lines sets the count), image = the container box. Each is the real primitive changing form under aria-busy.COMPOSED — カードの読み込み形COMPOSED — a card's loading form
07:30
朝のできごとMorning noteHaruki が記録Recorded by Haruki
よく晴れた。少し早く起きられた。新しい一日が静かに始まった。A clear morning. Woke a little earlier. A new day began quietly.
よく晴れた。少し早く起きられた。新しい一日が静かに始まった。A clear morning. Woke a little earlier. A new day began quietly.
「読み込みを再生」で同じカードが約1.8秒スケルトンになり、内容に置き換わる。器が同じなので位置が動かない——別に
.sk-card を作らず、実部品の状態で組むのが要点。"Replay loading" turns the same card into a skeleton for ~1.8s, then it resolves into content. Because the container is identical, nothing shifts—the point is composing from the real parts' state, not authoring a separate .sk-card.採用スケルトンはプリミティブの状態。合成物に作り込まず、アバター・テキスト・画像が自分の読み込み姿を持つ。カードは実部品を aria-busy 下に置くだけで正しい形になり、中身が変わっても skeleton がズレない（DRY・合成で増える）。
採用入口は aria-busy。独自フラグでなく標準ARIA。支援技術に読み込みが伝わり、a11yと一体で実装できる。
棄却斜めに走るシマー（背景グラデの掃引）。anti-ai-look が名指しする「背景グラデ・雰囲気の運動」に当たるため、静かな息（ゆっくりした濃淡）に置換。prefers-reduced-motion では静止。
作法Progress と使い分ける——形が分かる読み込み＝Skeleton／不確定な待ち＝Progress。
AdoptedSkeleton is a state of the primitive. Not authored into composites—avatar, text, and image each own their loading form. A card just places its real parts under aria-busy and gets the right shape; the skeleton never drifts when content changes (DRY, composes by addition).
AdoptedThe trigger is aria-busy. A standard ARIA attribute, not a custom flag. Assistive tech learns it's loading, so it ships hand-in-hand with accessibility.
RejectedA diagonal shimmer (a sweeping gradient). It's exactly the "background gradient / ambient motion" the anti-ai-look policy names, so it's replaced with a quiet breath. Under prefers-reduced-motion it holds still.
MannerUse it apart from Progress—a load whose shape is known = Skeleton; an indeterminate wait = Progress.
参拾陸
Record Flow
適用例・記録フロー部品を繋いだ適用例。「今日の記録」を片手・最小タップで終える。前回を再利用で一括初期化し、保存は即時＋取り消し（回復路）。この画面は「図（プロダクト）」なので角丸を持ち、版面（地）とは文法が異なる。An applied example that composes the parts. "Today's record" is completed one-handed, in the fewest taps. Reuse last fills everything at once; saving is instant with undo (a recovery path). This screen is a "figure (product)," so it carries rounded corners—a different grammar from the page (ground).
今日の記録Today's record
6月14日 日曜日Sunday, June 14
前回と同じでよければSame as last time?
種類TYPE
メモNOTE
時間DURATION
30分min
共有SHARE
最近の記録RECENT
07:30朝のできごとMorning note
よく晴れた。少し早く起きられた。A clear morning. Woke a little earlier.
よく晴れた。少し早く起きられた。A clear morning. Woke a little earlier.
「前回を再利用」→「保存する」で、実質2タップ。保存後はカードとして最近の記録に積まれ、Snackbarの「取り消す」で戻せる。記録は消費ではなく蓄積——再会の瞬間に最も美しくある。"Reuse last" → "Save" is effectively two taps. After saving, the entry stacks into Recent as a card, reversible via the Snackbar's "Undo." A record is accumulation, not consumption—most beautiful at the moment of reunion.
採用再利用動線を一級市民に。多くの記録は前回に近い。「前回を再利用」を画面上部に置き、一括初期化で最小タップへ寄せた（原則4・速さと片手性）。
採用確認の代わりに取り消し。保存は即時に終え、ダイアログで割り込まない。回復路は Snackbar に残す。
作法この適用例は新しい部品を一つも足していない。既存の chip / textarea / stepper / switch / button / card / snackbar を組むだけで一つのプロダクト画面が成立する——「作法による一貫性」の実証。
AdoptedReuse as a first-class path. Most records resemble the last. "Reuse last" sits at the top of the screen, filling everything at once to minimize taps (Principle 4 · speed & one-handedness).
AdoptedUndo instead of confirm. Saving finishes instantly without a dialog interrupting; the recovery path is left in the Snackbar.
MannerThis example adds no new component. Composing the existing chip / textarea / stepper / switch / button / card / snackbar is enough to form a whole product screen—proof of "consistency through manner."
参拾漆
Playground
試作場・色を上書きして試すToDoアプリのサンプルで、署名色（brand）・ブランドソフト（brand-soft）・選択色（accent）を上書きして試せる試作場。上の3つを変えると、チェック・息継ぎ線・進捗（brand）／選択フィルタ（accent）／未完了ピル（brand-soft）が一斉に再テーマされる。署名色は自由に、選択色は分類色（色相環10色）から選ぶ——色は1点ずつ差し替えるだけ。「署名色はテーマ可能」の実証。A sandbox: a sample to-do app where you can override the signature (brand), brand-soft, and selection (accent) colors. Change the brands freely and pick the accent from the classification colors (the ten-hue wheel); the checks, breath line, and progress (brand), the selected filter (accent), and the "left" pill (brand-soft) all re-theme at once—one color swapped at a time. Proof that the signature is themeable.
選択色Accent
今日のやることToday's to-do
6月16日 火曜日Tuesday, June 16
牛乳を買うBuy milk買い物Errand
メールに返信Reply to email仕事Work
夕方に散歩Evening walk健康Health
本を一章読むRead a chapter趣味Hobby
部屋を片付けるTidy the room家事Home
上の3色を変えると ToDo が一斉に追従する。タスクをチェックすると進捗（brand）と「未完了」（brand-soft）が更新され、Snackbar で取り消せる。フィルタの選択は accent。リセットで現在のテーマ値に戻る。Change the three colors and the to-do follows at once. Checking a task updates progress (brand) and "left" (brand-soft), reversible via the Snackbar. The selected filter is accent. Reset returns to the current theme values.
採用上書きは部品でなく1点の色トークン。#pgScreen に --brand / --brand-soft / --accent を渡すだけで、配下の全部品が再テーマされる。各部品はセマンティックトークンしか参照しないため、色の経路が1本に集約されている。
作法これは適用例の発展形——色を触れる試作場。アプリは tokens/themes.css で --brand-base を1つ定義するだけで自分のブランドを持つ。
AdoptedThe override is a single color token, not a component. Pass --brand / --brand-soft / --accent to #pgScreen and every part beneath re-themes. Because each component references only semantic tokens, the color path is funneled into one channel.
MannerThis is the applied example, made tweakable—a sandbox for color. An app gets its own brand by defining a single --brand-base in tokens/themes.css.
参拾捌
Action Flow
適用例・操作シートと確認4つの部品を組んだ適用例。記録カード（Avatar 付き）の
⋯ で Bottom Sheet を下から出し、「削除する」で破壊的確認の Dialog を開く。確認で消し、Snackbar で取り消す。新しい部品は一つも足していない——既存の Card / Avatar / Bottom Sheet / Dialog を組むだけ。An applied example composing four parts. The ⋯ on a record card (with an avatar) raises a Bottom Sheet from below; "Delete" opens a destructive Dialog. Confirming removes it, reversible via the Snackbar. No new component—just the existing Card / Avatar / Bottom Sheet / Dialog, composed.みんなの記録Shared records
H
朝のできごとMorning noteHaruki
よく晴れた。少し早く起きられた。A clear morning. Woke a little earlier.
よく晴れた。少し早く起きられた。A clear morning. Woke a little earlier.
A
昼の散歩Midday walkAoi
公園まで歩いた。風が気持ちよかった。Walked to the park. The breeze felt good.
公園まで歩いた。風が気持ちよかった。Walked to the park. The breeze felt good.
M
夜のひとことEvening wordMidori
おつかれさま。今日もありがとう。Well done today. Thank you again.
おつかれさま。今日もありがとう。Well done today. Thank you again.
記録の操作Record actions
この記録を削除しますかDelete this record?
削除すると、共有先のタイムラインからも消えます。Deleting also removes it from the timelines you shared it to.
カードの
⋯ → 下から操作シート（共有・編集・削除）。削除は Ember で最下段に分け、押すと確認ダイアログ（息継ぎ線も確定も Ember）。確認で消し、Snackbar の「取り消す」で戻せる。シート背後の暗幕タップ・Escape でも閉じる。A card's ⋯ → the action sheet rises (share, edit, delete). Delete is set apart at the bottom in Ember; pressing it opens the confirmation dialog (breath and confirm both Ember). Confirming removes it, reversible via the Snackbar's "undo." Tapping the scrim or pressing Escape closes it too.採用新しい部品を足さず、既存の状態と所作で組む。Card に Avatar を載せ、⋯ で Bottom Sheet（下から満ちる面）を出し、破壊的操作だけ Dialog（取り消せない一線）へ。方向の規則・署名色の規律・回復路（Snackbar）が、別々の部品をまたいでそのまま効く。
作法オーバーレイは枠内に収める擬似ビューポート（Drawer と同じ）。シート／ダイアログの暗幕・Escape・項目選択で閉じる。確定の既定フォーカスは「やめる」（破壊を急がせない）。
AdoptedCompose from existing states and gestures—no new component. Put an avatar on a card, raise a Bottom Sheet (a surface filling from below) on ⋯, and send only the destructive action to a Dialog (the irreversible line). The rule of direction, the signature-color discipline, and the recovery path (Snackbar) carry across the separate parts unchanged.
MannerThe overlay is kept inside a pseudo-viewport (as with the Drawer). Sheet and dialog close on scrim, Escape, or selection. Default focus on confirm is "Cancel"—never rushing the destructive choice.
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.