# Devin — B2B 连接器系统风格参考
> 面向工业连接器与端子团队的冷静编辑式软件方向。

**Theme:** light

Devin 使用暖白画布、厚重海军蓝标题、钴蓝行动色与珊瑚强调色，让技术型 B2B 服务呈现直接且有序的体验。路径支持评估、项目沟通与本地校验询盘；不包含零售购买控件。

## Tokens — Colors

| 名称 | 值 | 令牌 | 用途 |
|---|---|---|---|
| 暖白纸面 | `#f8f6f1` | `--canvas` | 主画布 |
| 海军蓝 | `#10233f` | `--ink` | 标题与深色区块 |
| 钴蓝 | `#315ecf` | `--action` | 主要行动与激活状态 |
| 珊瑚色 | `#f07f68` | `--coral` | 眉题与询盘区域 |
| 雾蓝 | `#e8eefb` | `--mist` | 流程背景 |
| 石板灰 | `#5d6880` | `--muted` | 辅助文字 |
| 分隔线灰 | `#cfd5df` | `--rule` | 边框与分隔线 |

## Tokens — Typography

使用 `Inter, ui-sans-serif, system-ui, sans-serif`；本地系统回退保证构建自包含。标题紧凑、厚重且字距收紧；正文开放易读。

### Type Scale

| 角色 | 字体 | 字重 | 字号 | 行高 | 变量 |
|---|---|---:|---:|---:|---|
| 眉题 | Inter | 800 | 11px | 1.2 | `--type-eyebrow` |
| 正文 | Inter | 400 | 16px | 1.55 | `--type-body` |
| 引导文字 | Inter | 400 | 18px | 1.55 | `--type-lead` |
| 卡片标题 | Inter | 700 | 27px | 1.03 | `--type-card` |
| 展示标题 | Inter | 800 | 72px | 1.03 | `--type-display` |

## Tokens — Spacing & Shapes

舒适间距、方正面板、细分隔线与两道圆形首屏轨道共同形成克制的系统美学。

### Spacing Scale

| 名称 | 值 | 变量 |
|---|---:|---|
| 紧凑 | 12px | `--space-compact` |
| 控件 | 16px | `--space-control` |
| 卡片 | 24px | `--space-card` |
| 章节 | 112px | `--space-section` |

### Border Radius

| 元素 | 值 | 变量 |
|---|---:|---|
| 卡片 | 0px | `--radius` |
| 控件 | 0px | `--radius` |

### Layout

- **页面容器：** `--layout-max` / 1180px，搭配 `--gutter` / 32px。
- **首屏：** 桌面端使用 `--hero-height` / 640px。
- **手机端：** 低于 760px 时，所有多列网格改为单列。

## Components

### Header and Mobile Navigation
固定页头将品牌与服务、案例、合作方式和联系入口组合。760px 以下，带标签的菜单按钮展开导航；Escape 关闭菜单并将焦点交还给触发按钮。

### Evaluation Hero
首屏把清晰的运营系统主张置于本地 WebP 工作流插图和圆形 CSS 轨道旁。主行动进入项目询盘。

### Service Cards
三张带编号与细分隔线的卡片分别说明需求梳理、产品设计和协同运营。卡片只表达能力方向，不写未经核验的规格或业绩主张。

### Case Panels
两个扁平面板分别使用钴蓝与珊瑚色，介绍连接器平台和端子体验场景，并以项目讨论入口收尾。

### Local Inquiry Form
表单具有可见标签、行内必填提示、禁用的发送状态与本地完成信息；不会存储或传输任何数据。

## Do's and Don'ts

### Do

- 每个视图只用钴蓝突出一个主要行动。
- 保留清晰可见的键盘焦点和描述性标签。
- 用海军蓝、暖白、珊瑚色与雾蓝组织大面积扁平编辑式区块。
- 让访问路径始终围绕服务评估与询价沟通展开。

### Don't

- 不要添加购物车、结账、支付界面、价格促销或零售商品网格。
- 不要使用渐变、投影或圆角卡片装饰。
- 不要加载远程字体、分析脚本、嵌入内容或表单接口。
- 不要把虚构指标或案例结果当作企业证明。

## Surfaces

| 层级 | 名称 | 值 | 用途 |
|---|---|---|---|
| 0 | 暖白画布 | `#f8f6f1` | 默认页面底色 |
| 1 | 雾蓝流程区 | `#e8eefb` | 结构化流程章节 |
| 2 | 海军蓝案例区 | `#10233f` | 案例与页脚区块 |
| 3 | 珊瑚色询盘区 | `#f07f68` | 联系转化区域 |

## Elevation

- **服务卡片：** 使用 1px `--rule` 边框，不加阴影。
- **按钮：** 使用扁平钴蓝填充，不做悬浮层级。
- **页头：** 只采用粘性定位，不加装饰性阴影。

## Imagery

使用本地 `assets/devin-hero.webp` 工作流插图作为首屏主体，并叠加 CSS 圆形轨道。位图统一为 WebP，装饰标记使用 SVG 或 CSS。替代文本描述插图内容，不重复相邻文案。

## Layout

页面依次排列粘性页头、分栏首屏、能力条、服务卡片、深色案例面板、四步流程、合作方式卡片、珊瑚色询盘表单与页脚。桌面首屏比例为 1fr/.88fr；服务与合作方式使用三列；流程使用四列；手机端按单列顺序阅读。

## Agent Prompt Guide

**Quick Color Reference**

- 背景：`#f8f6f1` 暖白纸面与 `#10233f` 海军蓝区块。
- 文字：浅色表面使用 `#10233f`，海军蓝表面使用白色。
- 边框：使用 `#cfd5df` 细分隔线。
- 强调：`#315ecf` 用于钴蓝行动，`#f07f68` 用于珊瑚色询盘区。

**Example Component Prompts**

1. **B2B 服务卡片：** 白色或暖白表面、1px 分隔线、24px 内边距、27px 海军蓝标题、简短说明与询盘链接。
2. **主要询盘按钮：** 钴蓝 `#315ecf`、白色 700/14px 标签、直角、13px × 20px 内边距并带箭头后缀。
3. **流程步骤行：** 雾蓝背景、四列细分隔线、11px 钴蓝编号、25px 海军蓝标题和精炼说明；760px 以下堆叠。

## Similar Brands

- **IDEO** — 可借鉴以结果为导向的咨询叙事与编辑式层级，但不得复制其品牌表达。
- **Work & Co** — 可借鉴克制的数字服务展示与案例节奏，但不得复制其版式。
- **Instrument** — 可借鉴系统化产品方向与强文字层级，但不得复用其视觉资产。
- **Base Design** — 可借鉴版式优先的构图与色块组织，但必须保持原创。

## Quick Start

本地构建使用独立实现代码块，Tailwind 使用令牌注册代码块。

### CSS Custom Properties

```css
:root {
  --canvas: #f8f6f1;
  --surface: #ffffff;
  --ink: #10233f;
  --action: #315ecf;
  --coral: #f07f68;
  --mist: #e8eefb;
  --muted: #5d6880;
  --rule: #cfd5df;
  --font-heading: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --type-eyebrow: 11px;
  --type-body: 16px;
  --type-lead: 18px;
  --type-card: 27px;
  --type-display: 72px;
  --space-compact: 12px;
  --space-control: 16px;
  --space-card: 24px;
  --space-section: 112px;
  --layout-max: 1180px;
  --gutter: 32px;
  --radius: 0px;
  --hero-height: 640px;
}
.shell { width: min(var(--layout-max), calc(100% - (var(--gutter) * 2))); margin-inline: auto; }
.button { display: inline-flex; gap: 13px; padding: 13px 20px; background: var(--action); color: var(--surface); font: 700 14px/1 var(--font-body); text-decoration: none; }
.service-card { border: 1px solid var(--rule); padding: 24px; background: var(--surface); }
@media (max-width: 760px) { :root { --gutter: 16px; --hero-height: 480px; } .split-grid, .service-grid, .process-grid { grid-template-columns: 1fr; } }
```

### Tailwind v4

```css
@theme {
  --color-canvas: #f8f6f1;
  --color-surface: #ffffff;
  --color-ink: #10233f;
  --color-action: #315ecf;
  --color-coral: #f07f68;
  --color-mist: #e8eefb;
  --color-muted: #5d6880;
  --color-rule: #cfd5df;
  --font-heading: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --spacing-layout-max: 1180px;
  --spacing-gutter: 32px;
  --radius-system: 0px;
  --spacing-hero-height: 640px;
}
```