配色研究 | SkuWatch Frontend Kit

全局设计 token（抽取自页面主样式）

以下是统一配色底层变量，适合做换肤或在其他模块中复用。

bg / 页面底色

#F4F8FF

用于 body 背景和大范围留白底部区域。

surface / 内容面板

#FFFFFF

大多数卡片底色，强调“轻内容气泡”。

surfaceSoft / 背景分区

#EAF0FF

用于内容块的轻微隔离、输入背景、标签区。

primary / 主按钮色

#4285F4

主交互、关键入口、标题高亮。

primarySoft / 次级按钮

#E8ECFF

按钮浅底色、状态提示、hover 高亮。

accent / 辅助强调

#FBBC05

强调信息、提示或高亮标签。

accentSoft / 柔提示底色

#E8F5EA

温和提醒区块。

text / 主文字色

#23263A

正文、标题、卡片主文案。

主页模块配色拆解

把页面分成 4 类模块看配色关系和层级。

1）顶部导航 / 外壳层

透明度加底色 + 轻边框，降低抢占感。

头部背景 #F4F8FF（透明化）边框 #D7E0F3 交互悬停 #4285F4

Nav item

特征：顶部颜色不重；保留内容优先。适合高频跳转页面。

2）Hero 主区域

大背景渐变 + 标题 + 按钮强弱对比。

主标题 / 副标题（文本色 #23263A 与 #4A506B）

主按钮次按钮

背景色是主视觉锚点，但整体饱和度受控，不会压过内容。

3）卡片区 / 模块列表

核心视觉语言集中在浅白底 + 边框 + 轻阴影。

#FFFFFF 主底 #D7E0F3 边框 #E8ECFF 次背景

示例卡片 A

小标题 / 内容

示例卡片 B

维持统一文本权重与留白比例。

边界清晰同时不厚重，适合长页面承载密集信息。

4）按钮与状态色

强调“操作优先级”，主按钮高对比，次级更轻。

Primary Secondary Ghost

成功/警示/错误色：#3BAA7A、#F0A74B、#D96B6B，出现在成功提示、边框或强调文本的少量场景。谷歌四色常量（可当作流程/状态色）： #4285F4、#EA4335、#FBBC05、#34A853。

配色规则摘要（快速复用）

背景采用 淡中性色，文字保持高对比，避免灰色过暗。
按钮只在关键区域使用主色，减少饱和度干扰，其他区域以 soft 变体代替。
所有面板统一边框 1px + 轻阴影，配合 16/20 圆角形成“轻 UI 质感”。
流程组件和选项卡采用“白底 + 边框 + 柔和背景块”增强分组识别。

--card-shadow: 0 10px 24px rgba(35, 38, 58, 0.08)

模块化配色映射（对照表）

{
  "home": {
    "bg": "#F4F8FF",
    "hero": "linear-gradient(180deg,#F9FCFF,#FFFFFF)",
    "card": "#FFFFFF",
    "text": "#23263A",
    "mutedText": "#4A506B"
  },
  "surface": {
    "base": "#FFFFFF",
    "soft": "#EAF0FF",
    "border": "#D7E0F3"
  },
  "brand": {
    "primary": "#4285F4",
    "primarySoft": "#E5EDFF",
    "accent": "#FBBC05",
    "accentSoft": "#FFF3C4"
  },
  "googleStep": {
    "blue": "#4285F4",
    "red": "#EA4335",
    "yellow": "#FBBC05",
    "green": "#34A853"
  },
  "status": {
    "success": "#3BAA7A",
    "warning": "#F0A74B",
    "danger": "#D96B6B"
  }
}

Google 主页配色研究（test.jnf-ai.com）