/* * Design Tokens — マナビズ Learning Platform * 5-Zone System (⓪Hub + ①Free / ②Personal / ③Corporate / ④Cert) * Figmaデザインシステム(fileKey: l6Q5DqEgU9PRp5vs1h6OnO)と1:1対応 * Updated: 2026-04-12 * * ===================================================================== * 5つのゾーンブランド * ===================================================================== * ⓪Hub — 中立/上質 (ブロンズ + ink navy) — トップページ * ①Free — Schoo風 (ティール + イエロー) — 無料コンテンツ * ②Personal — NewsPicks風 (ロイヤルブルー + editorial) — 個人サブスク * ③Corporate — MS Learn風 (ダークネイビー + アクア) — 法人SaaS * ④Cert — 日経xTECH風 (黒 + ゴールド + 明朝) — 資格講座 * * ===================================================================== * 使い方 * ===================================================================== * HTMLの body または section に data-zone 属性を付けると、 * その範囲内のコンポーネントが該当ゾーンの顔に切り替わります。 * * ... *

...

* * :root の値は ⓪Hub モード(デフォルト)。data-zone 属性で上書きされます。 * * ===================================================================== * コンポーネント側の指針 * ===================================================================== * - 背景/ボーダー → var(--color-bg), var(--color-surface), var(--color-border) * - テキスト → var(--color-text-primary), var(--color-text-body) * - アクセント → var(--color-accent) または var(--zone-accent-primary) * - カード角丸 → var(--zone-radius-card) * - ボタン角丸 → var(--zone-radius-button) * - カード影 → var(--shadow-card) * * ゾーンを切り替えれば、これらが自動で各ブランドのトーンに変わります。 */ :root { /* =================================================================== * Colors — ⓪Hub デフォルト値(ブロンズ + ink navy) * =================================================================== */ --color-primary: #0D1B2A; --color-accent: #C08C50; --color-accent-light: #D9BEA3; --color-accent-bg: #F5EFE8; --color-secondary: #5C6575; --color-secondary-bg: #F0F0EC; --color-warning: #E07A2F; --color-warning-bg: #FDE8D7; --color-warning-text: #8F3E0A; --color-bg: #FAFAF7; --color-surface: #FFFFFF; --color-border: #E8E5DD; --color-text-primary: #0D1B2A; --color-text-body: #2D2D2D; --color-text-secondary: #5C5C5C; --color-text-muted: #9C9C9C; /* =================================================================== * Zone-specific variables — Figma Zone コレクション対応 * ⓪Hub のデフォルト値 * =================================================================== */ --zone-accent-primary: #0D1B2A; --zone-accent-secondary: #C08C50; --zone-accent-subtle-bg: #F5EFE8; --zone-accent-on-accent: #FFFFFF; --zone-radius-card: 16px; --zone-radius-button: 8px; --zone-radius-hero: 24px; /* =================================================================== * Typography * =================================================================== */ --font-family-base: 'Noto Sans JP', 'Helvetica Neue', 'Hiragino Sans', sans-serif; --font-family-serif: 'Noto Serif JP', '游明朝', 'Yu Mincho', serif; --font-family-en: 'Inter', 'DM Sans', 'Helvetica Neue', sans-serif; /* deprecated: 互換のため残存。新規コードは --font-family-base を使うこと */ --font-family: var(--font-family-base); --text-h1: 28px; --text-h2: 22px; --text-h3: 17px; --text-body: 15px; --text-caption: 13px; --text-small: 12px; --text-tiny: 11px; --text-badge: 10px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 900; --leading-tight: 1.4; --leading-normal: 1.6; --leading-relaxed: 1.8; --leading: 1.8; /* deprecated alias */ /* =================================================================== * Spacing * =================================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; /* =================================================================== * Layout * =================================================================== */ --container-max: 1200px; --container-narrow: 480px; --header-height: 48px; /* =================================================================== * Border Radius (static scale — ゾーン依存のものは --zone-radius-*) * =================================================================== */ --radius-sm: 3px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-pill: 24px; --radius-circle: 50%; /* =================================================================== * Shadows * --shadow-card はゾーンで上書きされる前提のエイリアス * =================================================================== */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.07); --shadow-plan: 0 4px 20px rgba(13,27,42,0.08); --shadow-card: var(--shadow-md); --shadow-hero: 0 20px 60px rgba(13,27,42,0.10); } /* ===================================================================== * [data-zone="hub"] / body.zone-hub — ⓪Hub (明示指定用、:root と同値) * ===================================================================== */ [data-zone="hub"], body.zone-hub { --color-primary: #0D1B2A; --color-accent: #C08C50; --color-accent-light: #D9BEA3; --color-accent-bg: #F5EFE8; --color-secondary: #5C6575; --color-secondary-bg: #F0F0EC; --color-bg: #FAFAF7; --color-surface: #FFFFFF; --color-border: #E8E5DD; --color-text-primary: #0D1B2A; --color-text-body: #2D2D2D; --color-text-secondary: #5C5C5C; --color-text-muted: #9C9C9C; --zone-accent-primary: #0D1B2A; --zone-accent-secondary: #C08C50; --zone-accent-subtle-bg: #F5EFE8; --zone-accent-on-accent: #FFFFFF; --zone-radius-card: 16px; --zone-radius-button: 8px; --zone-radius-hero: 24px; --shadow-card: 0 4px 16px rgba(13,27,42,0.06); } /* ===================================================================== * [data-zone="free"] / body.zone-free — ①Free (Schoo風・明るいティール + 丸み) * ===================================================================== */ [data-zone="free"], body.zone-free { --color-primary: #0D1B2A; --color-accent: #0F6E56; --color-accent-light: #9FE1CB; --color-accent-bg: #E1F5EE; --color-secondary: #FFD166; --color-secondary-bg: #FFF6D8; --color-bg: #FFFFFF; --color-surface: #FAFAF8; --color-border: #E8E8E8; --color-text-primary: #0D1B2A; --color-text-body: #2D2D2D; --color-text-secondary: #5C5C5C; --color-text-muted: #999999; --zone-accent-primary: #0F6E56; --zone-accent-secondary: #FFD166; --zone-accent-subtle-bg: #E1F5EE; --zone-accent-on-accent: #FFFFFF; --zone-radius-card: 20px; --zone-radius-button: 999px; --zone-radius-hero: 32px; --shadow-card: 0 8px 24px rgba(15,110,86,0.12); --shadow-hero: 0 20px 60px rgba(15,110,86,0.25); } /* ===================================================================== * [data-zone="personal"] / body.zone-personal — ②Personal (NewsPicks風・editorial + ブルー) * ===================================================================== */ [data-zone="personal"], body.zone-personal { --color-primary: #0D1B2A; --color-accent: #185FA5; --color-accent-light: #85B7EB; --color-accent-bg: #E6F1FB; --color-secondary: #1A1A2E; --color-secondary-bg: #F0F0F5; --color-bg: #F7F7F2; --color-surface: #FFFFFF; --color-border: #DDDDD8; --color-text-primary: #0D1B2A; --color-text-body: #2D2D2D; --color-text-secondary: #5C5C5C; --color-text-muted: #999999; --zone-accent-primary: #185FA5; --zone-accent-secondary: #1A1A2E; --zone-accent-subtle-bg: #E6F1FB; --zone-accent-on-accent: #FFFFFF; --zone-radius-card: 12px; --zone-radius-button: 6px; --zone-radius-hero: 16px; --shadow-card: 0 2px 8px rgba(0,0,0,0.06); --shadow-hero: 0 12px 32px rgba(24,95,165,0.12); } /* ===================================================================== * [data-zone="corporate"] / body.zone-corporate — ③Corporate (MS Learn風・ダーク + パープル/アクア) * ===================================================================== */ [data-zone="corporate"], body.zone-corporate { --color-primary: #F5F5F5; --color-accent: #534AB7; --color-accent-light: #AFA9EC; --color-accent-bg: #26215C; --color-secondary: #00B8D9; --color-secondary-bg: #0A2F3C; --color-warning: #FFB020; --color-warning-bg: #3D2C0A; --color-warning-text: #FFD98A; --color-bg: #0D1B2A; --color-surface: #142236; --color-border: #2A3A52; --color-text-primary: #F5F5F5; --color-text-body: #D0D6E0; --color-text-secondary: #8A94A6; --color-text-muted: #5C6578; --zone-accent-primary: #534AB7; --zone-accent-secondary: #00B8D9; --zone-accent-subtle-bg: #1E2A4A; --zone-accent-on-accent: #FFFFFF; --zone-radius-card: 8px; --zone-radius-button: 4px; --zone-radius-hero: 0; --shadow-card: 0 4px 16px rgba(0,184,217,0.08); --shadow-hero: 0 8px 32px rgba(83,74,183,0.22); } /* ===================================================================== * [data-zone="cert"] / body.zone-cert — ④Cert (日経xTECH風・黒 + ゴールド + 明朝) * ===================================================================== */ [data-zone="cert"], body.zone-cert { --color-primary: #F5F5F5; /* Gold is the primary cert accent ("黒 + ゴールド + 明朝" per strategy). * Red was previously assigned to --color-accent which made tuition prices, * 合格率 badges and CTA buttons render red-on-near-black with poor contrast. * Red is now demoted to secondary for use as a sparing emphasis color. */ --color-accent: #D4A012; --color-accent-light: #E8C45C; --color-accent-bg: #3D2C0A; --color-secondary: #8B1A1A; --color-secondary-bg: #2A1515; --color-warning: #E07A2F; --color-warning-bg: #3D1F0A; --color-warning-text: #F0B878; --color-bg: #1A1A1A; --color-surface: #2A2A2A; --color-border: #4A3F2A; --color-text-primary: #F5F5F5; --color-text-body: #D4D4D4; --color-text-secondary: #B8B8B8; --color-text-muted: #8A8A8A; --zone-accent-primary: #D4A012; --zone-accent-secondary: #8B1A1A; --zone-accent-subtle-bg: #2A2010; --zone-accent-on-accent: #1A1A1A; --zone-radius-card: 2px; --zone-radius-button: 0; --zone-radius-hero: 0; --shadow-card: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px rgba(212,160,18,0.12); --shadow-hero: 0 0 0 1px rgba(212,160,18,0.3); }