色の語彙は3語だけ
状態ごとに色を割り当てるのをやめた。緑=OK・青=情報・赤=NG のような意味色は使わない。読み手が取る行動だけで色を決める。
黒 — 終わり
停止、確定、これ以上手を入れない状態。ページ内で最も強い視覚的重みを持つ。
停止
確定
コーラル — 手を動かす所
結論ラベル、要対応、次のアクション。読み手が今すぐ何かする場所にだけ使う。
要対応
冒頭差し替え
結論
無色 — それ以外
素通りしてよい情報。件数の大半はここに入る。灰色の枠と文字だけで表す。
継続
様子見
トークン
値の正本は design/tokens.json。ここは写し。値は変えず、使い方だけを絞っている。
| 色 | 変数 | 値 | 用途 |
|---|---|---|---|
| クリーム | --bg | #FAF9F6 | ページ背景 |
| 白 | --surface | #FFFFFF | カード・表の面 |
| 淡灰 | --surface-soft | #F5F4F1 | 表ヘッダ、選択行、プレースホルダ |
| 罫線 | --border | #E8E6E1 | 枠線・区切り |
| 強罫線 | --border-strong | #D5D2CC | チップの枠、選択状態 |
| 黒 | --text | #2D2A26 | 本文、終わりの塗り |
| グレー | --muted | #5C5A56 | 補助テキスト、ラベル |
| コーラル | --accent | #D97757 | 面・枠・ドット（文字には使わない） |
| 濃コーラル | --accent-text | #A6432A | コーラル系の文字（AA確保用） |
タイポグラフィ
見出しは Noto Serif JP、本文は Inter、数値とコードは JetBrains Mono。文字間は常に 0（負の letter-spacing を使わない）。
h1 / 25px / 600
Noto Serif JP
Noto Serif JP
今週の判定と次にやること
h2 / 20px / 600
Noto Serif JP
Noto Serif JP
停止候補の内訳
h3 / 17px / 600
Noto Serif JP
Noto Serif JP
冒頭の差し替え理由
本文 / 16px / 1.8
Inter
Inter
累計でプラスのキャンペーンは残し、2日続けて赤字幅が広がった1本だけ止める。
補助 / 14px
Inter
Inter
判定は配信3日目から。それ以前は数字が動いても触らない。
コード / 0.88em
JetBrains Mono
JetBrains Mono
demo_op_m12_p3 を demo_op_s2_p8 に差し替える
形と間隔
装飾ではなく余白と階層で見せる。影を濃くしない。
角丸
12px
影
0 2px 8px rgba(45,42,38,.08)
ヘッダーと本文の間
56px
カード内側
18〜20px
本文の行間
1.8
読み物の本文幅
760〜820px