# 视觉设计规范（中国市场·现代简约高端风格）

## 配色方案
- 主色 `#0B5FFF`（深蓝，稳重可信）
- 辅色 `#13C2C2`（青绿，清爽科技）
- 强调色按需使用 `#F04438`（错误/危险状态）
- 中性色阶采用系统默认灰与 `dark` `#0F172A`

使用原则：主色与辅色不超过 2–3 种；大面积留白搭配中性色，强调交互使用主色浅变体（如 `primary/10`）。

## 字体与层级
- 中文字体栈：`Alibaba PuHuiTi`, `Source Han Sans SC`, `Noto Sans SC`, `Microsoft YaHei`, `PingFang SC`, `system-ui`, `sans-serif`
- 英文字体：与无衬线统一；正文与导航使用同一栈，避免混搭
- 层级建议：
  - 标题：`font-bold`，行高紧凑；大屏 `3xl–4xl`
  - 正文：`text-gray-600`，良好可读性
  - 说明/标签：`text-sm`，对比度充分

## 布局与留白
- 统一容器宽度：页面内容最大宽度建议 `max-w-screen-2xl`；辅助 `.hd-container` 控制 1440px 上限
- 网格：`grid` 与 `flex` 搭配，手机单列，`md` 双列，`lg` 三列
- 留白：模块上下 `py-16–20`；卡片内边距 `p-6–8`

## 组件与微交互
- 按钮：圆角 `rounded-lg`，投影 `shadow-lg`，悬浮轻微上移（`.hover-raise`）
- 卡片：统一 `rounded-xl` `shadow-md`，悬浮 `card-hover`
- 导航：滚动添加透明与模糊（`navbar-elevated`），突出层级
- 动画：过渡 `duration-300/700`，缓动 `ease-out`；进入动画统一淡入上移

## 图片与图标
- 所有图片 `loading="lazy"`，保持高清；图标使用 FontAwesome，颜色与主色保持一致

## 无障碍与对比
- 深浅文本对比度 ≥ 4.5:1；链接与按钮拥有悬浮与焦点态

## 响应式
- 适配手机到 4K：内容限制在 1440–1536px 宽度；超宽屏居中呈现，避免全屏拉伸