REDESIGN / PHASE 2
Design tokens & UI kit
改修実装指示書 §2 の token / 7 base components を一覧する開発者向けページ。 Basic 認証 + noindex で実質非公開。
COLORS
カラートークン
accent
#E8482Bprimary CTA — coral (Claude Design 案 12回 1位)accent-h
#C8351Ahover (推定値)accent-soft
#FCEAE5tint (推定値)ink
#2A2A28body text (Claude Design 案 7回)meta
#6E7178secondary/meta text (Claude Design 案 9回 2位)graphite
#23303Aheading / dark surfacefooter-dark
#1A1B1FAppFooter 背景 (既存維持)steel
#2F6E8Fvisited / infopaper
#FBFAF7page background (Claude Design 案 2回)surface
#FFFFFFcard / surface (Claude Design 案 6回)hairline
#EAE7DFdivider (Claude Design 案 7回)TYPOGRAPHY
タイポグラフィ
rd-display (Space Grotesk)
MAP / LOCATION / ARTICLES
rd-heading (Zen Kaku Gothic New)
巡礼マップ・聖地巡礼ガイド
rd-body (Noto Sans JP)
本文はマガジン基調で読みやすさを優先。13px ベース、weight 400、line-height 1.7、 色は ink (#2A2A28)。letter-spacing は normal、1px ヘアライン罫を多用してフラット基調を保つ。 (niko and ... の本文サイズ階層 10/12/13/14px を参考)
UiSectionTitle
セクション見出し
MAP
巡礼マップ
ARTICLES
編集部コラム
特集や読み物。
STAMPS
スタンプ帳
UiCard + UiThumb
カード / サムネ
プレースホルダ
elevated + square
padded:false + 16:9
UiPill
表示用ピル
defaultaccent訪問済ghostmd size📍 130m
UiChip
フィルタチップ
押すと active toggle (映画/ドラマ/アニメは択一、未訪問のみは独立)。
UiButton
ボタン
UiProgressBar
プログレスバー
全国12/80(15%)
関東42/80(53%)
アニメ0.62/1(62%)
チェックインなし0/100(0%)
100% 完了100/100(100%)