FDU-INS CSS Design Tokens - 设计规范变量
车险签单数据分析平台的CSS设计规范和变量系统。
🎨 护眼配色体系
图表主色 (Chart Primary Colors)
核心色板 - 护眼蓝灰系:
--chart-primary-blue: #5B8DEF; /* D (最新周期) - 主蓝色 */
--chart-secondary-gray: #8B95A5; /* D-7 (上周) - 次灰色 */
--chart-light-gray: #C5CAD3; /* D-14 (前周) - 浅灰色 */
使用场景:
- 周对比图表: 3条折线分别使用这3种颜色
#5B8DEF(主蓝): 最新7天数据(D)#8B95A5(次灰): 上一个7天(D-7)#C5CAD3(浅灰): 前一个7天(D-14)
ECharts使用示例:
const chartOption = {
color: ['#5B8DEF', '#8B95A5', '#C5CAD3'], // 护眼配色
// ... other options
}
状态色 (Status Colors)
--status-success: #52C41A; /* 上升 ↑ - 成功绿 */
--status-warning: #F5222D; /* 下降 ↓ - 警示红 */
--status-neutral: #8B95A5; /* 持平 — - 中性灰 */
使用场景:
- KPI趋势指示 (↑ ↓ —)
- Toast通知 (成功/错误/信息)
- 数据变化高亮
主色 (Primary Palette)
--primary-50: #f3e8ff;
--primary-100: #e9d5ff;
--primary-500: #a855f7; /* 主按钮、链接 */
--primary-600: #9333ea;
--primary-700: #7e22ce;
使用场景:
- 主按钮背景:
--primary-500 - 主按钮悬停:
--primary-600 - 链接文字:
--primary-500
中性色 (Neutral Colors)
--gray-50: #f9fafb; /* 浅背景 */
--gray-100: #f3f4f6; /* 卡片背景 */
--gray-300: #d1d5db; /* 边框 */
--gray-500: #6b7280; /* 次要文字 */
--gray-700: #374151; /* 辅助文字 */
--gray-900: #111827; /* 主要文字 */
文字颜色映射:
--text-primary: var(--gray-900);
--text-secondary: var(--gray-500);
--text-muted: rgba(17, 24, 39, 0.7);
表面与阴影 (Surface & Shadows)
--surface-default: #ffffff;
--surface-elevated: #ffffff;
--surface-primary-tint: rgba(168, 85, 247, 0.08);
--shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
--shadow-md: 0 10px 30px rgba(15, 23, 42, 0.08);
📏 CSS 变量规范
间距系统 (Spacing)
4px基准网格:
--space-1: 0.25rem; /* 4px */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
使用建议:
- 组件内部间距:
--space-3(12px) 或--space-4(16px) - 组件外部间距:
--space-6(24px) 或--space-8(32px)
圆角 (Border Radius)
--radius-sm: 0.5rem; /* 8px - 小按钮、标签 */
--radius-md: 0.75rem; /* 12px - 卡片、输入框 */
--radius-lg: 1rem; /* 16px - 对话框、大卡片 */
字体系统 (Typography)
--text-xs: 0.75rem; /* 12px - 辅助文字 */
--text-sm: 0.875rem; /* 14px - 次要文字 */
--text-base: 1rem; /* 16px - 正文(默认) */
--text-lg: 1.125rem; /* 18px - 小标题 */
--text-xl: 1.25rem; /* 20px - 标题 */
--text-2xl: 1.5rem; /* 24px - 大标题 */
--text-3xl: 1.875rem; /* 30px - 数值展示 */
字体族:
--font-family-base: 'Inter', 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
边框 (Borders)
--border-accent-width: 0.25rem; /* 4px - 强调边框(左侧装饰线) */
🌗 主题系统
护眼模式 (当前默认)
设计理念:
- 基于眼科医学研究,减少蓝光刺激
- 温暖的米白色背景
#fefcf3 - 降低对比度,避免强烈黑白对比
颜色配置:
:root {
--bg-primary: #fefcf3; /* 温暖米白 */
--bg-secondary: #f8f4e9; /* 浅米色 */
--bg-elevated: #ffffff; /* 纯白 */
--text-primary: #3a3a3a; /* 深灰(降低对比度) */
--text-secondary: #5a5a5a;
--text-muted: #8a8a8a;
}
暗黑模式 (未来扩展)
颜色配置:
[data-theme-mode="dark"] {
--bg-primary: #0d0d0d; /* 纯黑 */
--bg-secondary: #1a1a1a; /* 近黑 */
--bg-elevated: #262626; /* 深灰 */
--text-primary: #f0f0f0; /* 亮白 */
--text-secondary: #c0c0c0;
--text-muted: #909090;
}
✅ 使用最佳实践
规范 1: 使用CSS变量
/* ✅ 正确 */
.text {
color: var(--text-primary);
font-size: var(--text-base);
padding: var(--space-4);
}
/* ❌ 错误: 硬编码 */
.text {
color: #111827;
font-size: 16px;
padding: 16px;
}
规范 2: 语义化颜色
/* ✅ 正确: 使用语义化变量 */
.alert--success {
color: var(--status-success);
}
/* ❌ 错误: 直接使用颜色值 */
.alert--success {
color: #52C41A;
}
规范 3: 间距系统
/* ✅ 正确: 使用间距变量 */
.card {
padding: var(--space-6);
margin-bottom: var(--space-4);
}
/* ❌ 错误: 随意间距 */
.card {
padding: 23px;
margin-bottom: 17px;
}
🔗 相关资源
关键文件位置
- frontend/src/assets/styles/variables.css - CSS变量定义
相关 Skills
- component-styling - 组件样式模板
- vue-component-dev - Vue组件开发
外部参考
✅ 总结
核心要点
- 护眼配色: 蓝灰系
#5B8DEF/#8B95A5/#C5CAD3 - 间距系统: 4px基准网格 (space-1 到 space-8)
- 字体系统: 7级字体大小 (xs到3xl)
- 圆角系统: 3级圆角 (sm/md/lg)
- 主题模式: 护眼模式(当前) + 暗黑模式(未来)
适用场景
✅ 适用:
- 定义新的设计变量
- 修改配色方案
- 调整间距/字体规范
- 实现主题切换
❌ 不适用(请使用其他Skills):
- 组件样式实现 →
component-styling - Vue组件开发 →
vue-component-dev
文档维护者: Claude Code AI Assistant 创建日期: 2025-11-09 下次审查: 2025-11-23