# Vector Relay — 风格参考
> 以橙色指令信号构建的结构化工业控制规划系统

**Theme:** light

Vector Relay 是面向企业团队的工业控制设计系统，用于在工程沟通前组织系统环境、接口需求与项目限制。温暖技术中性色、海军蓝结构与单一橙色指令信号，将能力定向与本地项目需求草稿连接为精准路径。

## Tokens — Colors

| 名称 | 值 | Token | 用途 |
|---|---|---|---|
| 制图画布 | `#f4f1eb` | `--canvas` | 页面背景 |
| 控制纸白 | `#ffffff` | `--paper` | 卡片与输入框 |
| 继电海军蓝 | `#172033` | `--ink` | 主文字与技术区块 |
| 板岩注释灰 | `#596273` | `--muted` | 次要文字 |
| 指令橙 | `#f05a28` | `--command` | 大字号展示强调与结构标记 |
| 指令深橙 | `#9f3a18` | `--command-ink` | 小字号文字、白底按钮与无障碍橙色操作 |
| 逻辑蓝 | `#2457d6` | `--logic` | 次要焦点与选中状态 |
| 钢制规则线 | `#ccd2dc` | `--line` | 结构边界 |
| 逻辑浅底 | `#e8edf7` | `--wash` | 交替表面 |

## Tokens — Typography

系统仅使用本地无衬线回退字体。紧凑标签使用宽字距，大标题使用紧密字距与坚定断行。

### Type Scale

| 角色 | 字体 | 字重 | 字号 | 行高 | Token |
|---|---|---:|---:|---:|---|
| 说明 | Arial | 800 | 12px | 1.4 | `--text-caption` |
| 标签 | Arial | 800 | 13px | 1.35 | `--text-label` |
| 正文 | Arial | 400 | 16px | 1.6 | `--text-body` |
| 导语 | Arial | 400 | 20px | 1.5 | `--text-lead` |
| 卡片 | Arial | 700 | 25px | 1.1 | `--text-card` |
| 首屏 | Arial | 800 | 72px | 0.98 | `--text-hero` |

## Tokens — Spacing & Shapes

方形卡片、可度量间距与机械式标记让界面保持明确用途。圆形几何仅用于 CSS 控制旋钮和焦点指示。

### Spacing Scale

| 名称 | 值 | Token |
|---|---:|---|
| 1 | 8px | `--space-1` |
| 2 | 12px | `--space-2` |
| 3 | 16px | `--space-3` |
| 4 | 24px | `--space-4` |
| 5 | 32px | `--space-5` |
| 6 | 48px | `--space-6` |
| 区块 | 100px | `--space-section` |

### Border Radius

| 元素 | 值 | Token |
|---|---:|---|
| 面板 | 3px | `--radius` |
| 控件 | 3px | `--radius` |

### Layout

- **内容宽度：** `--layout-max` / 1200px，`--gutter` / 28px。
- **首屏：** `--hero-min-height` / 660px，使用编辑区与控制板分屏布局。
- **窄屏：** 760px 以下导航变为展开控件，每个网格改为单列。

## Components

### 继电顶栏
粘性顶栏将紧凑字标与能力、环境和需求锚点结合。窄屏时，带标签的展开菜单可通过开关、菜单链接或 Escape 关闭。

### 控制板首屏
首屏将简洁工程标题与纯 CSS 控制板结合。坐标规则线、旋转拨盘与编号状态块在不使用外部图像的情况下建立视觉特征。

### 能力卡片
三个规则线面板组织发现、接口映射与项目界定。文案描述规划活动，不提出无支持的兼容性、性能或合规声明。

### 运行环境选择器
三个本地控件让买家识别宽泛运行环境。按下状态与文字摘要使已选环境在项目需求前始终可见。

### 本地项目需求
表单收集企业、工作邮箱与需求摘要，在本地校验，聚焦第一个错误，并在不发送、不保留信息的情况下确认。

## Do's and Don'ts

### Do
- 保持“能力定向 → 运行环境 → 需求简报 → 本地项目确认”的企业路径。
- 使用指令橙承载主操作，使用逻辑蓝强化选中状态。
- 保持标签、校验错误、焦点轮廓与减少动态效果行为可见。
- 仅使用经批准、可支持的工程事实替换通用规划用语。

### Don't
- 不要将本地需求表单连接到邮件、CRM、数据库或自动提交。
- 不要在未经批准时暗示协议兼容性、安全认证、正常运行时间、响应时间或调试范围。
- 不要添加购物车、结账、支付、订阅或消费者购买控件。
- 不要复用第三方照片、标识、证言、项目声明或界面截图。

## Surfaces

| 层级 | 名称 | 值 | 用途 |
|---:|---|---|---|
| 0 | 制图画布 | `#f4f1eb` | 整体页面场 |
| 1 | 控制纸白 | `#ffffff` | 卡片与字段 |
| 2 | 继电海军蓝 | `#172033` | 流程区与页脚 |
| 3 | 逻辑浅底 | `#e8edf7` | 已选环境与需求面板 |

## Elevation

卡片保持扁平，使用结构规则线。按钮悬停时位移两像素。键盘焦点使用三像素轮廓；组件层级不依赖阴影。

## Imagery

使用 CSS 控制几何、已批准的设备摄影或已授权的工程图像。起始实现仅使用类矢量 CSS 坐标轴、拨盘标记和状态块，不依赖第三方媒体。

## Layout

桌面顺序为顶栏 → 控制板首屏 → 能力卡片 → 工程流程 → 运行环境选择器 → 本地项目需求 → 页脚。窄屏以单列保留此顺序，并使已选环境与需求表单相邻。

## Agent Prompt Guide

**Quick Color Reference**

使用制图画布 `#f4f1eb`、继电海军蓝 `#172033`、指令橙 `#f05a28`、逻辑蓝 `#2457d6` 与钢制规则线 `#ccd2dc`。语言保持事实性、条件性并以需求为导向。

**Example Component Prompts**

1. **控制板首屏：** 创建 660px 分屏首屏，含 CSS 坐标规则线、旋转拨盘、编号状态面板与单一项目需求操作。
2. **环境选择器：** 创建三个带规则线的按钮，包含可见 `aria-pressed` 状态与本地需求摘要。
3. **本地需求：** 校验企业、工作邮箱与需求内容，聚焦第一个错误，并在不发送、不存储信息的情况下本地确认。

## Similar Brands

- **Siemens** — 技术层级可启发可扫读性，不借用其身份。
- **Rockwell Automation** — 严谨的系统分组可指导结构，不复制视觉素材。
- **Phoenix Contact** — 精确组件标签可指导企业导航与需求捕获。

## Quick Start

### CSS Custom Properties

将此完整本地样式表作为空白项目起点。它包含 token、响应式布局、命名组件、焦点状态、校验、重置与减少动态效果支持。

```css
:root {
  --canvas: #f4f1eb;
  --paper: #ffffff;
  --ink: #172033;
  --muted: #596273;
  --command: #f05a28;
  --command-ink: #9f3a18;
  --logic: #2457d6;
  --line: #ccd2dc;
  --wash: #e8edf7;
  --danger: #8b2500;
  --focus: #007a5e;
  --on-dark: #ffffff;
  --font-display: Arial, sans-serif;
  --font-body: Arial, sans-serif;
  --layout-max: 1200px;
  --gutter: 28px;
  --hero-min-height: 660px;
  --radius: 3px;
  --text-caption: 12px;
  --text-label: 13px;
  --text-body: 16px;
  --text-lead: 20px;
  --text-card: 25px;
  --text-section: 46px;
  --text-hero: 72px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-section: 100px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--canvas); color: var(--ink); font: 400 var(--text-body)/1.6 var(--font-body); }
a { color: inherit; }
button, input, textarea { font: inherit; }
.shell { width: min(calc(100% - 2 * var(--gutter)), var(--layout-max)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; background: var(--command-ink); color: var(--on-dark); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; z-index: 30; top: 0; border-bottom: 1px solid var(--line); background: rgba(244, 241, 235, .96); backdrop-filter: blur(10px); }
.nav { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 20px/1 var(--font-display); letter-spacing: -.045em; text-decoration: none; }
.brand-mark { position: relative; width: 25px; height: 25px; border: 5px solid var(--command); }
.brand-mark::after { content: ''; position: absolute; right: -7px; bottom: -7px; width: 8px; height: 8px; background: var(--logic); }
.nav-links { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.nav-links a { font-size: var(--text-label); font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.menu-toggle { display: none; min-height: 42px; border: 1px solid var(--ink); border-radius: var(--radius); padding: 8px 13px; background: var(--paper); color: var(--ink); font-weight: 800; }
.hero { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--paper); }
.hero-grid { min-height: var(--hero-min-height); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--space-6); }
.hero-copy { padding-block: 86px; }
.eyebrow { margin: 0 0 var(--space-4); color: var(--logic); font-size: var(--text-label); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: 'CTRL / '; color: var(--command-ink); }
h1, h2, h3 { margin: 0; font-family: var(--font-display); line-height: 1.04; }
h1 { max-width: 720px; font-size: var(--text-hero); letter-spacing: -.067em; text-transform: uppercase; }
h1 em { color: var(--command); font-style: normal; }
.lead { max-width: 620px; margin: var(--space-5) 0; color: var(--muted); font-size: var(--text-lead); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; border: 1px solid var(--command-ink); border-radius: var(--radius); padding: 11px 18px; background: var(--command-ink); color: var(--on-dark); font-size: var(--text-label); font-weight: 800; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; transition: transform .15s ease, background .15s ease; }
.button:hover { background: var(--ink); border-color: var(--ink); transform: translate(-2px, -2px); }
.button--quiet { border-color: var(--logic); background: transparent; color: var(--logic); }
.control-board { position: relative; min-height: 440px; overflow: hidden; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--wash); }
.control-board::before, .control-board::after { content: ''; position: absolute; background: var(--line); }
.control-board::before { top: 0; bottom: 0; left: 38%; width: 1px; }
.control-board::after { top: 62%; right: 0; left: 0; height: 1px; }
.dial { position: absolute; top: 47%; left: 38%; width: 250px; aspect-ratio: 1; border: 42px solid var(--ink); border-radius: 50%; transform: translate(-50%, -50%); }
.dial::before { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 104px; background: var(--command); transform: translate(-50%, -94%) rotate(38deg); transform-origin: 50% 94%; }
.dial::after { content: ''; position: absolute; top: 50%; left: 50%; width: 26px; aspect-ratio: 1; border-radius: 50%; background: var(--logic); transform: translate(-50%, -50%); }
.board-note { position: absolute; z-index: 2; right: var(--space-4); bottom: var(--space-4); width: min(270px, calc(100% - 48px)); padding: var(--space-4); border: 1px solid var(--ink); background: var(--paper); }
.board-note b { display: block; margin-bottom: var(--space-2); color: var(--command-ink); font-size: var(--text-label); letter-spacing: .12em; }
.board-note p { margin: 0; color: var(--muted); }
.section { padding-block: var(--space-section); }
.section-heading { max-width: 770px; margin-bottom: var(--space-6); }
.section-heading p:last-child { margin: var(--space-3) 0 0; color: var(--muted); }
h2 { font-size: var(--text-section); letter-spacing: -.055em; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.capability-card { min-height: 320px; padding: var(--space-5); border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper); }
.capability-card:nth-child(2) { background: var(--wash); }
.capability-card b { display: block; margin-bottom: 70px; color: var(--logic); font-size: var(--text-label); letter-spacing: .12em; }
.capability-card h3 { font-size: var(--text-card); letter-spacing: -.035em; }
.capability-card p { color: var(--muted); }
.sequence { border-block: 1px solid var(--ink); background: var(--ink); color: var(--on-dark); }
.sequence .eyebrow { color: #9eb5ff; }
.sequence .eyebrow::before { color: #ff8a5c; }
.sequence h2 { color: var(--on-dark); }
.sequence .section-heading p:last-child { color: #d4d9e3; }
.sequence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid #4c566b; background: #4c566b; }
.sequence-grid article { min-height: 220px; padding: var(--space-4); background: var(--ink); }
.sequence-grid b { display: block; margin-bottom: 58px; color: #ff8a5c; font-size: var(--text-label); letter-spacing: .1em; }
.sequence-grid h3 { font-size: var(--text-card); }
.sequence-grid p { color: #d4d9e3; }
.environment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.environment-option { min-height: 174px; border: 1px solid var(--ink); border-radius: var(--radius); padding: var(--space-4); background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; }
.environment-option span { display: block; margin-bottom: var(--space-5); color: var(--logic); font-size: var(--text-label); font-weight: 800; letter-spacing: .1em; }
.environment-option strong { display: block; font: 700 var(--text-card)/1.1 var(--font-display); }
.environment-option[aria-pressed='true'] { border-width: 3px; background: var(--wash); box-shadow: inset 8px 0 0 var(--logic); }
.brief-status { min-height: 1.6em; margin: var(--space-4) 0 0; font-weight: 700; }
.request { position: relative; padding-block: var(--space-section); background: var(--wash); }
.request::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 9px; background: var(--command); }
.request-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: var(--space-6); }
.request-copy p { max-width: 490px; }
.form { display: grid; gap: var(--space-3); }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--text-label); font-weight: 800; }
.field input, .field textarea { width: 100%; border: 1px solid var(--ink); border-radius: var(--radius); padding: 13px; background: var(--paper); color: var(--ink); }
.field textarea { min-height: 118px; resize: vertical; }
.field [aria-invalid='true'] { border: 3px solid var(--danger); }
.error { min-height: 1.35em; color: #6b1d00; font-size: var(--text-caption); font-weight: 800; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.request .button--reset { border-color: var(--ink); background: transparent; color: var(--ink); }
.status { min-height: 1.6em; margin: 0; font-weight: 800; }
.footer { padding-top: var(--space-6); background: var(--ink); color: #d4d9e3; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-5); padding-bottom: var(--space-5); }
.footer .brand, .footer h3 { color: var(--on-dark); }
.footer h3 { font-size: var(--text-label); letter-spacing: .08em; }
.footer p { margin: 8px 0; }
.footer-base { padding-block: var(--space-3); border-top: 1px solid #4c566b; font-size: var(--text-caption); }
:where(a, button, input, textarea):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sequence a:focus-visible, .footer a:focus-visible { outline-color: #ff8a5c; }

@media (max-width: 760px) {
  :root { --gutter: 16px; --space-section: 72px; --text-section: 36px; --text-hero: 49px; }
  .menu-toggle { display: inline-flex; }
  .nav-links { position: absolute; top: 74px; right: var(--gutter); left: var(--gutter); display: none; flex-direction: column; gap: 0; border: 1px solid var(--ink); padding: 14px; background: var(--paper); }
  .nav-links[data-open='true'] { display: flex; }
  .nav-links a { display: block; padding: 12px 0; }
  .hero-grid, .request-grid { grid-template-columns: 1fr; }
  .hero-copy { padding: 72px 0 24px; }
  .control-board { min-height: 370px; margin-bottom: 56px; }
  .dial { width: 218px; border-width: 36px; }
  .capability-grid, .sequence-grid, .environment-grid, .footer-grid { grid-template-columns: 1fr; }
  .capability-card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

```

### Tailwind v4

```css
@import "tailwindcss";
@theme {
  --color-vector-canvas: #f4f1eb;
  --color-vector-ink: #172033;
  --color-vector-command: #f05a28;
  --color-vector-command-ink: #9f3a18;
  --color-vector-logic: #2457d6;
  --radius-vector-panel: 3px;
}
```