Design Lab · noindex
bakko.club の提供価値は「本のカタログ」ではなく、先人の知見へ辿り着く編集された読み筋にある。 ここは現行のデザイントークンとコンポーネントを棚卸ししたうえで、ブラッシュアップの路線と提案トークンを固定するためのラボページ。
進行中の手順: 洗い出し → ピック → トークンセット切替 → bakko転用 → ブラッシュアップ。 いまは /design-lab/tokens で共通枠のサイト版を切り替えて採用を決める本線。 以下の Cursor→トークン節は先行メモ。
Mobbin で Cursor 級プロダクトサイトの構造を分解し、 bakko の聖域（紙色・蛍光・テラコッタ・明朝/ゴシック）に載せ替えた。 見た目のダーク／紫／Inter／pill は借りない。
短リスト: Cursor（基準）· Claude（橋渡し）· Vercel（ink規律）· Linear（面と罫）· bakko 聖域。 画面比較は /design-lab/borrow。
借りるセクション間の広い呼吸（--bk-space-section） / UIラベルを細く・トラッキング広め（--bk-text-xs + --bk-tracking-label） / CTAは画面に稀少・プロダクト実物が証明 / 影よりレイアウト階層で深度を出す
借りないダーク全面 · ネオン／メッシュグラデ · 黒ピルCTAの量産 · Inter系デフォルト
トークン--bk-space-section--bk-space-block--bk-text-hero--bk-tracking-label--bk-action-*--bk-shadow-float
借りる温かいクリーム床＋セリフ見出し＋ゴシックUI / アクセント（テラコッタ系）は稀少 / ghost / solid の二段CTA（角は紙寄り） / 面の差で章を分ける（wash / recessed）
借りない固有フォントの丸写し · 黒ピルの量 · AIマーケのカード群集
トークン--bk-paper--bk-paper-wash--bk-font-serif--bk-brand--bk-action-ghost-border--bk-action-radius
借りるink の三段階（strong / body / muted・label） / hairline で構造、強い罫は見出し帯だけ / クロムはモノトーン — 色はブランド／読みどころに温存
借りない青シアングラデ文言 · メトリクス帯のヒーロー占有 · pure white 既定床
トークン--bk-ink-strong--bk-ink--bk-ink-muted--bk-ink-label--bk-rule-hair--bk-rule-mid--bk-border-band-top
借りるsurface 段階（paper / wash / raised / recessed） / border-alpha でパネルを区切る（影の代わり） / フォーカスリングをトークン化
借りないダークモード既定 · 紫グラデCTA · グロー
トークン--bk-paper-wash--bk-border-surface--bk-rule-hair--bk-focus-ring--bk-overlay-scrim
--bk-space-section / --bk-space-block — 章の呼吸--bk-paper-wash · ink-label · rule-mid — 面と階層--bk-action-* — CTA稀少・角は紙（pill禁止）--bk-focus-ring · --bk-text-hero · measure-dossier スタイルのほぼすべてが assets/styles/main.css にあり、Vue に scoped はない。 :root に色6・フォント2・行間2だけがトークン化され、実体の大半は hex 直書き。
#262526 / #333 / #000 で分裂、utility ページが管理画面寄り--color-brand と --color-border は定義されているが本体は直書きが多い前回の「読み解き N冊」への言い換えは採用しない。カタログの厚み（登録数）は資産であり、完成度の演出で数を減らさない。
Awwwards / godly(Recent) / Siteinspire / 読書アプリ / 索引DB / 日本語編集系を横断し、 1,024 候補から relevance 3 以上の 203 件を corpus に記録（ /design-lab/research）。
単独採用より A（余白）＋ B（索引）＋ C（dossier） の合成が現実的。D（雑誌章）と E（トークン法）は横串。
一句机の上の編集室 — 余白に読む注釈
核心提供価値の中心は「カタログ」ではなく、読む前/後・問い/取り組み/結論という余白の型。UIはその型を邪魔しない読書室。
適合fit 92/100
一句索引の背骨 — 6層と参照グラフを信頼できる俯瞰に
核心DesignRegionMap・keywords・references の価値は「見た目」より索引性。スイス索引＋学術グラフの信頼感を bakko の分類思想に載せる。
適合fit 88/100
一句特集＝編集冊子 — L6a 書影Wellの棚
核心特集/theme はリンク集ではなく dossier。Obys/Dederde の「机の上に開いた本」＋ L6a soft well を本番の書影文法に固定。
適合fit 90/100
一句雑誌の背表紙 — BRUTUS×エクリの章立て
核心BRUTUS/ÉKRITS/Five Books の「号・特集・インタビュー」感。skew帯・headline・蛍光は雑誌の章区切りとして再定義し、SaaS感を落とす。
適合fit 85/100
一句言語の単一化 — Are.na的トークン運用＋WIPの正直さ
核心見た目を増やす前に --bk-* を「法」に。Are.na/Klim/Anthropic のトークン規律で直書き hex を根絶。WIP は恥ではなくラボの透明性。
適合fit 87/100
旧 6 件（Claude / Obys / TM / Marginalian / Are.na / Dederde）は corpus に統合済み。 借りる/借りない/トークン/リスクの全文は research ページ参照。
観察モダンなプロダクトなのにアナログ。象牙キャンバス #faf9f5・温かいインク・セリフの読み物声。影より面の差、余白で章立て。アクセント（clay/coral）は稀少。
借りる紙の床・セリフの声・余白リズム・アクセントの節約。黒ピルや固有フォントはコピーしない。蛍光黄・skew・WIPは捨てない。
観察書架ではなく「机の上に開いた本」として同時に見える編集空間。紙の質感・グリッド・静かな色。リスト販売ではなくキュレーションの場。
借りる特集＝1冊の編集物としての一体感。表紙群の物質感。ノイズの少ないページ設計。
観察スイス組版誌の索引アーカイブ。カバー索引・年次・書体同定。分類が主役で装飾は従。
借りる6層マップとキーワードの「索引性」。俯瞰→詳細の信頼できる探索骨格。
観察余白への書き込み＝読みの対話。長文・引用・本への橋渡しが一貫した一人の声。
借りる読む前／後・問い／取り組み／結論という「余白の型」を聖域として磨き続ける。
観察知識の並置プラットフォームのトークン実装。色・余白・型サイズが単一ソース。
借りる直書き hex をやめてエイリアス化する運用。見た目の刷新より「言語の一貫」。
観察ムード主導の書架。カテゴリは雰囲気の章立て。カード過多を避け、棚のリズム。
借りる特集トップの章立てと書影リズム。統計やバッジで埋めない。
「机の上の編集室」— 蛍光ペンで印をつけ、斜めの帯で章を区切り、系譜で本と本をつなぐ。 分類マップはスイス索引のように信頼できる俯瞰。特集は Obys 的に「ひとまとまりの編集物」として設計する。
現行値を捨てず、名前空間 --bk-* に正規化。 v0.3 は Cursor 級のリズム／階層／CTA規律を追加（本番 main.css は未接続）。
--bk-paper#F1EFEA · 地（紙）--bk-paper-wash#EFECE6 · セクション帯（Cursor/Claude）--bk-paper-raised#FFFFFF · 書影マット / 囲み--bk-paper-recessed#E7E4DC · 凹面・交互行--bk-ink-strong#151515 · 見出し--bk-ink#2C2C2C · 本文--bk-ink-mutedrgba(44,44,44,.56) · 補助--bk-ink-labelrgba(44,44,44,.48) · UIラベル--bk-brand#C35C45 · ブランド帯--bk-brand-deep#8F3F2E · リンク--bk-mark#F4D21E · 蛍光ペン--bk-rule#262526 · 構造線SPECIMEN · tokens v0.3
Cursor の余白規律を、紙と蛍光の上に載せる。 ここだけ色が効く。
特集は「完璧に作り込む」対象の第一候補。トークン確定後に着手するレイアウト方針:
/theme/n） — 現在の系譜リストを、特集リード（description）を主役にした dossier に再構成。書影は --bk-cover-md/lg に統一、日付丸と copy の階層を明瞭化tokens-proposed.css v0.3 の採否を決める（本番未接続）--bk-space-section / dossier measure で組む--bk-* へ置換（見た目を変えずに言語化）