frontend/src/assets/styles/index.css

@@ -2,32 +2,46 @@
 
 :root {
   /*
-   * 品牌色：与登录页视觉体系同一套（原为登录页 scoped 局部变量，布局框架
-   * 与系统管理页面共用后提升为全局 token）。
-   * 金色分两档：亮金只用于深色底、深金只用于浅色底，保证两处对比度都达标。
+   * 品牌色（2026-10-12 视觉方向：企业级扁平 · 轻质感 · 靛蓝点缀）。
+   * 靛蓝只作重点点缀（主按钮/链接/焦点/当前菜单），大面积用中性灰白。
+   * 设计预览与规范：docs/design/视觉方向预览.html
    */
-  --ys-ink-900: #061a22;
-  --ys-ink-800: #0a2833;
-  --ys-ink-700: #0f3646;
-  --ys-ink-600: #1a4f63;
-  --ys-gold-bright: #c9a227;
-  --ys-gold-deep: #8f6520;
-  --ys-paper: #fafaf7;
-  --ys-text: #16262d;
-  --ys-muted: #6b7b84;
+  --ys-indigo: #2e4ba8;
+  --ys-indigo-deep: #223a85;
+  --ys-indigo-wash: #edf1fa;
+  --ys-paper: #ffffff;
+  --ys-mist: #f4f5f8;
+  --ys-line: rgba(28, 35, 51, 0.09);
+  --ys-ink: #1c2333;
+  --ys-ink-2: #5b6577;
+  --ys-ink-3: #9aa3b2;
 
   /*
-   * Element Plus 主色 = 赭金（浅色底配白字约 6.2:1）。
+   * 旧 token 名保留映射（BasicLayout / 登录页存量引用，值迁移到新体系：
+   * 深水青 → 冷墨系、金色 → 靛蓝系），存量页面迁移完成后移除。
+   */
+  --ys-ink-900: #16203a;
+  --ys-ink-800: #1c2333;
+  --ys-ink-700: #242e4a;
+  --ys-ink-600: #3a4a6e;
+  --ys-gold-bright: #6d81c2;
+  --ys-gold-deep: #2e4ba8;
+
+  --ys-text: #1c2333;
+  --ys-muted: #5b6577;
+
+  /*
+   * Element Plus 主色 = 靛蓝（白字对比约 7.5:1）。
    * 色阶为按 Element Plus 公式「主色与白色混合」预先算好的静态值 ——
    * 不用 color-mix()，避免依赖较新的浏览器特性。
    */
-  --el-color-primary: #8f6520;
-  --el-color-primary-light-3: #b19363;
-  --el-color-primary-light-5: #c7b290;
-  --el-color-primary-light-7: #ddd1bc;
-  --el-color-primary-light-8: #e9e0d2;
-  --el-color-primary-light-9: #f4f0e9;
-  --el-color-primary-dark-2: #72511a;
+  --el-color-primary: #2e4ba8;
+  --el-color-primary-light-3: #6d81c2;
+  --el-color-primary-light-5: #97a5d4;
+  --el-color-primary-light-7: #c0c9e5;
+  --el-color-primary-light-8: #d5dbee;
+  --el-color-primary-light-9: #eaedf6;
+  --el-color-primary-dark-2: #253c86;
 }
 
 * {
@@ -46,8 +60,8 @@ body {
   font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
     'Microsoft YaHei', Arial, sans-serif;
   font-size: 14px;
-  color: #303133;
-  background-color: #f5f7fa;
+  color: var(--ys-ink);
+  background-color: var(--ys-mist);
   -webkit-font-smoothing: antialiased;
 }