Design System
給与アップ研究所サイトの配色・フォント・使用ルール。
「メインブルー＝ブランド」「オレンジ＝アクション（CTA）」の役割分担を基本とします。
カラー
ブランドカラー（メインブルー）
見出しの強調・KPI数値・アイコン・ブランド要素に使用する基準色。
--tiffany
#0ABAB5メインアクセント（ブランドの基準色）--tiffany-bright
#23DACB明るいアクセント（暗背景上の見出し等）--tiffany-deep
#078F88濃いアクセント（見出し強調・KPI・アイコン）--tiffany-soft
#81D8D0副アクセント（淡いあしらい）アクションカラー（CTA専用オレンジ）
CTA（クリックしてほしいボタン）専用。見出し・本文・カード内テキストには使いません。
--cta
#FF7A29CTA専用（「無料で相談する」等のアクション）--cta-deep
#E86A1ACTAのホバーテキスト
--ink
#152524見出し・濃いテキスト--text
#33413E本文--muted
#5B6764補助テキスト背景・罫線
--paper
#FFFFFFベース背景--mint
#EAF7F5淡い背景（帯・カード）--mint-2
#F4FBFAさらに淡い背景--line
#DFE9E7罫線・枠線フォント
成果を、給与に。
2.0736 ／ 30,000
DESIGN SYSTEM
使用ルール
- 役割分担：メインブルー＝ブランドカラー、オレンジ（
--cta）＝アクション（CTA）。この対応が伝わる使い方を守る。 - オレンジはCTA専用：塗りCTA（
btn--primary／btn--gold／nav__cta）と白ピルCTAのホバーのみ。見出し・説明文・カード内テキストには使わない。 - 強調・数値・アイコンはメインブルー：
.hl／.oの強調、KPIの数値、アイコン、「AI人事評価」等のブランド表現は--tiffany-deep系。 - 色は変数で：生の色値を直書きせず、必ず CSS変数（
--tiffany等）を使う。 - ボックス（カード）：並列するボックス群で1つだけ色を変える強調はしない（全て同色）。クリックできないボックスにホバー効果（変形・影の変化）を付けない（ホバー効果は実リンクのみ）。
- 見出し・リード文の改行：まとまった文は「。」ごとに改行し、各行が1行に収まる幅（max-width）を確保する。