CSS design tokens and color system for vehicle insurance platform. Use when defining colors, spacing, typography, or design variables...
车险签单数据分析平台的CSS设计规范和变量系统。
核心色板 - 护眼蓝灰系:
--chart-primary-blue: #5B8DEF; /* D (最新周期) - 主蓝色 */
--chart-secondary-gray: #8B95A5; /* D-7 (上周) - 次灰色 */
--chart-light-gray: #C5CAD3; /* D-14 (前周) - 浅灰色 */
使用场景:
#5B8DEF (主蓝): 最新7天数据(D)#8B95A5 (次灰): 上一个7天(D-7)#C5CAD3 (浅灰): 前一个7天(D-14)ECharts使用示例:
const chartOption = {
color: ['#5B8DEF', '#8B95A5', '#C5CAD3'], // 护眼配色
// ... other options
}
--status-success: #52C41A; /* 上升 ↑ - 成功绿 */
--status-warning: #F5222D; /* 下降 ↓ - 警示红 */
--status-neutral: #8B95A5; /* 持平 — - 中性灰 */
使用场景:
--primary-50: #f3e8ff;
--primary-100: #e9d5ff;
--primary-500: #a855f7; /* 主按钮、链接 */
--primary-600: #9333ea;
--primary-700: #7e22ce;
使用场景:
--primary-500--primary-600--primary-500--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-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);
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)--radius-sm: 0.5rem; /* 8px - 小按钮、标签 */
--radius-md: 0.75rem; /* 12px - 卡片、输入框 */
--radius-lg: 1rem; /* 16px - 对话框、大卡片 */
--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;
--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;
}
/* ✅ 正确 */
.text {
color: var(--text-primary);
font-size: var(--text-base);
padding: var(--space-4);
}
/* ❌ 错误: 硬编码 */
.text {
color: #111827;
font-size: 16px;
padding: 16px;
}
/* ✅ 正确: 使用语义化变量 */
.alert--success {
color: var(--status-success);
}
/* ❌ 错误: 直接使用颜色值 */
.alert--success {
color: #52C41A;
}
/* ✅ 正确: 使用间距变量 */
.card {
padding: var(--space-6);
margin-bottom: var(--space-4);
}
/* ❌ 错误: 随意间距 */
.card {
padding: 23px;
margin-bottom: 17px;
}
#5B8DEF / #8B95A5 / #C5CAD3✅ 适用:
❌ 不适用(请使用其他Skills):
component-stylingvue-component-dev文档维护者: Claude Code AI Assistant 创建日期: 2025-11-09 下次审查: 2025-11-23
