# Northline Interconnect — 风格参考
> 黑、白、橙三色的 B2B 连接器采购门户：硬边网格与充足留白。

**Theme:** light

该方向把黑、白、橙的编辑式界面转化为原创的 B2B 连接器、端子及配件采购路径：按互连系列定位 → 说明应用与供货需求 → 准备询盘。此处属于高改造行业适配。Northline Interconnect 为虚构名称；文案、CSS 几何图形和交互模式均为原创，不复用任何来源的标识、代码、图片、人物、指标、案例、商业条件或主张。

## Tokens — Colors

| 名称 | 值 | Token | 用途 |
|---|---|---|---|
| 车间画布 | `#f7f5f0` | `--canvas` | 页面底色 |
| 纸面 | `#fffefa` | `--paper` | 卡片与表单字段 |
| 碳黑 | `#171717` | `--ink` | 字体与结构性表面 |
| 信号橙 | `#e85d24` | `--orange` | 主操作与分区标记 |
| 深橙 | `#ef713d` | `--orange-deep` | 悬停状态 |
| 浅底文字橙 | `#8d2808` | `--orange-text` | 浅色或浅橙表面上的小字号文字、生成标签和悬停文字 |
| 浅橙面 | `#fde3d5` | `--orange-pale` | 次级卡片表面 |
| 网格线 | `#e9e4dc` | `--grid` | 编辑式网格标记 |
| 次要正文 | `#625f58` | `--muted` | 辅助文案 |

## Tokens — Typography

Space Grotesk 用于展示层级；Inter 让操作性文字保持紧凑。本参考仅使用本地回退字体，不加载远程字体文件。

### Type Scale

| 角色 | 字体 | 字重 | 字号 | 行高 | 字距 | Token |
|---|---|---:|---:|---:|---:|---|
| 说明文字 | Inter | 700 | 12px | 1.4 | .08em | `--text-caption` |
| 标签 | Inter | 800 | 13px | 1.35 | .08em | `--text-label` |
| 正文 | Inter | 400 | 16px | 1.6 | normal | `--text-body` |
| 导语 | Inter | 400 | 20px | 1.5 | normal | `--text-lead` |
| 卡片标题 | Space Grotesk | 700 | 22px | 1.05 | -.05em | `--text-card` |
| 分区标题 | Space Grotesk | 700 | 42px | 1 | -.06em | `--text-section` |
| 首屏标题 | Space Grotesk | 700 | 92px | .92 | -.085em | `--text-hero` |

## Tokens — Spacing & Shapes

系统有意保留宽松节奏。直角、1px 分割线、网格线、偏移圆形和裁切几何体取代插画与摄影。

### 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` |
| 分区 | 112px | `--space-section` |

### Border Radius

| 元素 | 值 | Token |
|---|---:|---|
| 卡片 | 0px | `--radius` |
| 控件 | 0px | `--radius` |
| 面板 | 0px | `--radius` |

### Layout

- **页面容器：** `--layout-max` / 1200px，`--gutter` / 28px。
- **首屏：** 桌面端最小高度 640px，仅使用原创 CSS 几何图形。
- **手机端：** 760px 以下所有网格变为单列，边距变为 16px，`--text-hero` 变为 48px。

## Components

### 页头与移动端导航
`.site-header` 在画布上承载紧凑的粘性导航。手机端 `.nav-toggle` 展开 `.nav-list`；按 Escape、再次点击按钮或选择链接均会关闭菜单。

### 编辑式首屏
`.hero` 使用硬边网格背景、一个超大橙色 CSS 圆形和编号几何面板。它用于建立技术采购方向，不展示未核实的产品、库存或商业事实。

### 互连系列卡片
`.series-grid` 是三列带分割线的网格。每张 `.series-card` 包含系列标签、简短应用定位说明和面向询盘的下一步；在没有经批准事实前，不得描述规格、库存、认证或性能。

### 应用与供货网格
`.application-grid` 在深色表面呈现使用语境与供货规划议题。它是沟通整理工具，而非应用兼容性或交付能力证明。

### 询盘准备表单
`.form` 要求联系人或组织、工作邮箱和采购说明。无效字段显示关联错误并聚焦首个错误；有效操作忙碌 500ms 后明确说明询盘仅在本地准备、未发送。它不创建网络请求、存储、订单、报价或线索。

### 页脚
仅使用通用导航与占位信息。不要加入供应商标识、客户 Logo、来源品牌、评价、成果或联系方式主张。

## Do's and Don'ts

### Do

- 将橙色用于操作、分割线、序号提示和视觉焦点几何体。
- 保持 B2B 路径：互连系列定位、应用语境、供货问题、询盘准备。
- 仅使用原创 CSS 图形与已获批准的项目素材。
- 保留清晰键盘焦点、标签、错误信息与减少动态效果的处理。

### Don't

- 不把技术采购旅程改成即时自助交易。
- 不复用来源 Logo、HTML、CSS、摄影、人物、指标、商业条件或案例。
- 不把通用系列标签表述为 SKU、库存、认证、测试、兼容性、交付或性能事实。
- 不让本地表单暗示信息已发送、保存或提交。

## Surfaces

| 层级 | 名称 | 值 | 用途 |
|---:|---|---|---|
| 0 | 车间画布 | `#f7f5f0` | 全页底色 |
| 1 | 纸面 | `#fffefa` | 首屏、卡片与输入框 |
| 2 | 碳黑 | `#171717` | 应用区与页脚 |
| 3 | 信号橙 | `#e85d24` | 询盘区与操作 |

## Elevation

- 卡片保持扁平，仅以 1px 分割线区隔。
- 按钮悬停时平移 2px，不使用阴影。
- 首屏圆形与几何对象均为平面 CSS 图形，不是悬浮素材。

## Imagery

本参考不使用摄影、图标、截图或外部文件；网格、圆形、裁切面板和文字编号均是原创 CSS 几何图形。后续产品图片须为授权且经项目批准的素材，并使用基于事实的替代文本。

## Layout

桌面顺序为：页头 → 编辑式首屏 → 互连系列网格 → 应用/供货网格 → 询盘准备 → 页脚。窄屏时菜单改为展开式，所有内容网格堆叠，但不隐藏主要内容。

## Agent Prompt Guide

**Quick Color Reference**

- 画布 `#f7f5f0`，纸面 `#fffefa`，碳黑 `#171717`，次要正文 `#625f58`。
- 信号橙 `#e85d24`，悬停橙 `#ef713d`，浅底文字橙 `#8d2808`，浅橙 `#fde3d5`。
- 浅色表面使用 `#8d2808` 焦点色；深色或橙色表面使用 `#fffaf2` 焦点色。

**Example Component Prompts**

1. **互连采购首屏：** 创建一个桌面最小高度 640px 的直角首屏，使用 CSS 网格线、橙色描边圆、编号几何面板和一个询盘准备操作。
2. **系列导览网格：** 创建三张带分割线的扁平卡片，使用通用连接器系列名称和询盘链接；不包含库存、SKU、商业条件、认证、兼容性或性能主张。
3. **本地询盘表单：** 校验联系人或组织、邮箱和采购说明；聚焦首个错误；展示 500ms 本地忙碌状态与未发送的明确提示。

## Similar Brands

- **TE Connectivity** — 广泛的互连分类说明了系列导航与应用导航需要分开；不借用其品牌识别。
- **Molex** — 深度产品架构体现了以已批准事实支撑严谨术语的价值。
- **Amphenol** — 多市场互连组织可启发信息层级，但不复制名称、素材或主张。
- **Phoenix Contact** — 技术选型路径说明了自有识别与已核实兼容数据的重要性。

## Quick Start

### CSS Custom Properties

将此完整样式表作为空白项目起点。它包含 token、响应式布局、命名组件、焦点状态、校验状态、仅本地的忙碌反馈和减少动态效果处理；不使用第三方来源代码或素材。

```css
:root {
  --canvas:#f7f5f0; --paper:#fffefa; --ink:#171717; --muted:#625f58; --line:#d5d0c6; --orange:#e85d24; --orange-deep:#ef713d; --orange-text:#8d2808; --orange-pale:#fde3d5; --grid:#e9e4dc; --focus:#8d2808; --on-dark:#fffaf2;
  --font-display:'Space Grotesk',Arial,sans-serif; --font-body:Inter,Arial,sans-serif;
  --text-caption:12px; --text-label:13px; --text-body:16px; --text-lead:20px; --text-card:22px; --text-section:42px; --text-hero:92px;
  --space-1:8px; --space-2:12px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px; --space-section:112px; --layout-max:1200px; --gutter:28px; --radius:0px; --hero-min-height:640px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--canvas);color:var(--ink);font:400 var(--text-body)/1.6 var(--font-body);overflow-x:hidden} a{color:inherit} button,input,textarea{font:inherit}.shell{width:min(calc(100% - 2 * var(--gutter)),var(--layout-max));margin:auto}.skip-link{position:fixed;z-index:30;top:8px;left:8px;padding:10px 14px;background:var(--orange);color:var(--ink);transform:translateY(-170%)}.skip-link:focus{transform:translateY(0)}
.site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--canvas) 94%,transparent);backdrop-filter:blur(12px)}.nav-row{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.brand{font:700 22px/1 var(--font-display);letter-spacing:-.07em;text-decoration:none}.brand-mark{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:8px;background:var(--orange);color:var(--ink);font-size:16px;transform:rotate(45deg)}.brand-mark b{transform:rotate(-45deg)}.nav-list{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}.nav-list a{font-size:var(--text-label);font-weight:700;text-decoration:none;text-transform:uppercase;letter-spacing:.08em}.nav-list a:hover{color:var(--orange-text)}.nav-toggle{display:none;border:1px solid var(--ink);padding:10px 12px;background:var(--paper);font-weight:700}
.hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--ink);background:var(--paper)}.hero:before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,transparent 0 49.9%,var(--grid) 50% 50.1%,transparent 50.2%),linear-gradient(var(--grid) 1px,transparent 1px);background-size:100% 100%,100% 40px}.hero:after{content:'';position:absolute;right:-10vw;top:12%;z-index:-1;width:min(47vw,620px);aspect-ratio:1;border:clamp(45px,6vw,90px) solid var(--orange);border-radius:50%;box-shadow:inset 0 0 0 1px var(--ink);transform:rotate(-16deg)}.hero-grid{min-height:var(--hero-min-height);display:grid;grid-template-columns:1.1fr .9fr;align-items:end}.hero-copy{padding:116px 0 104px;max-width:760px}.eyebrow{margin:0 0 var(--space-4);font-size:var(--text-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase}.eyebrow:before{content:'// ';color:var(--orange-text)}h1,h2,h3{margin:0;font-family:var(--font-display);line-height:1;color:var(--ink)}h1{font-size:var(--text-hero);letter-spacing:-.085em;text-transform:uppercase}h1 em{font-style:normal;color:var(--orange-text)}h2{font-size:var(--text-section);letter-spacing:-.06em}.hero-copy>p:last-of-type{max-width:580px;margin:var(--space-5) 0;color:var(--muted);font-size:var(--text-lead)}.hero-object{align-self:center;justify-self:end;width:min(100%,440px);aspect-ratio:1;position:relative;border:1px solid var(--ink);background:repeating-linear-gradient(0deg,transparent 0 30px,var(--grid) 31px 32px),repeating-linear-gradient(90deg,transparent 0 30px,var(--grid) 31px 32px)}.hero-object:before{content:'01';position:absolute;top:16px;left:18px;font:700 clamp(72px,12vw,150px)/.8 var(--font-display);letter-spacing:-.12em;color:var(--orange-text)}.hero-object:after{content:'';position:absolute;right:13%;bottom:15%;width:46%;aspect-ratio:1;border:2px solid var(--ink);background:var(--paper);clip-path:polygon(0 0,100% 0,100% 25%,74% 25%,74% 100%,0 100%)}.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;border:1px solid var(--orange);padding:12px 20px;background:var(--orange);color:var(--ink);font-size:var(--text-label);font-weight:800;letter-spacing:.08em;text-decoration:none;text-transform:uppercase;transition:background .18s,transform .18s}.button:hover{background:var(--orange-deep);transform:translate(-2px,-2px)}.button--quiet{background:transparent;color:var(--ink);border-color:var(--ink)}
.section{padding-block:var(--space-section)}.section-heading{max-width:700px;margin-bottom:var(--space-6)}.section-heading p{margin:var(--space-3) 0 0;color:var(--muted)}.series-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}.series-card{min-height:305px;padding:var(--space-5);border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--paper)}.series-card:nth-child(2){background:var(--orange-pale)}.series-card:before{content:attr(data-index);display:block;margin-bottom:60px;color:var(--orange-text);font:800 15px/1 var(--font-display);letter-spacing:.1em}.series-card h3{font-size:var(--text-card);letter-spacing:-.05em}.series-card p{color:var(--muted)}.series-card a{font-size:var(--text-label);font-weight:800;text-decoration:none;text-transform:uppercase}.series-card a:after{content:' →';color:var(--orange-text)}
.applications{border-block:1px solid var(--ink);background:var(--ink);color:var(--on-dark)}.applications h2{color:var(--on-dark)}.applications .section-heading p{color:#d8d3ca}.application-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#65615a;border:1px solid #65615a}.application{min-height:210px;padding:var(--space-4);background:var(--ink)}.application b{display:block;margin-bottom:58px;color:#ff9b70;font:700 var(--text-label)/1 var(--font-display);letter-spacing:.12em}.application h3{color:var(--on-dark);font-size:var(--text-card);letter-spacing:-.045em}.application p{color:#d8d3ca}.process{background:var(--paper)}.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}.process-item{padding-top:18px;border-top:5px solid var(--orange)}.process-number{display:block;margin-bottom:var(--space-4);font:700 68px/.8 var(--font-display);letter-spacing:-.09em;color:var(--orange-text)}.process-item h3{font-size:var(--text-card)}
.inquiry{background:var(--orange);color:var(--ink)}.inquiry-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--space-6)}.inquiry h2{max-width:480px}.inquiry .eyebrow:before{color:var(--ink)}.form{display:grid;gap:var(--space-3)}.field{display:grid;gap:6px}.field label{font-size:var(--text-label);font-weight:800;letter-spacing:.03em}.field input,.field textarea{width:100%;border:1px solid var(--ink);border-radius:0;padding:13px;background:var(--paper);color:var(--ink)}.field textarea{min-height:112px;resize:vertical}.field [aria-invalid='true']{border:3px solid #791b00}.field-error{min-height:1.4em;color:#401000;font-size:var(--text-caption);font-weight:700}.form-status{min-height:1.6em;margin:0;font-weight:700}.inquiry .button{border-color:var(--ink);background:var(--ink);color:var(--on-dark)}.button[disabled]{cursor:wait}.site-footer{padding-top:var(--space-6);background:var(--ink);color:#d8d3ca}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--space-5);padding-bottom:var(--space-5)}.site-footer .brand{color:var(--on-dark)}.site-footer h3{color:var(--on-dark);font-size:var(--text-label);letter-spacing:.04em}.footer-base{padding-block:var(--space-3);border-top:1px solid #5c5953;font-size:var(--text-caption)}
:where(a,button,input,textarea):focus-visible{outline:3px solid var(--focus);outline-offset:3px}.inquiry :where(a,button,input,textarea):focus-visible,.site-footer :where(a):focus-visible{outline-color:#fffaf2}@media(max-width:760px){:root{--gutter:16px;--space-section:72px;--text-section:34px;--text-hero:48px}.hero:after{right:-90vw;top:12%;width:140vw;opacity:.28}.nav-toggle{display:inline-flex}.nav-list{position:absolute;top:72px;left:var(--gutter);right:var(--gutter);display:none;flex-direction:column;align-items:stretch;gap:0;padding:var(--space-3);border:1px solid var(--ink);background:var(--paper)}.nav-list[data-open='true']{display:flex}.nav-list a{display:block;padding:var(--space-3) 0}.hero-grid,.inquiry-grid{grid-template-columns:1fr}.hero-copy{padding-block:84px 42px}.hero-object{width:72%;margin-bottom:54px;justify-self:start}.series-grid,.application-grid,.process-grid,.footer-grid{grid-template-columns:1fr}.series-card{min-height:0}.application{min-height:0}.process-grid{gap:var(--space-6)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}}
```

### Tailwind v4

可选的 Tailwind v4 编译器输入；组件规则仍应保留上方完整样式表。

```css
@import "tailwindcss";
@theme {
  --color-canvas: #f7f5f0;
  --color-ink: #171717;
  --color-signal: #e85d24;
  --font-display: 'Space Grotesk', Arial, sans-serif;
  --font-body: Inter, Arial, sans-serif;
  --radius-control: 0px;
}
```