/* ============================================================ jp-refined トークン契約 v1.1 (P2基盤・2026-07-19) 正本: docs/reference/jp-refined/design-language.md v0.2 親設計: tasks/design/2026-07-19-saas-web-production-system.md §4(P2) v1.1 (2026-07-19): QC Medium-1対応=機能色4変数を追加 (--c-error / --c-field-bg / --c-field-ink / --c-ink-invert)。 primitives.cssの直書きを全て変数参照へ置換済み ■ 契約の考え方 - 「変数名」が契約。ページ側は必ず変数だけを参照する(生の色・サイズ直書き禁止) - 「値」はプリセット(業種×ページ目的)が差し替える。プリセットの値は P1a/P1b実測レンジ内に収める。レンジ外の値を入れる時は逸脱記録1行必須 - プリセットの色はサンプル。実案件では**クライアントのブランド色から再導出**する (P1b持ち越し課題: b2主色がnagashima実測と同値になった反省) ============================================================ */ /* ------------------------------------------------------------ 0. 基底契約(全プリセット共通・実測に基づく固定値) ------------------------------------------------------------ */ :root{ /* ============================================================ 単位系 --u (v1.2・2026-07-21追加) ------------------------------------------------------------ 【原則】横方向の寸法(外側余白・グリッドの溝・カラム幅)は すべて --u の倍数で指定する。個別にpx値を選ばない。 出典: 模写解析 results/research/2026-07-21-clone-study-shichiken/ 実在サイト(七賢)を再現して判明。1画面幅の計測では 「gap 52.1739px」という謎の数字にしか見えなかったが、 6段階(1024〜1920px)で測り直すと 1200/23 と判明。 ページ全体が「画面幅を23等分した1目盛り」の倍数で組まれ、 余白1 + 細カラム5 + 溝1 + 太カラム15 + 余白1 = 23u で閉じていた。 我々の失敗(comparison.md 実測): 同一ページ内で 間隔7種(26/32/34/40/44/52/56px)・カラム幅4種(280/300/340/420px)を 独立に選んでいた。これが「場当たりで整っていない」の正体。 【使い方】 外側余白 padding-inline: var(--u) グリッドの溝 gap: var(--u) カラム幅 calc(var(--u) * 5) のように倍数で書く 非対称2カラム grid-template-columns: calc(var(--u)*5) 1fr; (左右反転して繰り返すと構造にリズムが出る) ============================================================ */ --u: clamp(18px, calc(100vw / 25), 48px); /* 幅と余白 (正本§9: コンテナ1200px前後・読み物960-1000px) */ --container: 1200px; --container-narrow: 960px; --pad-x: var(--u); /* v1.2: 単位系へ移行(旧=32px固定/SP20px) */ --section-gap: 96px; /* 実測帯64/80/96/128/168。縦の律は別系統(七賢も130px固定) */ /* 文字サイズ (正本§5: PC本文14-16px・補助12-13px・SP本文16px確保) */ --fs-body: 15px; --fs-note: 12.5px; /* ウェイト (正本§4: 1案件3段まで。基本は400/700) */ --fw-base: 400; --fw-mid: 500; /* 使わなくてよい。使うなら3段目として */ --fw-bold: 700; } @media (max-width: 768px){ :root{ /* --pad-x は v1.2 で --u に統合(SP375pxでは clamp下限の18pxになる) */ --fs-body: 16px; /* §5: SPは16px確保(ズーム誘発の回避) */ --section-gap: 64px; } } /* ------------------------------------------------------------ 1. プリセット契約(業種×ページ目的で値が入る変数の一覧) ページ側で使ってよいのはこの名前だけ ------------------------------------------------------------ 色: --c-ink / --c-ink-sub / --c-bg / --c-surface / --c-line --c-brand / --c-brand-deep / --c-accent --c-cta-bg / --c-cta-ink (主CTAは brand と分離できる) 機能色: --c-error (フォームエラー文字・枠線) --c-field-bg / --c-field-ink (入力欄の背景と文字) --c-ink-invert (暗い地の上で使う明色文字=地色反転。 明色プリセットでは白系の面にも流用可) 書体: --font-en / --font-jp / --font-display (見出し用。jpと同じでも可) ※スタック順は「欧文→和文→フォールバック」(正本§1) 字間: --ls-body / --ls-head / --ls-label (欧文ラベル用の広め字間) 行間: --lh-body / --lh-head 角丸: --radius-s / --radius-m / --radius-pill 影: --shadow-card (「none」も正当な値。まず影なし+枠線で試す=正本§8) ------------------------------------------------------------ */ /* ============================================================ 2. プリセット5種(P1a/P1bの合格・検証済みFVから抽出) 使い方: のように指定 ============================================================ */ /* --- saas-it: SaaS/IT・HP型 (出典: fv-a2合格版・smarthr/freee/layerx実測帯) --- */ [data-preset="saas-it"]{ --c-ink:#23221f; /* 暖かい黒(§6: 純黒禁止) */ --c-ink-sub:#4d5560; --c-bg:#fcfdfd; --c-surface:#f7f9f9; --c-line:#e4e9ea; --c-brand:#0b7f86; --c-brand-deep:#095c61; --c-accent:#0b7f86; --c-cta-bg:#0b7f86; --c-cta-ink:#ffffff; --c-error:#b0433f; /* 機能色(v1.1): 明色地に効く赤褐(primitives実測値を昇格) */ --c-field-bg:var(--c-bg); --c-field-ink:var(--c-ink); --c-ink-invert:#ffffff; --font-en:"Helvetica Neue",Arial,sans-serif; --font-jp:YuGothic,"Yu Gothic Medium","Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif; --font-display:var(--font-jp); --ls-body: normal; /* §2: SaaS/ITはnormalが正解になりうる */ --ls-head: normal; --ls-label: .08em; --lh-body: 1.5; /* §3: IT本文1.40-1.50 */ --lh-head: 1.15; /* §3: 見出し1.0-1.25 */ --radius-s: 6px; /* §7: SaaS 2-12px */ --radius-m: 12px; --radius-pill: 9999px; --shadow-card: 0 16px 40px rgba(35,34,31,.09); /* §8: 0.06-0.13・黒でなくink寄り */ } /* --- shigyo-brand: 士業・重厚ブランド型 (出典: fv-b2/b3合格版・nagashima実測帯) ※紺×金はサンプル値。実案件はブランド色から再導出(同値流用の再発防止) --- */ [data-preset="shigyo-brand"]{ --c-ink:#141f3f; /* このプリセットでは「地色」側で使う濃紺 */ --c-ink-sub:rgba(253,253,252,.72); --c-bg:#141f3f; /* 写真の上に紺グラデを敷く前提の暗色設計 */ --c-surface:rgba(252,252,251,.97); --c-line:rgba(200,168,110,.4); --c-brand:#c8a86e; --c-brand-deep:#aa8f6a; --c-accent:#c8a86e; --c-cta-bg:#c8a86e; --c-cta-ink:#1a1a14; --c-error:#b0433f; /* 機能色(v1.1): フォーム面は白カードのため明色地用の赤 */ --c-field-bg:#ffffff; /* 暗色設計だが入力欄は白面に置く(fv-b3実測) */ --c-field-ink:var(--c-ink); --c-ink-invert:#fdfdfc; /* 紺地の上の明色文字 */ --font-en:Baskerville,Georgia,"Times New Roman",serif; /* --font-en がオールドスタイル数字(Baskerville/Georgia)のため、本文の実用数字は等高数字へ逃がす */ --font-num-ui:"Hiragino Kaku Gothic ProN","Helvetica Neue",Arial,sans-serif; --font-jp:"Hiragino Kaku Gothic ProN","Noto Sans JP",YuGothic,Meiryo,sans-serif; --font-display:YuMincho,"Yu Mincho","Hiragino Mincho ProN",serif; --ls-body: .08em; /* §2: 士業は正の字間0.05-0.12em */ --ls-head: .12em; --ls-label: .28em; --lh-body: 2; /* 読ませ系(nagashima 1.8帯の上) */ --lh-head: 1.6; /* 逸脱記録: §3レンジ超=和文明朝複数行(実在例snowpeak 1.83) */ --radius-s: 0; /* §7: 士業・ブランドは角丸ほぼなし */ --radius-m: 0; --radius-pill: 9999px; --shadow-card: 0 18px 50px rgba(5,9,24,.45); /* 逸脱記録: §8超=暗景写真上の白カード用 */ } /* --- shigyo-light: 士業・軽量明色型 (出典: fv-f・brief-swap検証版) 重厚型と同業種でも brief が違えば別トーンになる実例 --- */ [data-preset="shigyo-light"]{ --c-ink:#26312b; --c-ink-sub:#5d6a62; --c-bg:#ffffff; --c-surface:#f4f7f2; --c-line:#e3e9e1; --c-brand:#4a8f3c; --c-brand-deep:#3a7230; --c-accent:#4a8f3c; --c-cta-bg:#4a8f3c; --c-cta-ink:#ffffff; --c-error:#b0433f; /* 機能色(v1.1) */ --c-field-bg:var(--c-bg); --c-field-ink:var(--c-ink); --c-ink-invert:#ffffff; --font-en:"Helvetica Neue",Arial,sans-serif; --font-jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",YuGothic,Meiryo,sans-serif; --font-display:var(--font-jp); --ls-body: .06em; --ls-head: .08em; --ls-label: .3em; --lh-body: 1.75; /* §3: 読ませ系1.70-1.80 */ --lh-head: 1.5; --radius-s: 4px; --radius-m: 4px; --radius-pill: 9999px; --shadow-card: none; /* §8: まず影なし+枠線 */ } /* --- mfg-brand: 製造・町工場ブランド型 (出典: fv-c2合格版・OIGEN類型) --- */ [data-preset="mfg-brand"]{ --c-ink:#161310; --c-ink-sub:rgba(250,248,245,.7); --c-bg:#161310; --c-surface:rgba(250,248,245,.06); --c-line:rgba(201,160,106,.35); --c-brand:#c9a06a; --c-brand-deep:#a9835a; --c-accent:#c9a06a; --c-cta-bg:transparent; /* 製造HP型: CTAは控えめ(枠線ボタン) */ --c-cta-ink:#faf8f5; --c-error:#e8b3b0; /* 機能色(v1.1): 暗地・半透明面でも読める明赤 */ --c-field-bg:rgba(250,248,245,.94); --c-field-ink:var(--c-ink); --c-ink-invert:#faf8f5; /* 黒地の上の明色文字(本プリセットの明トーンに統一) */ --font-en:Baskerville,"EB Garamond",Georgia,serif; /* --font-en がオールドスタイル数字(Baskerville/EB Garamond/Georgia)のため、本文の実用数字は等高数字へ逃がす */ --font-num-ui:"Hiragino Sans","Helvetica Neue",Arial,sans-serif; --font-jp:"Hiragino Sans",YuGothic,Meiryo,sans-serif; --font-display:YuMincho,"Yu Mincho","Hiragino Mincho ProN","Hiragino Mincho Pro",serif; --ls-body: .16em; --ls-head: .2em; --ls-label: .34em; --lh-body: 2; --lh-head: 1.78; /* 逸脱記録: §3超=和文明朝複数行(snowpeak 1.83) */ --radius-s: 0; --radius-m: 0; --radius-pill: 9999px; --shadow-card: none; /* §8: 影ゼロ(snowpeak型) */ } /* --- finance-lp: 金融・電話CV業種・LP型 (出典: fv-e・9.6金融実測=電話+受付時間 +即時性CTA+固定バー4/4) --- */ [data-preset="finance-lp"]{ --c-ink:#1d2b26; --c-ink-sub:#5c6a62; --c-bg:#fbfbf9; --c-surface:#ffffff; --c-line:#dfe5df; --c-brand:#0c3f30; --c-brand-deep:#092e23; --c-accent:#e8a63d; --c-cta-bg:#e8a63d; --c-cta-ink:#241a06; --c-error:#b0433f; /* 機能色(v1.1) */ --c-field-bg:var(--c-bg); --c-field-ink:var(--c-ink); --c-ink-invert:#ffffff; --font-en:"Inter","Helvetica Neue",Arial,sans-serif; --font-jp:"Hiragino Kaku Gothic ProN","Noto Sans JP",YuGothic,Meiryo,sans-serif; --font-display:var(--font-jp); --ls-body: normal; /* 実務・速さの帯 */ --ls-head: .01em; --ls-label: .08em; --lh-body: 1.6; --lh-head: 1.28; --radius-s: 6px; --radius-m: 8px; --radius-pill: 9999px; --shadow-card: 0 10px 30px rgba(12,63,48,.08); } /* --- adshift-hp: IT・マーケ支援受託・コーポレートHP型 (P3実案件・2026-07-19新設) 出典: ブランド色=adshift既存承認サイト(2026-07-12・コバルト#2c6bcc系)から明色地用に再導出。 ink/行間/字間/角丸/影はsaas-it帯(smarthr/freee/layerx実測)の範囲内。 brand #2456a8 = 白地でコントラスト比6.0:1(元コバルトを文字・CTA可読まで暗転) --- */ [data-preset="adshift-hp"]{ --c-ink:#17263c; /* 青黒(§6: 純黒禁止。layerx#152632〜nagashima#141f3f帯) */ --c-ink-sub:#4e5c70; --c-bg:#fbfcfe; --c-surface:#f3f6fa; --c-line:#dfe6ee; --c-brand:#2456a8; --c-brand-deep:#1a4084; --c-accent:#2456a8; --c-cta-bg:#2456a8; --c-cta-ink:#ffffff; --c-error:#b0433f; /* 機能色(v1.1) */ --c-field-bg:var(--c-bg); --c-field-ink:var(--c-ink); --c-ink-invert:#ffffff; --font-en:"Avenir Next","Helvetica Neue",Arial,sans-serif; --font-jp:"Hiragino Kaku Gothic ProN","Noto Sans JP",YuGothic,Meiryo,sans-serif; --font-display:var(--font-jp); --ls-body: normal; /* §2: IT系はnormalが正解になりうる */ --ls-head: normal; --ls-label: .08em; --lh-body: 1.6; /* §3: IT1.5〜読ませ1.75の間(BtoB相談商材) */ --lh-head: 1.2; /* §3: 見出し1.0-1.25 */ --radius-s: 4px; /* §7: SaaS/IT 2-12px */ --radius-m: 8px; --radius-pill: 9999px; --shadow-card: 0 12px 32px rgba(23,38,60,.08); /* §8: 0.06-0.13・ink寄りの色 */ } /* ------------------------------------------------------------ 3. 契約の検査ルール(実装後チェック=正本§10と対) - 変数以外の生値(#333 #000 #fff・素のNoto単独スタック)が出たら契約違反 (transparent / currentColor は可) - プリセットにない業種はプリセットを新設する(既存の流用改変はしない) - 新設時は必ず「出典(実測サイト or 合格FV)」をコメントで付ける - 【P2 QC Medium-2対応の運用】P3の1ページ目=本契約の受入テストと 位置づける。変数が足りず生値を書きたくなったら、その場で書かずに 本契約へ変数を追加してv1.2として記録する(変数の先回り量産はしない =部品先行量産禁止の親設計と整合) ------------------------------------------------------------ */