/* tokens/colors.css */ /* ============================================================ NTT DATA — Color Tokens Source of truth: NTT DATA Group Corporate template theme ("NTT DATA Group Corp." color scheme) + VVI brand guidance. 構成: 1. ブランドパレット（不変・テーマで変えない） 2. セマンティックエイリアス（ライト既定値） 3. [data-theme="dark"] でセマンティック層のみ上書き ============================================================ */ :root { /* --- Brand core ------------------------------------------------ */ --ntt-future-blue: #0071BC; /* PRIMARY brand color */ --ntt-future-blue-150: #005B96; /* darker — depth, hovers on light */ --ntt-future-blue-50: #2E90FF; /* lighter Future Blue — links, accents, on-dark text */ /* --- Neutrals / backgrounds ----------------------------------- */ --ntt-smart-navy: #070F26; /* primary dark background + headings */ --ntt-text-grey: #2E404D; /* default body text */ --ntt-grey-100: #949494; /* muted text, dividers, disabled */ --ntt-black: #000000; /* select use only (per VVI) */ --ntt-white: #FFFFFF; /* Extended neutral ramp (derived from Smart Navy / Text Grey) */ --ntt-grey-700: #3D4A57; --ntt-grey-300: #C7CDD2; --ntt-grey-200: #DDE1E5; --ntt-grey-100-bg: #EEF1F3; /* subtle surface tint */ --ntt-grey-50: #F6F8FA; /* app canvas / off-white */ /* --- Secondary accents ---------------------------------------- */ --ntt-green: #00CB5D; --ntt-turquoise: #00DFED; /* --- Attention accents ---------------------------------------- */ --ntt-yellow: #FFC400; --ntt-orange: #FF7A00; --ntt-orange-100: #E42600; --ntt-orange-150: #B22000; /* --- Dify 寄せのプリミティブ（既定の見た目）------------------------ PM 判断（2026-10-02）：Dify の売り出しに合わせ、既定の見た目を Dify 寄せにする。 NTT DATA ブランドパレット（--ntt-*）は定義を残したまま一切触らない（§2-2）。 切り替えはセマンティック層の「向き先」だけ。顧客版で戻すときは向き先を --ntt-* に戻す。 グレーは Dify が採っているニュートラルランプに合わせた中性色。 */ --dfy-primary: #155EEF; --dfy-primary-600: #004EEB; --dfy-primary-700: #0040C1; --dfy-primary-50: #EFF4FF; --dfy-primary-100: #D1E0FF; --dfy-gray-25: #FCFCFD; --dfy-gray-50: #F9FAFB; --dfy-gray-100: #F2F4F7; --dfy-gray-200: #EAECF0; --dfy-gray-300: #D0D5DD; --dfy-gray-400: #98A2B3; --dfy-gray-500: #667085; --dfy-gray-600: #475467; --dfy-gray-700: #344054; --dfy-gray-800: #1D2939; --dfy-gray-900: #101828; --dfy-white: #FFFFFF; /* ============================================================ SEMANTIC ALIASES — reference these in product UI ダークモードはここだけを上書きする ============================================================ */ /* Surfaces */ --surface-canvas: var(--dfy-gray-50); --surface-card: var(--dfy-white); --surface-sunken: var(--dfy-gray-100); --surface-inverse: var(--dfy-gray-900); --surface-brand: var(--dfy-primary); --surface-header: var(--dfy-white); --surface-hover: var(--dfy-gray-100); --surface-selected: var(--dfy-primary-50); --surface-rail: var(--dfy-gray-25); /* Text */ --text-heading: var(--dfy-gray-900); --text-body: var(--dfy-gray-700); --text-secondary: var(--dfy-gray-600); --text-muted: var(--dfy-gray-500); --text-on-brand: var(--dfy-white); --text-on-inverse: var(--dfy-white); --text-link: var(--dfy-primary); --text-link-hover: var(--dfy-primary-700); /* Borders */ --border-subtle: var(--dfy-gray-200); --border-default: var(--dfy-gray-300); --border-card: var(--dfy-gray-200); --border-strong: var(--dfy-gray-400); --border-brand: var(--dfy-primary); /* Interactive (primary) */ --action-primary: var(--dfy-primary); --action-primary-hover: var(--dfy-primary-600); --action-primary-active:var(--dfy-primary-700); /* Status / feedback */ --status-success: var(--ntt-green); --status-info: var(--ntt-future-blue-50); --status-warning: var(--ntt-yellow); --status-danger: var(--ntt-orange-100); --status-danger-strong: var(--ntt-orange-150); --badge-live-bg: rgba(0, 203, 93, 0.14); --badge-live-fg: #00803B; --badge-trial-bg: rgba(0, 113, 188, 0.12); --badge-trial-fg: #005B96; --status-concept: var(--ntt-grey-100); --badge-concept-bg: rgba(148, 148, 148, 0.16); --badge-concept-fg: #5A6B78; /* ③ 業務フィードの期限バッジ専用（design-pass §9-3。--status-danger は白地/カード上で コントラストが余裕なく、文字色には使えないため専用トークンを立てる） */ --status-danger-text: #B32100; --badge-due-bg: rgba(228, 38, 0, 0.12); /* NEW バッジ（SVCS[].added から自動表示）。--ntt-turquoise 由来。 成熟度（live/trial/concept）・期限（due）と色がぶつからない唯一のブランド色 */ --badge-new-bg: rgba(0, 223, 237, 0.18); --badge-new-fg: #00636E; /* --- 分類アクセント（① サイドバー / ①②③ カード / ② 分類行・ランキング / ③ フィード） --- テキストにも使うため light は白・キャンバス上で 4.5:1 以上、dark はカード上で 4.5:1 以上。 ブランドパレットと一致する 3 色は --ntt-* を参照する（kn / qa / en）。 qa は PM 判断（design-pass.md §15-7）によりアンバーに変更（赤系→amber） */ --cat-kn: var(--ntt-future-blue); /* #0071BC */ --cat-kn-bg: rgba(0, 113, 188, 0.12); --cat-qa: #B45309; --cat-qa-bg: rgba(180, 83, 9, 0.12); --cat-dc: #00707C; --cat-dc-bg: rgba(0, 112, 124, 0.12); --cat-lg: #6A3FB5; --cat-lg-bg: rgba(106, 63, 181, 0.12); --cat-nm: #547000; --cat-nm-bg: rgba(84, 112, 0, 0.12); --cat-en: var(--ntt-grey-700); /* #3D4A57 */ --cat-en-bg: rgba(61, 74, 87, 0.12); --cat-gn: #1F7A46; --cat-gn-bg: rgba(31, 122, 70, 0.12); --cat-pt: #A8347A; --cat-pt-bg: rgba(168, 52, 122, 0.12); /* 金融カタログ新設 5 分類（設計書 2026-09-08-finance-catalog.md §4-10）。 白地で 4.5:1 以上（rs 8.66 / cv 7.45 / fa 6.32 / po 6.12 / eg 8.54） */ --cat-rs: #34478C; --cat-rs-bg: rgba(52, 71, 140, 0.12); --cat-cv: #9C2B3A; --cat-cv-bg: rgba(156, 43, 58, 0.12); --cat-fa: #7A5B00; --cat-fa-bg: rgba(122, 91, 0, 0.12); --cat-po: #0E6E63; --cat-po-bg: rgba(14, 110, 99, 0.12); --cat-eg: #6B3389; --cat-eg-bg: rgba(107, 51, 137, 0.12); /* IT カタログ新設 1 分類（設計書 2026-09-11-it-industry.md §4-4-6）。 --ntt-orange-150 を参照（ブランドパレット不変・§2-2）。白地で 6.78:1 以上 */ --cat-sl: var(--ntt-orange-150); /* #B22000 */ --cat-sl-bg: rgba(178, 32, 0, 0.12); /* システム運用の新設 1 分類（設計書 2026-09-11-sysops-usecase.md §5-4）。白地で 6.96:1 */ --cat-so: #0B5F8A; --cat-so-bg: rgba(11, 95, 138, 0.12); /* 既定値。CAT_STYLE / --cat- が無い分類 id が来ても壊れないためのフォールバック（§2-9） */ --cat-accent: var(--action-primary); --cat-accent-bg: var(--surface-selected); /* --- ② ヒーロー帯（ライト/ダークとも常に暗い面。文字は白で固定） --- */ --surface-hero: var(--dfy-gray-900); /* Dify 寄せ：深紺 → ニュートラルの濃灰 */ --surface-hero-chip: rgba(255, 255, 255, 0.10); --border-hero: rgba(255, 255, 255, 0.16); --border-hero-accent: var(--dfy-primary); /* 帯の下端 3px */ --text-on-hero: var(--dfy-white); --text-on-hero-soft: rgba(255, 255, 255, 0.82); /* --- 大きな数字用の成熟度色 --- --status-success 等は 40px の数字にすると白地で 1.9:1 しかなく読めない。 テキスト用に別トークンを立てる（§2-7：成熟度に手を入れるときは light/dark 同時） */ --status-live-text: #00733A; --status-trial-text: #8A5300; --status-concept-text: #5A6B78; /* ヒーロー帯（常に暗い面）の上に置く数字用。テーマで変えない */ --status-live-hero: #5BE79B; --status-trial-hero: #FFD34D; --status-concept-hero: #C3CDD6; /* Focus ring */ --focus-ring: var(--dfy-primary); /* --- 部門ポータル（mock/portal.html）専用の 22 トークン --- 設計書 docs/handoff/2026-09-11-portal-mock-pages.md §6。値はポータルの現物をそのまま移植。 --ntt-* は触らない。light/dark を同時に足す（このブロックが light 側） */ --rag-r: #B32100; --rag-r-bg: rgba(228, 38, 0, 0.12); --rag-y: #8A5300; --rag-y-bg: rgba(255, 196, 0, 0.20); --rag-g: #00733A; --rag-g-bg: rgba(0, 203, 93, 0.14); --prod-fg: #6B3389; --prod-bg: rgba(107, 51, 137, 0.10); --prod-bd: rgba(107, 51, 137, 0.34); --doc-fg: #7A5B00; --doc-bg: rgba(255, 196, 0, 0.07); --doc-bd: rgba(122, 91, 0, 0.28); --usr-fg: #005B96; --usr-bg: rgba(0, 113, 188, 0.06); --usr-bd: rgba(0, 113, 188, 0.28); --ai-fg: #00707C; --ai-bg: rgba(0, 223, 237, 0.06); --ai-bd: rgba(0, 112, 124, 0.32); --text-on-rail: var(--dfy-gray-600); --text-on-rail-strong: var(--dfy-gray-900); --surface-rail-hover: var(--dfy-gray-100); --surface-rail-selected:var(--dfy-primary-50); /* パイプラインのステージ帯色（.col の border-top）。--cat-accent と同じ、 インライン style で上書きする前提のフォールバック既定値（§2-9 と同じ考え方） */ --stage: var(--border-default); } /* ============================================================ DARK THEME — セマンティック層のみ差し替え。 ブランドパレット（--ntt-*）は一切変更しない。 下地は Smart Navy から起こしたニュートラルランプ。 ============================================================ */ :root[data-theme="dark"] { --surface-canvas: #0C111D; --surface-card: #161B26; --surface-sunken: #0C111D; --surface-header: #161B26; --surface-hover: #1F242F; --surface-selected: #1A2537; --surface-rail: #0C111D; --text-heading: #F5F6F7; --text-body: #CECFD2; --text-secondary: #94969C; --text-muted: #85888E; --text-link: #84ADFF; --text-link-hover: #B2CCFF; --border-subtle: #1F242F; --border-default: #333741; --border-card: #1F242F; --action-primary: #528BFF; --action-primary-hover: #84ADFF; --action-primary-active:#2970FF; /* ダーク背景でのコントラスト確保のため明度を上げる */ --status-success: #2BE07E; --status-warning: #FFD34D; --badge-live-bg: rgba(43, 224, 126, 0.16); --badge-live-fg: #5BE79B; --badge-trial-bg: rgba(46, 144, 255, 0.18); --badge-trial-fg: #7FC0FF; --status-concept: #8A97A6; --badge-concept-bg: rgba(164, 176, 186, 0.16); --badge-concept-fg: #B8C3CC; --status-danger-text: #FF9A80; --badge-due-bg: rgba(255, 154, 128, 0.18); --badge-new-bg: rgba(0, 223, 237, 0.18); --badge-new-fg: #5EE3EF; /* --- 分類アクセント（dark）。qa は PM 判断（design-pass.md §15-7）によりアンバー --- */ --cat-kn: #5AACEE; --cat-kn-bg: rgba(90, 172, 238, 0.18); --cat-qa: #F0A64A; --cat-qa-bg: rgba(240, 166, 74, 0.18); --cat-dc: #3FC9D8; --cat-dc-bg: rgba(63, 201, 216, 0.18); --cat-lg: #B79BFF; --cat-lg-bg: rgba(183, 155, 255, 0.18); --cat-nm: #A8C93F; --cat-nm-bg: rgba(168, 201, 63, 0.18); --cat-en: #A9BACB; --cat-en-bg: rgba(169, 186, 203, 0.18); --cat-gn: #52C98A; --cat-gn-bg: rgba(82, 201, 138, 0.18); --cat-pt: #F07AC0; --cat-pt-bg: rgba(240, 122, 192, 0.18); /* 金融カタログ新設 5 分類（dark）。カード地 #111C30 で 4.5:1 以上 （rs 6.74 / cv 8.00 / fa 9.46 / po 10.38 / eg 7.87） */ --cat-rs: #8CA0E8; --cat-rs-bg: rgba(140, 160, 232, 0.18); --cat-cv: #F09AA3; --cat-cv-bg: rgba(240, 154, 163, 0.18); --cat-fa: #E0BE55; --cat-fa-bg: rgba(224, 190, 85, 0.18); --cat-po: #57DFC8; --cat-po-bg: rgba(87, 223, 200, 0.18); --cat-eg: #D19DE8; --cat-eg-bg: rgba(209, 157, 232, 0.18); /* IT カタログ新設 1 分類（dark）。カード地 #111C30 で 7.37:1 */ --cat-sl: #FF8A66; --cat-sl-bg: rgba(255, 138, 102, 0.18); /* システム運用の新設 1 分類（dark）。カード地 #111C30 で 9.08:1 */ --cat-so: #6FC8F0; --cat-so-bg: rgba(111, 200, 240, 0.18); /* --- ② ヒーロー帯・大きな数字用の成熟度色（dark） --- */ --surface-hero: #050B1A; --surface-hero-chip: rgba(255, 255, 255, 0.08); --border-hero: rgba(255, 255, 255, 0.12); --status-live-text: #5BE79B; --status-trial-text: #FFD34D; --status-concept-text: #B8C3CC; /* --- 影（dark）。--shadow-sm/md はネイビーの薄い影で dark 面にほぼ見えないため、 この2行だけ dark で上書きする（§5-6）。--shadow-focus は変えない --- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55); /* --- 部門ポータル（mock/portal.html）専用の 22 トークン（dark）--- 設計書 §6。--ntt-* は触らない。dark ブロックはこの 1 つのみ（§2-2） */ --rag-r: #FF8A66; --rag-r-bg: rgba(228, 38, 0, 0.20); --rag-y: #FFD34D; --rag-y-bg: rgba(255, 196, 0, 0.18); --rag-g: #5BE79B; --rag-g-bg: rgba(43, 224, 126, 0.16); --prod-fg: #C9A6E4; --prod-bg: rgba(107, 51, 137, 0.24); --prod-bd: rgba(201, 166, 228, 0.40); --doc-fg: #D9BC5B; --doc-bg: rgba(255, 196, 0, 0.07); --doc-bd: rgba(217, 188, 91, 0.30); --usr-fg: #7FC0FF; --usr-bg: rgba(46, 144, 255, 0.08); --usr-bd: rgba(127, 192, 255, 0.30); --ai-fg: #5FD3DE; --ai-bg: rgba(0, 223, 237, 0.07); --ai-bd: rgba(95, 211, 222, 0.30); --text-on-rail: #94969C; --text-on-rail-strong: #F5F6F7; --surface-rail-hover: rgba(255, 255, 255, 0.06); --surface-rail-selected:rgba(82, 139, 255, 0.18); /* パイプラインのステージ帯色（.col の border-top）。--cat-accent と同じ、 インライン style で上書きする前提のフォールバック既定値（§2-9 と同じ考え方） */ --stage: var(--border-default); } /* tokens/typography.css */ /* ============================================================ NTT DATA — Typography Tokens Brand basics (VVI): page titles use GEORGIA, body uses ARIAL. Japanese: Meiryo UI (titles bold) / Meiryo (body). ============================================================ */ :root { --font-display: Inter, "Segoe UI", Arial, "Yu Gothic UI", "Hiragino Kaku Gothic ProN", "Meiryo UI", system-ui, sans-serif; --font-sans: Inter, "Segoe UI", Arial, "Helvetica Neue", Helvetica, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Meiryo", system-ui, sans-serif; --font-jp: Inter, "Segoe UI", "Meiryo UI", Meiryo, "Yu Gothic UI", "Hiragino Kaku Gothic ProN", Arial, sans-serif; --font-zh: Inter, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", sans-serif; --font-en: Inter, "Segoe UI", Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif; --font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", Menlo, monospace; --weight-regular: 400; --weight-medium: 500; --weight-bold: 700; --text-h1: 30px; --text-h2: 24px; --text-h3: 20px; --text-body-lg: 18px; --text-body: 16px; --text-body-sm: 14px; --text-caption: 12px; --text-overline: 11px; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-overline:0.14em; } /* 表示言語に応じて本文フォントを切り替える */ :root[data-lang="ja"] { --font-ui: var(--font-jp); } :root[data-lang="zh"] { --font-ui: var(--font-zh); } :root[data-lang="en"] { --font-ui: var(--font-en); } /* tokens/spacing.css */ :root { --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-12: 48px; --radius-none: 0; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-pill: 999px; --border-hairline: 1px; --border-thick: 2px; --border-accent: 3px; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10); --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.10), 0 2px 4px -2px rgba(16, 24, 40, 0.06); --shadow-focus: 0 0 0 4px rgba(21, 94, 239, 0.18); --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); --duration-fast: 120ms; --duration-base: 200ms; }