# 易通·贷前智勘（Yitong DD）视觉识别系统（VI）与 UI 视觉规范

> 本规范面向「易通·贷前智勘」对公贷款贷前尽职调查平台的品牌与官网建设，统一视觉语言，确保跨页面、跨终端的一致性与专业质感。

---

## 1. 品牌基础

| 项目 | 内容 |
| --- | --- |
| 母公司 / 品牌 | 易通学（Yitongxue） |
| 产品名称 | 易通·贷前智勘 |
| 英文名称 | Yitong DD |
| 产品定位 | 面向商业银行对公信贷的**贷前尽职调查智能平台** |
| 目标客群 | 商业银行公司金融部、授信审批部、风险管理部门；中小银行 / 农商行 |
| 核心 Slogan | 让每一笔对公贷款，尽调更准、更快、更稳 |
| 价值主张 | 标准化、智能化、可协同、可追溯 |

**品牌调性**：专业、稳健、克制、可信。以「风控」为核心语义，不追求花哨视觉，强调金融机构应有的严谨与安全感。

---

## 2. Logo 设计说明

页面内以**内联 SVG**实现图形标识，不依赖外部图片或图标字体，避免加载失败。

### 图形语义
Logo 融合三重意象，直接呼应产品定位：

- **盾牌（风控）**：外轮廓为圆角盾形，象征风险防护与信贷安全底线。
- **放大镜（尽调）**：盾内嵌一枚放大镜（镜片 + 手柄），象征资料核验、信息穿透与尽职调查。
- **对勾（合规）**：镜片中央的勾形，象征尽调要点齐备、流程合规可追溯。

### 配色与形态
- 盾面填充品牌柔色 `--color-brand-soft`（`#e8f5e9`），描边与图形线条使用主色 `--color-brand`（`#16754e`），镜片内填充纯白以突出对勾。
- 线条统一 `2.5` 描边宽度、`stroke-linejoin / stroke-linecap = round`，圆润而稳重。
- 标准尺寸：导航栏 32×32，页脚 36×36；等比缩放，最小可识别宽度不低于 24px。
- 组合方式：图形居左，右侧竖排「易通·贷前智勘」中文字标（如需英文副标，置于中文下方，字级更小、墨色弱化）。

> 注：本规范下的 Logo 为矢量图形标识，可无损缩放；如需印刷物料，建议导出 SVG / 矢量源。

---

## 3. 色彩系统

### 3.1 品牌主色
| 令牌 | Hex | 用途 |
| --- | --- | --- |
| `--color-brand` 主色 | `#16754e` | 主按钮、链接强调、Logo、关键数据、主标题点缀 |
| `--color-brand-hover` 主色悬停 | `#125f3f` | 主按钮 hover / active 态 |
| `--color-brand-soft` 主色柔色 | `#e8f5e9` | 浅色背景块、图标底衬、Logo 盾面、标签底色 |

### 3.2 背景与文字
| 令牌 | Hex | 用途 |
| --- | --- | --- |
| `--color-cream` 米白背景 | `#f4f0ea` | 全站页面底色、分区交替背景 |
| `--color-surface` 卡片白 | `#ffffff` | 卡片、导航栏、弹层背景 |
| `--color-ink` 墨色（主文字） | `#1a1a2e` | 标题、正文主色 |
| `--color-ink-soft` 次级墨色 | `#334155` | 副标题、次要正文 |
| `--color-ink-muted` 弱化墨色 | `#64748b` | 说明文字、脚注、占位信息 |
| `--color-line` 边框 | `#e8e8e8` | 卡片描边、分隔线、输入框边框 |

### 3.3 辅助色（语义化）
| 令牌 | Hex | 用途 |
| --- | --- | --- |
| `--color-link` 链接蓝 | `#2563eb` | 普通可点击链接、外链 |
| `--color-amber` 预警 amber | `#f59e0b` | 风险预警、待处理、缺失项提示 |
| `--color-risk` 风险红 | `#dc2626` | 高危风险、严重缺失、错误态 |
| `--color-violet` 紫 | `#7c3aed` | AI 能力标识、智能体相关点缀 |

> 使用原则：主色（深绿）承担 70% 以上视觉权重；辅助色仅用于**语义指示**（风险等级、状态），不用于大面积铺色，避免破坏稳健调性。

### 3.4 色板速查
```
深绿主色   #16754e   悬停 #125f3f   柔色 #e8f5e9
米白背景   #f4f0ea   卡片白 #ffffff
墨色文字   #1a1a2e   次级 #334155   弱化 #64748b
边框       #e8e8e8
链接蓝     #2563eb   预警 #f59e0b   风险红 #dc2626   紫 #7c3aed
```

---

## 4. 字体规范

### 4.1 字体栈（不引入网络字体，避免加载失败）
```
--font-sans: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system,
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
```
- 中文优先：PingFang SC（macOS / iOS）→ Microsoft YaHei（Windows）→ 系统默认。
- 英文与数字回退到 system-ui / Segoe UI / Roboto。

### 4.2 字号层级
| 层级 | 字号 | 字重 | 行高 | 用途 |
| --- | --- | --- | --- | --- |
| Display（主标题） | 40–56px | 700 | 1.15 | Hero 主标题 |
| H2（板块标题） | 28–32px | 700 | 1.25 | 各板块大标题 |
| H3（卡片标题） | 20–22px | 600 | 1.3 | 卡片 / 子模块标题 |
| Body（正文） | 16px | 400 | 1.7 | 段落正文 |
| Small（说明） | 13–14px | 400 | 1.6 | 脚注、标签、辅助说明 |

> 数字与英文在 Display 层级可适度收紧字距（letter-spacing: -0.01em）以提升大字号观感。

---

## 5. 间距与栅格

### 5.1 8px 栅格系统
所有间距取自 8 的倍数，保证节奏统一：

| 令牌 | 值 | 典型场景 |
| --- | --- | --- |
| 8 | 8px | 图标与文字间距、紧凑内边距 |
| 16 | 16px | 卡片内边距、列表项间距 |
| 24 | 24px | 区块内元素间隔 |
| 32 | 32px | 卡片外边距、栅格列间距 |
| 48 | 48px | 板块内上下留白 |
| 64 | 64px | 板块之间大留白（桌面） |

### 5.2 栅格与容器
- 内容容器最大宽度 `--container-content` = **1200px**，水平居中，左右内边距 24px（移动端 20px）。
- 桌面多列网格用 `grid`，常见列数：2 / 3 / 4 列；移动端单列堆叠。
- 板块垂直节奏：桌面 `py-16`（64px），移动 `py-12`（48px）。

---

## 6. 圆角与阴影

| 令牌 / 类 | 值 | 用途 |
| --- | --- | --- |
| `rounded-xl` 卡片圆角 | 12px | 卡片、分区容器、可视化块 |
| `rounded-lg` 按钮圆角 | 8px | 按钮、输入框、标签 |
| `rounded-full` | 9999px | 徽章、头像、步骤编号圆点 |
| `shadow-sm` | 轻投影 | 卡片默认投影（`0 1px 2px rgba(16,24,40,.06)` 级别） |
| `shadow-md` | 中投影 | 悬浮态卡片、导航栏吸顶 |

> 阴影仅用于建立层级与悬浮反馈，强度克制，避免重投影破坏「稳健」调性。

---

## 7. 组件规范

### 7.1 按钮
| 类型 | 样式 | 场景 |
| --- | --- | --- |
| 主按钮（Primary） | 底色 `--color-brand`、白字、`rounded-lg`、hover → `--color-brand-hover` | 预约演示、关键转化 |
| 次按钮（Secondary） | 白底、`--color-brand` 文字、1px `--color-brand` 描边 | 查看功能、次级操作 |
| 幽灵按钮（Ghost） | 透明底、墨色文字、无边框 | 导航内链、轻量操作 |

- 按钮高度：桌面 48px，移动 44px；内边距 `px-6`；字重 600。
- 提供 `hover` / `active` / `focus-visible` 三态，`focus-visible` 显示主色外环（outline）。

### 7.2 卡片（Card）
- 背景 `--color-surface`，`rounded-xl`，`border` 1px `--color-line`，`shadow-sm`。
- 内边距 `p-6`（桌面）/ `p-5`（移动）。
- 悬浮：`shadow-md` + 轻微上移（`translate-y` 2px），过渡 150ms。

### 7.3 徽章（Badge）
- 小标签：`rounded-full`、内边距 `px-3 py-1`、字号 Small（13px）、字重 600。
- 语义色：主色柔底主色字（默认）、预警柔底预警字、风险柔底风险字、紫柔底紫字（AI）。

### 7.4 分区容器（Section）
- 统一套用 `container-page` 容器（max-width 1200px，居中，左右内边距）。
- 板块标题区：上方小徽章 /  eyebrow 文字（如「核心功能」）+ H2 标题 + 一句副说明。

---

## 8. 图标风格

- **线性图标（Line Icon）**：统一 `stroke-width: 1.5px`，`fill: none`，`stroke-linecap / linejoin: round`。
- 默认尺寸 24×24（功能卡片图标可放大至 28–32px）。
- 图标颜色继承当前文字色（默认墨色），关键能力图标可置于主色柔色圆底（`rounded-xl` 的 `--color-brand-soft` 衬底）以强化识别。
- 全部图标**内联 SVG** 实现，不依赖外部图标 CDN，确保离线 / 弱网下稳定呈现。

---

## 9. 响应式与可访问性

- 断点：移动 `<640px` 单列；平板 `≥640px` 两列；桌面 `≥1024px` 三 / 四列。
- 导航栏在移动端折叠为汉堡菜单（点击展开），桌面端展示完整锚点。
- 文本对比度：正文墨色 `#1a1a2e` 于米白 `#f4f0ea` 背景对比度充足；主色按钮白字对比达标。
- 交互元素具备 `focus-visible` 可见焦点环，保障键盘可达。

---

## 10. 设计原则小结

1. **克制留白**：以 8px 栅格建立节奏，板块之间用大留白拉开层级，不堆砌装饰。
2. **深绿锚定**：主色承担视觉重心，辅助色仅作语义指示。
3. **层级清晰**：Display → H2 → H3 → Body → Small 五级字号形成明确阅读顺序。
4. **稳健可信**：圆角、轻投影、线性图标共同传递金融机构应有的专业与安全感。
5. **零外部依赖**：系统字体栈 + 内联 SVG，规避网络字体 / 图标 CDN 加载失败风险。