/* ============================================================ HAYASHI-アポリスト デザイントークン 案A 濃紺 × 水色（推奨） tokens.css / 2026-09-10 ------------------------------------------------------------ ここには「値」だけを置く。見た目のルールは base.css / components.css。 色を変えたいときは、原則このファイルだけを触れば全画面に反映される。 ▼ 開発担当へ FUKINO-CRM の css/tokens.css と **変数名は1つも変えていない**。 このファイルを丸ごと置き換えるだけで、青系に切り替わる。 末尾の「11. 今回このアプリで増えた表示のための追加トークン」だけが 新しく増えた変数（3タブ・A/B/C評価・進捗・協業・役職のため）。 増やした理由は、その節のコメントに書いてある。 ▼ この案の雰囲気 信頼感・誠実。金融/法人向けの定番。濃紺で「きちんとしている」を出し、水色で古くさくしない。 ============================================================ */ :root { /* ──────────────────────────────────────────────── 1. ブランドカラー 濃紺（ネイビー）。600 が主ボタン、700 が淡色地の文字、800 が押下時。 ▼ 設計上いちばん大事な点（FUKINO-CRM から変わったところ） ピンクのときは「主ボタンは淡いピンク＋こげ茶の文字」だった。 青は淡いままだと文字が乗せられない（水色に白文字は 2.14:1 で読めない）。 そこで **主ボタン・選択中のタブは濃紺の塗り＋白文字** に変える。 淡い青・水色は「面の下地と飾り」に役割を限定する。 数値は白文字とのコントラスト比。AA(4.5:1) の可否を併記。 ──────────────────────────────────────────────── */ --brand-50: #F2F7FD; /* 面のごく淡い下地 */ --brand-100: #DEEBFA; /* チップ背景・選択中の下地 */ --brand-200: #BFD8F3; /* 枠線（強調）*/ --brand-300: #7FB6E8; /* 装飾専用（白文字 2.15:1）*/ --brand-400: #3E8FD8; /* 装飾専用（白文字 3.43:1）*/ --brand-500: #1E6FC0; /* 白文字 5.13:1 */ --brand-600: #17518F; /* ★主ボタン・選択中タブ。塗り＋白文字 8.05:1 */ --brand-700: #123F72; /* 淡色地の上の文字 OK（on brand-100 8.77:1）*/ --brand-800: #0C2B4F; /* 押下時・最も濃い 14.25:1 */ /* アクセント 水色（スカイ）。500 は装飾専用のいちばん明るい水色、600/700 は文字を載せてよい濃さ。 */ --accent-100: #E0F5FE; --accent-300: #A5E3FB; --accent-500: #38BDF8; /* 装飾専用。文字は載せない（白文字 2.14:1）*/ --accent-600: #0B6E96; /* 塗り＋白文字 OK 5.70:1 */ --accent-700: #085876; /* 淡色地の上の文字 OK（on accent-100 7.00:1）*/ /* ──────────────────────────────────────────────── 2. ニュートラル 青みを含んだニュートラル（クールグレー）。純粋な灰色は使わず、わずかに青を混ぜて全体をなじませる。 ※変数名は FUKINO-CRM のまま（--warm-*）。値だけ寒色に置き換えている。 名前を変えると既存CSSの参照が全部壊れるため、あえて残している。 ──────────────────────────────────────────────── */ --warm-0: #FFFFFF; --warm-50: #F7FAFD; /* 画面の背景 */ --warm-100: #EEF4FA; /* 淡い青の面 */ --warm-200: #DEE7F0; /* 標準の境界線 */ --warm-300: #C7D5E4; /* 強めの境界線 */ --warm-500: #5C6B7F; /* 補助テキスト 背景の上で 5.19:1 */ --warm-600: #47566A; /* 副テキスト 背景の上で 7.14:1 */ --warm-900: #16283D; /* 本文 背景の上で 14.27:1 */ /* ──────────────────────────────────────────────── 3. 役割で呼ぶ色（画面のCSSからはこちらを使う） ──────────────────────────────────────────────── */ /* 面 */ --color-bg: var(--warm-50); --color-surface: var(--warm-0); --color-surface-sunk: var(--brand-50); /* 通知パネルなど一段沈んだ面 */ --color-overlay: rgba(22, 40, 61, .48); /* 文字（3段階まで。これ以上薄い文字は作らない） */ --color-text: var(--warm-900); /* 本文・氏名 14.27:1 */ --color-text-sub: var(--warm-600); /* メモ・会社名 7.14:1 */ --color-text-muted: var(--warm-500); /* 日付・単位 5.19:1 */ --color-text-on-fill: #FFFFFF; /* 濃い塗りの上（バッジ・トースト）*/ --color-text-on-brand: #FFFFFF; /* ★変更点：主ボタンが濃紺の塗りになったので白 8.05:1 */ --color-text-brand: var(--brand-700); /* 淡色地の上のブランド文字 */ /* 線 */ --color-border: var(--warm-200); --color-border-strong: var(--warm-300); --color-border-brand: var(--brand-200); /* アクセント（主役） */ --color-primary: var(--brand-600); /* 塗りボタンの基準色 */ --color-primary-hover: var(--brand-700); --color-primary-press: var(--brand-800); --color-primary-vivid: var(--accent-500); /* 装飾専用。文字を載せない */ /* 主ボタン・選択中のタブ。濃紺の塗り。ここに載せる文字は必ず白。 */ --gradient-primary: linear-gradient(135deg, #17518F 0%, #123F72 100%); --gradient-primary-hover:linear-gradient(135deg, #123F72 0%, #0C2B4F 100%); /* さらに濃い塗り（通知アイコンなど、白抜きを最も強く見せたい面）*/ --gradient-strong: linear-gradient(135deg, #123F72 0%, #0C2B4F 100%); --gradient-strong-hover: linear-gradient(135deg, #0C2B4F 0%, #0C2B4F 100%); /* 淡い下地（モーダルの見出し・空状態など）。文字は通常の本文色で読める */ --gradient-soft: linear-gradient(135deg, #F2F7FD 0%, #E0F5FE 100%); /* 飾り線用。文字は載せない */ --gradient-site: linear-gradient(90deg, #A5E3FB 0%, #DEEBFA 100%); /* 状態 */ --color-success: #0F6B52; /* 白文字OK 6.47:1 */ --color-success-bg: #DFF3EC; --color-success-bd: #A9DCC8; --color-warning: #8A5206; /* 淡色地の上の文字 5.47:1 */ --color-warning-bg: #FDEBD2; --color-warning-bd: #F0CB94; --color-danger: #C62B45; /* 白文字OK 5.48:1（通知バッジ）*/ --color-danger-bg: #FFECEE; /* 評価（アポ / 代理店様タブ： ○＝また会いたい / △＝保留 / ×＝もう会わない） 色だけに頼らず、必ず記号（○△×）を一緒に出すこと。 見込みリストの A/B/C とは **色の系統をわざと変えている**（下の 11. 参照）。 */ --rating-ok-fg: #0F6B52; --rating-ok-bg: #DFF3EC; --rating-ok-bd: #A9DCC8; --rating-mid-fg: #8A5206; --rating-mid-bg: #FDEBD2; --rating-mid-bd: #F0CB94; --rating-ng-fg: #5A6675; --rating-ng-bg: #EDF0F4; --rating-ng-bd: #D6DDE5; /* ──────────────────────────────────────────────── 4. タイポグラフィ（FUKINO-CRM と同じ。変更なし） 表示用：Zen Kaku Gothic New ／ 本文用：Noto Sans JP ※Webフォントは読み込まない（外部へつながない方針）。 ──────────────────────────────────────────────── */ --font-display: "Zen Kaku Gothic New", "Zen Maru Gothic", "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "Yu Gothic", "Meiryo", sans-serif; --font-body: "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴシック", "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif; --fs-display: 26px; /* 画面タイトル */ --fs-h1: 22px; /* セクション見出し */ --fs-h2: 18px; /* カード内見出し */ --fs-lg: 17px; /* 氏名・タブ */ --fs-body: 16px; /* 本文・入力欄・ボタン */ --fs-sm: 14px; /* 補助・タグ・会社名 */ --fs-xs: 13px; /* 日付・注釈（これより小さい文字は使わない）*/ --lh-tight: 1.4; --lh-normal: 1.6; --lh-body: 1.8; --ls-tight: .01em; --ls-normal: .02em; --ls-wide: .06em; --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; /* ──────────────────────────────────────────────── 5. 余白（4の倍数。この9段階だけを使う） ──────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-14: 56px; /* ──────────────────────────────────────────────── 6. 角丸 ピンク版よりわずかに小さくして、business らしい引き締まった印象にする。 ──────────────────────────────────────────────── */ --radius-sm: 8px; /* タグ・小さい要素 */ --radius-md: 12px; /* 入力欄 */ --radius-lg: 16px; /* カード */ --radius-xl: 22px; /* モーダル・パネル */ --radius-full: 999px; /* ボタン・チップ・タブ */ /* ──────────────────────────────────────────────── 7. 影（青みを混ぜた薄い影。黒い影・多重の濃い影は使わない） ──────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(20, 45, 80, .06); --shadow-sm: 0 1px 2px rgba(20, 45, 80, .06), 0 2px 8px rgba(20, 45, 80, .06); --shadow-md: 0 4px 14px rgba(20, 45, 80, .12); --shadow-lg: 0 12px 32px rgba(20, 45, 80, .18); --shadow-brand: 0 4px 12px rgba(20, 45, 80, .30); /* 主ボタン */ --shadow-brand-hover: 0 7px 18px rgba(20, 45, 80, .36); --ring-focus: 0 0 0 4px var(--brand-200); /* ──────────────────────────────────────────────── 8. 動き（0.15〜0.25秒。やりすぎない） ──────────────────────────────────────────────── */ --dur-fast: .15s; --dur: .2s; --dur-slow: .25s; --ease: cubic-bezier(.2, .8, .3, 1); --ease-bounce: cubic-bezier(.34, 1.4, .64, 1); /* ──────────────────────────────────────────────── 9. レイアウト ──────────────────────────────────────────────── */ --container: 1160px; --header-h: 64px; --tap-min: 44px; /* 10. 重なり順 */ --z-header: 100; --z-overlay: 200; --z-modal: 210; --z-toast: 300; /* ════════════════════════════════════════════════ 11. 今回このアプリで増えた表示のための追加トークン ------------------------------------------------ ▼ なぜ増やしたか FUKINO-CRM には無かった表示が4つ増えたため。 どれも「一覧でひと目で見分ける」ことが目的なので、 色を画面CSSに直書きすると後で揃わなくなる。ここに集約する。 (a) 見込みリストの評価 A / B / C (b) 見込みリストの進捗 成約 / 検討中 / 未成約 (c) 協業できるか ○ / × (d) 役職バッジ 個人事業主 / 代表 / 会社員 / フリーター / 学生 ここから下は **既存の変数を1つも書き換えていない**。すべて追記。 ════════════════════════════════════════════════ */ /* (a) 見込みリストの評価 A / B / C ──────────────── ○△× が「緑・オレンジ・グレー」なのに対し、A/B/C は **ブランド色の濃さの段階** にする。系統が違うので、 一覧で2種類の評価が混ざっても取り違えない。 A がいちばん重い（濃紺の塗り＋白文字）。 */ --rank-a-fg: #FFFFFF; --rank-a-bg: #17518F; --rank-a-bd: #123F72; /* 白文字 8.05:1 */ --rank-b-fg: #123F72; --rank-b-bg: #DEEBFA; --rank-b-bd: #BFD8F3; /* 8.77:1 */ --rank-c-fg: #47566A; --rank-c-bg: #EEF4FA; --rank-c-bd: #DEE7F0; /* 6.75:1 */ /* (b) 見込みリストの進捗 ────────────────────────── 形も変える：評価は「丸＋1文字」、進捗は「角丸の帯＋文字」。 色が見えにくい人でも形と文字で区別できる。 成約だけ塗りつぶしにして、一覧の中で最初に目に入るようにする。 */ --progress-done-fg: #FFFFFF; --progress-done-bg: #0F6B52; --progress-done-bd: #0F6B52; /* 6.47:1 */ --progress-doing-fg: #8A5206; --progress-doing-bg: #FDEBD2; --progress-doing-bd: #F0CB94; /* 5.47:1 */ --progress-none-fg: #5A6675; --progress-none-bg: #EDF0F4; --progress-none-bd: #D6DDE5; /* 5.11:1 */ /* (c) 協業できるか ○ / × ──────────────────────── アクセント色をここで初めて「意味のある色」として使う。 × は色を持たせず、薄い枠線だけにする（否定を強調しすぎない）。 */ --coop-yes-fg: #085876; --coop-yes-bg: #E0F5FE; --coop-yes-bd: #A5E3FB; /* 7.00:1 */ --coop-no-fg: #47566A; --coop-no-bg: #FFFFFF; --coop-no-bd: #C7D5E4; /* 7.14:1 */ /* (d) 役職バッジ ──────────────────────────────── 5種類あるが **色分けしない**。色で分けると評価バッジと競合して 一覧がうるさくなるため、全部同じ地味な枠線バッジで文字だけ変える。 */ --role-fg: #47566A; --role-bg: #EEF4FA; --role-bd: #DEE7F0; /* 6.75:1 */ /* (e) カード上辺の色帯 ────────────────────────── components.css の .person-card::before / .person-row の左線は いま色が直書きされている（#23A37B など）。 ここに出したので、そちらは var(--card-bar-*) に置き換えてよい。 */ --card-bar-default: linear-gradient(90deg, #7FB6E8, #BFD8F3); --card-bar-ok: linear-gradient(90deg, #0F6B52, #46A98C); --card-bar-mid: linear-gradient(90deg, #C07C22, #EBB96A); --card-bar-ng: linear-gradient(90deg, #A9B4C2, #D6DDE5); --card-bar-a: linear-gradient(90deg, #123F72, #1E6FC0); --card-bar-b: linear-gradient(90deg, #3E8FD8, #7FB6E8); --card-bar-c: linear-gradient(90deg, #A9B4C2, #D6DDE5); --card-line-ok: #0F6B52; --card-line-mid: #C07C22; --card-line-ng: #A9B4C2; --card-line-a: #17518F; --card-line-b: #3E8FD8; --card-line-c: #A9B4C2; /* (f) 3タブになったことによる調整 ────────────── components.css の .tabs は grid-template-columns: 1fr 1fr。 3タブなので repeat(3, 1fr) に変える。この変数を使ってもよい。 */ --tabs-columns: repeat(3, 1fr); /* (g) 画面の背景のにじみ（base.css の body 用）──── ピンク版の radial-gradient を、この案の色に置き換えたもの。 */ --bg-glow-1: rgba(56, 189, 248, .13); --bg-glow-2: rgba(23, 81, 143, .08); } /* ──────────────────────────────────────────────── スマホ（〜600px）でのサイズ調整 本文16pxは据え置き。見出しだけ少し下げる。 ──────────────────────────────────────────────── */ @media (max-width: 600px) { :root { --fs-display: 21px; --fs-h1: 19px; --fs-h2: 17px; --fs-lg: 16px; --header-h: 56px; } }