Survey/UI system/ Token sets /Concept
Set を切り替えると、読み解くデザインのリデザイン(そのサイトのトークンで塗り替え)が既定表示。 忠実標本・共通18項目も切替可。採用時は聖域(紙・蛍光黄・テラコッタ・明朝+ゴシック等)を戻す。
リデザイン: 全12(既定)忠実UI + 共通18: 切替可audited tokens: 全12
Set
bakko proposedbaseline
オブジェクト
redesign · layout desk
リデザイン — baseline — 本番に近い紙の編集室(聖域トークンのまま)。
“デザイン”をもっと身近にするブックガイド 現在の書籍登録数:1361冊
token set bakko proposed · layout desk
Taste extraction
layout: desk 紙の編集室。蛍光黄で刺し、テラコッタで帯を引き、明朝で読む。
#F1EFEA#EFECE6#FFFFFF#E7E4DC#151515#2C2C2C#C35C45#F4D21EExtraction audit
audited 2026-07-21 · confidence: observed / inferred / guessed
Native system: Dual: production main.css sacred colors; design-lab tokens-proposed.css full --bk-* scale (Oku structure on bakko paper).
Open questions(要確認)
Values
| group | token | value | confidence | source | |
|---|---|---|---|---|---|
| surface | --bk-paper紙床 | #F1EFEA | observed | live bakko.club :root --color-bg + assets/styles/main.css; tokens-proposed --bk-paper | sacred |
| surface | --bk-paper-washウォッシュ帯 | #EFECE6 | observed | tokens-proposed.css --bk-paper-wash (lab baseline; not yet on live :root) | |
| surface | --bk-paper-raised浮き面 | #FFFFFF | observed | tokens-proposed --bk-paper-raised; live uses #fff for WIP chips / raised mats | |
| surface | --bk-paper-recessed凹面 | #E7E4DC | observed | tokens-proposed --bk-paper-recessed; live CSS #e7e4dc wells | |
| ink | --bk-ink-strong見出しインク | #151515 | inferred | tokens-proposed --bk-ink-strong | |
| ink | --bk-ink本文インク | #2C2C2C | observed | live --color-ink / main.css | sacred |
| ink | --bk-ink-muted補助インク | rgba(44, 44, 44, 0.56) | observed | tokens-proposed --bk-ink-muted | |
| ink | --bk-ink-labelUIラベル | rgba(44, 44, 44, 0.48) | observed | tokens-proposed --bk-ink-label | |
| accent | --bk-brandブランド | #C35C45 | observed | live --color-brand | sacred |
| accent | --bk-brand-deepリンク | #8F3F2E | observed | live --color-link | sacred |
| accent | --bk-mark蛍光ペン | #F4D21E | observed | live --color-highlight | sacred |
| rule | --bk-rule-hairヘアライン | rgba(38, 37, 38, 0.12) | observed | tokens-proposed --bk-rule-hair | |
| rule | --bk-rule-mid中罫 | rgba(38, 37, 38, 0.22) | observed | tokens-proposed --bk-rule-mid | |
| rule | --bk-rule強罫 | #262526 | observed | live --color-border / tokens-proposed --bk-rule | |
| type | --bk-font-serif見出し書体 | "Hiragino Mincho ProN", "Noto Serif JP",… | observed | live --font-serif | sacred |
| type | --bk-font-sansUI書体 | "Hiragino Sans", "Hiragino Kaku Gothic P… | observed | live --font-sans | sacred |
| type | --bk-text-m本文サイズ | 1rem | observed | tokens-proposed --bk-text-m; html font-size 14px on live | |
| type | --bk-text-heroヒーローサイズ | 2.8571rem | guessed | tokens-proposed --bk-text-hero (~40px @ 14) | |
| type | --bk-leading-body本文行間 | 1.75 | observed | live --line-body | |
| type | --bk-leading-snug見出し行間 | 1.4 | observed | main.css h1/h2 line-height:1.4; tokens-proposed --bk-leading-snug | |
| type | --bk-tracking-labelラベル字間 | 0.06em | inferred | tokens-proposed --bk-tracking-label | |
| type | --bk-weight-uiUI字重 | 400 | observed | tokens-proposed --bk-weight-ui; html font-weight normal | |
| space | --bk-space-blockブロック間隔 | 40px | observed | tokens-proposed --bk-space-block | |
| space | --bk-space-sectionセクション間隔 | 80px | observed | tokens-proposed --bk-space-section | |
| space | --bk-measure-prose本文幅 | 560px | observed | tokens-proposed --bk-measure-prose | |
| space | --bk-page-maxページ最大幅 | 1120px | observed | tokens-proposed --bk-page-max; live width:88% shell | |
| shape | --bk-action-radiusCTA角 | 3px | observed | tokens-proposed --bk-radius-sm / --bk-action-radius; live WIP chip border-radius:3px | |
| shape | --bk-tile-radiusタイル角 | 4px | observed | tokens-proposed --bk-radius-md / --bk-tile-radius | |
| shape | --bk-cover-art-radius書影アート角 | 2px | observed | tokens-proposed --bk-cover-art-radius / --bk-radius-xs | |
| action | --bk-action-fillCTA塗り | #151515 | observed | tokens-proposed --bk-action-fill → ink-strong | |
| action | --bk-action-textCTA文字 | #FFFFFF | observed | tokens-proposed --bk-action-text → paper-raised | |
| action | --bk-action-pad-yCTA縦余白 | 10px | observed | tokens-proposed --bk-action-pad-y | |
| action | --bk-action-pad-xCTA横余白 | 16px | observed | tokens-proposed --bk-action-pad-x | |
| cover | --bk-cover-well書影の井 | #FFFFFF | observed | tokens-proposed --bk-cover-well | |
| cover | --bk-cover-well-pad井パッド | 4px | observed | tokens-proposed --bk-cover-well-pad | |
| cover | --bk-shadow-cover書影影 | 0 25px 20px -20px #00000073 | observed | tokens-proposed --bk-shadow-cover | |
| library | --bk-rail-widthレール幅 | 220px | guessed | tokens-proposed --bk-rail-width (Oku→bakko library structure) | |
| library | --bk-tile-gapタイル間隔 | 16px | observed | tokens-proposed --bk-tile-gap | |
| library | --bk-tile-padタイル内余白 | 16px | observed | tokens-proposed --bk-tile-pad | |
| library | --bk-row-pad-y行縦余白 | 12px | observed | tokens-proposed --bk-row-pad-y | |
| library | --bk-tab-underlineタブ下線 | 2px solid #151515 | guessed | tokens-proposed --bk-tab-underline |
Schema
--bk-paper紙床sacredpage ground--bk-paper-washウォッシュ帯--bk-paper-raised浮き面--bk-paper-recessed凹面--bk-ink-strong見出しインク--bk-ink本文インクsacred--bk-ink-muted補助インク--bk-ink-labelUIラベル--bk-brandブランドsacredテラコッタ--bk-brand-deepリンクsacred--bk-mark蛍光ペンsacred--bk-rule-hairヘアライン--bk-rule-mid中罫--bk-rule強罫--bk-font-serif見出し書体sacred明朝スタックを聖域として維持しつつ、サイト版は傾向を記録--bk-font-sansUI書体sacred--bk-text-m本文サイズ--bk-text-heroヒーローサイズ--bk-leading-body本文行間--bk-leading-snug見出し行間--bk-tracking-labelラベル字間--bk-weight-uiUI字重--bk-space-blockブロック間隔--bk-space-sectionセクション間隔--bk-measure-prose本文幅--bk-page-maxページ最大幅--bk-action-radiusCTA角--bk-tile-radiusタイル角--bk-cover-art-radius書影アート角--bk-action-fillCTA塗り--bk-action-textCTA文字--bk-action-pad-yCTA縦余白--bk-action-pad-xCTA横余白--bk-cover-well書影の井--bk-cover-well-pad井パッド--bk-shadow-cover書影影--bk-rail-widthレール幅--bk-tile-gapタイル間隔--bk-tile-padタイル内余白--bk-row-pad-y行縦余白--bk-tab-underlineタブ下線Diff
Active と並べて見る相手:
差分 36 / 41
| token | bakko proposed | Oku |
|---|---|---|
--bk-papersacred | #F1EFEA | #FFFFFF |
--bk-paper-wash | #EFECE6 | #F6F6F6 |
--bk-paper-recessed | #E7E4DC | #F3F4F4 |
--bk-ink-strong | #151515 | #131314 |
--bk-inksacred | #2C2C2C | #131314 |
--bk-ink-muted | rgba(44, 44, 44, 0.56) | #46474E |
--bk-ink-label | rgba(44, 44, 44, 0.48) | #8C8C90 |
--bk-brandsacred | #C35C45 | #000000 |
--bk-brand-deepsacred | #8F3F2E | #131314 |
--bk-marksacred | #F4D21E | #F8DF80 |
--bk-rule-hair | rgba(38, 37, 38, 0.12) | #E8E8E9 |
--bk-rule-mid | rgba(38, 37, 38, 0.22) | #D1D1D3 |
--bk-rule | #262526 | #000000 |
--bk-font-serifsacred | "Hiragino Mincho ProN", "Noto Serif JP",… | FabricSerifWeb, Georgia, Cambria, "Times… |
--bk-font-sanssacred | "Hiragino Sans", "Hiragino Kaku Gothic P… | "Inter", -apple-system, BlinkMacSystemFo… |
--bk-text-m | 1rem | 0.9375rem |
--bk-text-hero | 2.8571rem | 1.5rem |
--bk-leading-body | 1.75 | 1.8 |
--bk-leading-snug | 1.4 | 1.3 |
--bk-tracking-label | 0.06em | 0.07em |
--bk-space-block | 40px | 24px |
--bk-space-section | 80px | 48px |
--bk-measure-prose | 560px | 640px |
--bk-page-max | 1120px | 1136px |
--bk-action-radius | 3px | 8px |
--bk-tile-radius | 4px | 8px |
--bk-cover-art-radius | 2px | 3px |
--bk-action-fill | #151515 | #000000 |
--bk-action-pad-y | 10px | 0px |
--bk-action-pad-x | 16px | 24px |
--bk-cover-well | #FFFFFF | #F6F6F6 |
--bk-cover-well-pad | 4px | 16px |
--bk-shadow-cover | 0 25px 20px -20px #00000073 | 0px 1.1px 1.5px rgba(0, 0, 0, 0.15), 0px… |
--bk-rail-width | 220px | 224px |
--bk-row-pad-y | 12px | 16px |
--bk-tab-underline | 2px solid #151515 | 3px solid #131314 |
Next