Skip to content

DESIGN_SYSTEM.md

Latest commit

 

History

History
155 lines (112 loc) · 3.64 KB

DESIGN_SYSTEM.md

File metadata and controls

155 lines (112 loc) · 3.64 KB
Raw

CiteFlow Design System

2026-05-11 | 基于 Rankscale/Otterly/Profound 竞品分析后的设计决策

设计参照

参照对象 借鉴什么
Profound 暗色调 + 数据重度感 + 专业工具氛围
Rankscale shadcn/ui 组件质感 + 圆角系统
Otterly 数据统计卡片 + 信息层级

CiteFlow 独有：蓝色发光系统 + 骨架逐步填充的等待体验

色彩系统

底色        #0A0A0F  页面背景（深邃太空黑）
卡片底      #131318  卡片/区块背景（微亮层级）
边框        #222228  卡片边框、分隔线
主文字      #EDEDEF  标题、重要数字
次文字      #8B8B90  描述文字、标签
弱文字      #5B5B60  元信息、时间戳

强调色      #3B82F6  主按钮、激活态、品牌色
强调发光    #60A5FA  渐变终点、发光效果
强调暗      #1E3A5F  按钮hover、tag背景

成功        #22C55E  高分指标、已对齐
警告        #F59E0B  中等分数、偏差
危险        #EF4444  低分指标、盲区

发光规范

关键指标数字:  box-shadow: 0 0 20px rgba(59, 130, 246, 0.15)
导航激活点:    box-shadow: 0 0 12px rgba(59, 130, 246, 0.5)
卡片hover边框: border-color 过渡到 rgba(59, 130, 246, 0.3)

字体

font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
font-family: 'JetBrains Mono', 'SF Mono', monospace; /* 数据/数字专用 */
用途 字号 字重
页面标题 28px 700
区块标题 16px 600
大数字 48px 700
正文 15px 400
标签/元信息 13px 400
导航标签 11px 500

圆角

元素 圆角
卡片 12px
按钮 8px
Tag/徽章 12px (胶囊)
进度条 6px
输入框 8px

阴影

卡片:    0 1px 3px rgba(0,0,0,0.3)
卡片hover: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 1px rgba(59,130,246,0.1)
导航:    0 0 20px rgba(0,0,0,0.5)

间距

页面边距:     40px
区块间距:     20px
卡片内边距:   28px
元素间距:     12px (小) / 20px (大)

图标

  • 图标库：Lucide Icons（与 Profound 一致）
  • 尺寸：20px（行内）/ 16px（标签内）
  • 颜色：继承文字色

动画

场景 动效 时长
骨架加载 脉冲呼吸（opacity 0.3↔0.6） 1.5s 循环
卡片亮起 opacity 0→1 + translateY 4px→0 0.4s ease-out
数字跳动 count-up 动画 0.6s ease-out
导航切换 平滑滚动 scroll-behavior: smooth
进度条填满 width 0→目标值 0.8s ease-out

9 区块展示顺序

  1. 引用率仪表盘 — 蓝色发光大数字
  2. 品牌画像 — 一句话定位 + 价值主张
  3. 市场感知与评价 — AI认知 vs 企业评价
  4. 差距分析 — 双维度 + 盲区
  5. 量化评分 — 5维进度条
  6. 竞品矩阵 — 胜负统计 + 维度明细
  7. AI推荐话术 — 关键词 + 禁忌
  8. 引用源权威 — 来源表格
  9. 三引擎对比 — GPT/Gemini/Haiku

等待态（三态骨架系统）

状态 视觉效果
⏳ 等待上游 灰色骨架、无脉冲、文字"等待XXX完成"
🟡 正在执行 蓝色脉冲骨架、状态文字实时更新
✅ 已完成 骨架消失、真实数据淡入、发光数字

响应式

  • 优先桌面端（1440px 基准）
  • 最小支持 1024px
  • 移动端暂不做（诊断报告不适合手机阅读）

技术栈

  • 纯静态 HTML + CSS + 原生 JS（无框架依赖）
  • SSE（Server-Sent Events）推送阶段事件
  • Lucide Icons（CDN 加载）