# Chemindus — Style Reference
> 居中化工服务门户：临床感白色画布、深蓝工具条与精准绿色行动信号。

**Theme:** light

这是一份受 Chemindus 视觉方向启发的原创 B2B 实施规范，使用虚构品牌与通用文案。保留大幅居中工艺视觉、方正控件、白色导航和宽松内容节奏；不得复用来源品牌、摄影、资质、经营年限表述或客户陈述。目标路径为浏览服务 → 评估应用需求 → 提交询盘；不包含购物袋、支付或结账处理。

## Tokens — Colors

| Name | Value | Token | Role |
|---|---|---|---|
| 白色画布 | `#ffffff` | `--color-canvas` | 主画布、导航与控件填充 |
| 标题墨黑 | `#0a0a0a` | `--color-ink` | 浅色表面上的标题与强调文字 |
| 正文石墨灰 | `#454545` | `--color-body` | 段落与辅助说明 |
| 工艺绿 | `#0caa41` | `--color-action` | 主行动、卡片顶线和 Hero 强调词 |
| 深工艺绿 | `#087a30` | `--color-action-hover` | 悬停填充和白底可读绿色文字 |
| 行动深墨绿 | `#062d17` | `--color-action-ink` | 工艺绿按钮上的文字 |
| 工具深蓝 | `#01193d` | `--color-utility` | 联系工具条、RFQ 表面和页脚 |
| 工具深蓝悬停 | `#06306b` | `--color-utility-hover` | 深蓝控件的悬停填充 |
| 柔和底色 | `#f1f1f1` | `--color-surface-soft` | 应用区与视觉面板背景 |
| 控件边界 | `#a9b4ad` | `--color-border` | 输入框和可见控件边界 |
| 细边界 | `#d9dfdb` | `--color-border-subtle` | 卡片与导航分隔线 |
| 浅表面焦点 | `#075e2a` | `--color-focus-light` | 浅色表面的焦点环 |
| 深表面焦点 | `#a7f3c1` | `--color-focus-dark` | 深色表面的焦点环 |
| 错误红 | `#b42318` | `--color-error` | 无效控件边界和错误状态 |
| 深色表面错误 | `#ffb4ab` | `--color-error-on-dark` | RFQ 深色表面上的行内错误文字 |
| 深色表面边界 | `#304563` | `--color-border-on-dark` | 深蓝页脚表面上的分隔线 |

工艺绿默认按钮始终搭配行动深墨绿，而非白字；悬停后切换为深绿白字。这样既保留来源启发的绿色行动信号，也让行动处理保持清晰易读。

## Tokens — Typography

显示、正文与界面均使用 Poppins。只加载 400、500、600、700 四个字重。完整样式表会导入这些 Google Fonts 字重；生产项目可替换为经批准的自托管来源，同时保持字体、字重与回退链一致。

### Type Scale

| Role | Family | Weight | Size | Line Height | Letter Spacing | Token |
|---|---|---:|---:|---:|---:|---|
| 注释 | Poppins | 400 | 12px | 1.4 | normal | `--text-caption` |
| 标签 | Poppins | 600 | 14px | 1.35 | normal | `--text-label` |
| 正文 | Poppins | 400 | 15px | 1.7 | normal | `--text-body` |
| 导语 | Poppins | 400 | 18px | 1.55 | normal | `--text-lead` |
| 卡片标题 | Poppins | 600 | 20px | 1.35 | normal | `--text-card` |
| 区块标题 | Poppins | 600 | 36px | 1.25 | -0.02em | `--text-section` |
| Hero | Poppins | 700 | 65px | 1.1 | -0.04em | `--text-hero` |

手机端 Hero 标题为 36px，区块标题为 30px。不得伪造字体字重，也不得使用压缩型显示字体替代。

## Tokens — Spacing & Shapes

**Density:** 宽松的编辑式区块与紧凑的工具条、导航行。方角和扁平边界形成克制的工业气质。

### Spacing Scale

| Name | Value | 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` |
| 7 | 60px | `--space-7` |
| 区块 | 100px | `--space-section` |

### Border Radius

| Element | Value | Token |
|---|---:|---|
| 卡片 | 0px | `--radius-card` |
| 按钮 | 0px | `--radius-control` |
| 输入框 | 0px | `--radius-control` |
| 导航 | 0px | `--radius-control` |

### Layout

- 桌面内容宽度：`--layout-max` / 1140px；页面边距：`--layout-gutter` / 24px。
- Hero 视觉区：居中、全宽，最小高度 `--hero-min-height` / 570px，不使用左右分栏商品布局。
- 区块节奏：竖向内边距为 100px；手机端为 60px，页面边距为 16px。

## Components

### 工具条
`.utility-bar` 是 50px 深蓝联系工具条。`.utility-bar .shell` 为简洁左对齐横排。文字应短，不要堆入声明、徽章或社交计数。

### 页头与移动导航
`.site-header` 与 `.nav-row` 组成白色 96px 桌面导航。`.brand` 仅为虚构文字标识；`.nav-list` 放置锚点链接。在 760px 及以下，`.nav-toggle` 控制 `.nav-list[data-open='true']`。打开后焦点移至首个链接；由开关、锚点链接或 Escape 关闭时，焦点返回开关。折叠列表不保留隐藏的键盘目标。

### Hero
`.hero`、`.hero-content`、`.eyebrow`、`.hero-copy` 与 `.button` 在原创 `assets/chemical-process.svg` 之上形成首屏居中工艺陈述。仅用 `h1 em` 强调一个短词，并保留一个主 RFQ 行动。该 SVG 是通用视觉，不是工艺操作指引或真实设施描绘。

### 概览
`.overview` 将说明文字与 `.overview-visual` 配对，后者是扁平浅灰原创 SVG 面板；手机端改为单列。可介绍能力类别，但不作性能、认证或制造声明。

### 服务
`.service-grid` 放置三个 `.service-card`。卡片为 4px 绿色顶线、细边界、32px 内边距，无阴影、无圆角。每张卡指向更宽泛的服务或应用领域，不指向可购买 SKU。

### 应用与 FAQ
`.application` 包含 `.application-grid` 和 `.application-item`，用于三个可快速阅读的考量领域。`.faq-list` 使用原生 `.faq-item` 折叠控件，并确保摘要焦点可见。答案保持信息性，不提供实验室操作指引。

### RFQ 表单
`.rfq` 是深蓝询盘区，包含 `.rfq-grid` 与 `.rfq-form`。通过组合校验要求 `name` 或 `company` 之一，同时要求 `email` 与 `application/message`，并在每个必填控件标签中标记。校验失败时，设置 `aria-invalid="true"`，通过 `aria-describedby` 连接 `.field-error`，使用 `.form-status[role="status"]` 宣告摘要，并聚焦第一个无效字段。提交时禁用提交 `.button`，设置 `aria-busy="true"` 并本地持续 500ms，随后恢复并明确提示：“询盘已在本地准备，未发送；你的填写内容仍可编辑。”不涉及网络请求、localStorage、支付、价格或真实报价。

### 页脚
`.site-footer`、`.footer-grid` 与 `.footer-base` 提供深蓝导航、通用联系路径和版权占位。不得使用来源 Logo、地址、社交资料、客户 Logo 或成就计数。

## Do's and Don'ts

### Do

- 使用 1140px 居中壳层与桌面 100px 的充裕区块内边距。
- 保持 Hero 为居中全宽视觉，并只放置一个绿色 RFQ 行动。
- 使用带绿色顶线和细边界的扁平方角卡片。
- 在绿色按钮上使用行动深墨绿，并在对应表面使用指定焦点色。
- 以服务发现和询盘准备作为主要 B2B 路径。
- 保留原生折叠语义与清晰的本地表单反馈。

### Don't

- 不要将 Hero 改成左右分栏的商品电商布局。
- 不要添加购物袋、购物车、价格、支付、结账或购买账户流程。
- 不要复用来源摄影、Logo、人物、认证、客户 Logo 或经营历史声明。
- 不要使用圆角 SaaS 卡片、胶囊形、渐变或悬浮阴影。
- 不要在亮绿色默认按钮上使用正文尺寸白字。
- 不要暗示表单会传输数据或生成实时报价。

## Surfaces

| Level | Name | Value | Purpose |
|---:|---|---|---|
| 0 | 白色画布 | `#ffffff` | 页面、页头、服务卡和控件背景 |
| 1 | 柔和底色 | `#f1f1f1` | 概览视觉与应用区 |
| 2 | 工具深蓝 | `#01193d` | 工具条和 RFQ 交互表面 |
| 3 | 页脚深蓝 | `#01193d` | 页脚导航和法律信息底部 |

## Elevation

- 服务卡：`none`；使用 `1px solid var(--color-border-subtle)` 与绿色顶线。
- 按钮：`none`；使用填充、边界、悬停色、禁用透明度和可见焦点轮廓。
- 移动导航：`none`；它是带分隔线的文档流白色面板，不是悬浮抽屉。

## Imagery

使用 `assets/chemical-process.svg` 作为唯一提供的视觉：它是原创的抽象玻璃器皿与工艺插图，不含人物、公司标记、安全印章或操作步骤。使用全宽冷色中性底与精确绿色强调；裁切处理保持方正和安静。之后若加入摄影，必须使用项目已获授权的媒体，并展现通用工业情境，不复制来源构图。

## Layout

桌面顺序为工具条 → 白色页头 → 居中全宽 Hero → 概览 → 三张服务卡 → 应用 → FAQ → RFQ → 页脚。宽屏 `.shell` 为 1140px。760px 及以下隐藏工具条、折叠导航、概览/RFQ/页脚改为单列，服务卡和应用卡堆叠。锚点导航在到达目标后关闭已打开的移动列表。

## Agent Prompt Guide

**Quick Color Reference**

- 画布：`#ffffff`；标题：`#0a0a0a`；正文：`#454545`。
- 行动：`#0caa41` 配 `#062d17` 文字；悬停：`#087a30` 配白字。
- 深色表面：`#01193d` 配白色文案和 `#a7f3c1` 焦点环。
- 边界：控件用 `#a9b4ad`，结构分隔用 `#d9dfdb`。

**Example Component Prompts**

1. **居中工艺 Hero：** 创建最小高度 570px 的 `.hero`，以原创 chemical-process SVG 为柔和背景。居中放置 65px、Poppins 700 标题，其中一个词为 `#0caa41`，并放置一个方正 56px RFQ 按钮，文字为深绿。
2. **三列服务卡：** 在 1140px 下创建三等列 `.service-grid`。每张 `.service-card` 有 4px `#0caa41` 顶线、1px `#d9dfdb` 边界、32px 内边距、无圆角、无阴影；手机端堆叠。
3. **仅本地 RFQ：** 创建 `.rfq-form`，要求姓名或公司、邮箱和应用/留言。提供行内 `aria-describedby` 错误、第一个错误焦点、500ms 禁用忙碌反馈，并明确说明未发送且内容仍可编辑。

## Similar Brands

- **BASF** — 企业化工沟通常以深蓝配合简洁能力导航。
- **Brenntag** — B2B 化学品分销常以应用导向发现和清晰询盘路径组织内容。
- **Dow** — 大型流程工业网站说明了宽松技术叙事与克制行动色的价值。
- **Ecolab** — 服务型工业页面平衡白空间、绿色提示与询盘导向行动。

## Quick Start

### CSS Custom Properties

将此完整样式表作为空白项目的起点。它包含 token、布局、所有命名组件、响应式行为、键盘焦点、禁用和错误状态、本地忙碌反馈以及减少动态效果处理。开头的 Google Fonts 导入只加载 Poppins 400、500、600、700；需要时请替换为经批准的自托管来源。此 CSS 不依赖来源供应商代码。

```css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --color-canvas: #ffffff;
  --color-ink: #0a0a0a;
  --color-body: #454545;
  --color-action: #0caa41;
  --color-action-hover: #087a30;
  --color-action-ink: #062d17;
  --color-utility: #01193d;
  --color-utility-hover: #06306b;
  --color-footer: #01193d;
  --color-surface-soft: #f1f1f1;
  --color-border: #a9b4ad;
  --color-border-subtle: #d9dfdb;
  --color-focus-light: #075e2a;
  --color-focus-dark: #a7f3c1;
  --color-error: #b42318;
  --color-error-bg: #fff2f0;
  --color-error-on-dark: #ffb4ab;
  --color-border-on-dark: #304563;
  --color-on-dark: #ffffff;
  --font-heading: 'Poppins', Arial, sans-serif;
  --font-body: 'Poppins', Arial, sans-serif;
  --text-caption: 12px;
  --text-label: 14px;
  --text-body: 15px;
  --text-lead: 18px;
  --text-card: 20px;
  --text-section: 36px;
  --text-hero: 65px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 60px;
  --space-section: 100px;
  --layout-max: 1140px;
  --layout-gutter: 24px;
  --hero-min-height: 570px;
  --radius-card: 0px;
  --radius-control: 0px;
  --shadow-none: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--color-canvas); color: var(--color-body); font-family: var(--font-body); font-size: var(--text-body); font-weight: 400; line-height: 1.7; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea { font: inherit; }
.skip-link { position: fixed; z-index: 20; top: 8px; left: 8px; transform: translateY(-160%); padding: var(--space-2) var(--space-3); background: var(--color-canvas); color: var(--color-utility); }
.skip-link:focus { transform: translateY(0); }
.shell { width: min(100% - (2 * var(--layout-gutter)), var(--layout-max)); margin-inline: auto; }
.utility-bar { background: var(--color-utility); color: var(--color-on-dark); font-size: var(--text-label); }
.utility-bar .shell { display: flex; min-height: 50px; align-items: center; gap: var(--space-4); }
.site-header { background: var(--color-canvas); border-bottom: 1px solid var(--color-border-subtle); }
.nav-row { display: flex; min-height: 96px; align-items: center; justify-content: space-between; gap: var(--space-4); }
.brand { color: var(--color-utility); font-size: 20px; font-weight: 700; line-height: 1.1; text-decoration: none; }
.brand small { display: block; color: var(--color-action-hover); font-size: var(--text-caption); font-weight: 500; }
.nav-list { display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; list-style: none; }
.nav-list a, .nav-toggle { color: var(--color-ink); font-size: var(--text-label); font-weight: 600; text-decoration: none; }
.nav-toggle { display: none; border: 1px solid var(--color-utility); background: var(--color-canvas); padding: 10px 14px; }
.hero { position: relative; display: grid; place-items: center; min-height: var(--hero-min-height); overflow: hidden; background: linear-gradient(115deg, rgba(255,255,255,.91), rgba(255,255,255,.64)), url('assets/chemical-process.svg') center / cover; text-align: center; }
.hero-content { max-width: 950px; padding-block: var(--space-7); }
.eyebrow { margin: 0 0 var(--space-2); color: var(--color-action-hover); font-size: var(--text-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3 { margin: 0; color: var(--color-ink); font-family: var(--font-heading); }
h1 { font-size: var(--text-hero); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
h1 em { color: var(--color-action); font-style: normal; }
h2 { font-size: var(--text-section); font-weight: 600; line-height: 1.25; }
h3 { font-size: var(--text-card); font-weight: 600; line-height: 1.35; }
.hero-copy { max-width: 720px; margin: var(--space-4) auto var(--space-5); color: var(--color-ink); font-size: var(--text-lead); }
.button { display: inline-flex; min-height: 56px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: var(--radius-control); padding: 14px 32px; background: var(--color-action); color: var(--color-action-ink); font-size: var(--text-body); font-weight: 600; text-decoration: none; }
.button:hover { background: var(--color-action-hover); color: var(--color-on-dark); }
.button--dark { background: var(--color-utility); color: var(--color-on-dark); }
.button--dark:hover { background: var(--color-utility-hover); }
.section { padding-block: var(--space-section); }
.section-heading { display: grid; gap: var(--space-3); max-width: 640px; margin-bottom: var(--space-6); }
.section-heading p { margin: 0; }
.overview { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-7); align-items: center; }
.overview-visual { min-height: 340px; background: var(--color-surface-soft) url('assets/chemical-process.svg') center / 82% no-repeat; border: 1px solid var(--color-border-subtle); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.service-card { min-height: 250px; border: 1px solid var(--color-border-subtle); border-top: 4px solid var(--color-action); padding: var(--space-5); background: var(--color-canvas); box-shadow: var(--shadow-none); }
.service-card p { margin: var(--space-2) 0 0; }
.application { background: var(--color-surface-soft); }
.application-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.application-item { padding: var(--space-4); border-left: 3px solid var(--color-action); background: var(--color-canvas); }
.faq-list { display: grid; gap: var(--space-2); }
.faq-item { border: 1px solid var(--color-border-subtle); }
.faq-item summary { cursor: pointer; padding: var(--space-3) var(--space-4); color: var(--color-ink); font-weight: 600; }
.faq-item p { margin: 0; padding: 0 var(--space-4) var(--space-4); }
.rfq { background: var(--color-utility); color: var(--color-on-dark); }
.rfq h2, .rfq h3 { color: var(--color-on-dark); }
.rfq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--space-7); align-items: start; }
.rfq-form { display: grid; gap: var(--space-3); }
.field { display: grid; gap: var(--space-1); }
.field label { font-size: var(--text-label); font-weight: 600; }
.field input, .field textarea { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-control); padding: 14px 16px; background: var(--color-canvas); color: var(--color-ink); }
.field textarea { min-height: 132px; resize: vertical; }
.field [aria-invalid='true'] { border-color: var(--color-error); background: var(--color-error-bg); }
.field-error { min-height: 1.4em; color: var(--color-error-on-dark); font-size: var(--text-caption); }
.form-status { min-height: 1.7em; margin: 0; color: var(--color-on-dark); }
.button[disabled] { cursor: not-allowed; opacity: .62; }
.button[aria-busy='true'] { cursor: wait; }
.site-footer { padding-top: var(--space-7); background: var(--color-footer); color: var(--color-on-dark); }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(2, 1fr); gap: var(--space-6); padding-bottom: var(--space-6); }
.site-footer h3 { color: var(--color-on-dark); font-size: var(--text-label); }
.site-footer a { color: var(--color-on-dark); }
.footer-base { border-top: 1px solid var(--color-border-on-dark); padding-block: var(--space-3); font-size: var(--text-caption); }
:where(a, button, input, textarea, summary):focus-visible { outline: 3px solid var(--color-focus-light); outline-offset: 3px; }
.utility-bar :where(a, button):focus-visible, .rfq :where(a, button, input, textarea):focus-visible, .site-footer a:focus-visible { outline-color: var(--color-focus-dark); }
@media (max-width: 760px) {
  :root { --layout-gutter: 16px; --hero-min-height: 480px; --text-hero: 36px; --text-section: 30px; --space-section: 60px; }
  .utility-bar { display: none; }
  .nav-row { min-height: 74px; }
  .nav-toggle { display: inline-flex; }
  .nav-list { position: absolute; z-index: 10; top: 74px; right: 0; left: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-3) var(--layout-gutter); background: var(--color-canvas); border-bottom: 1px solid var(--color-border-subtle); }
  .nav-list[data-open='true'] { display: flex; }
  .nav-list a { padding: var(--space-2) 0; }
  .hero-copy { font-size: var(--text-body); }
  .overview, .rfq-grid, .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .service-grid, .application-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
```

### Tailwind v4

可选的 Tailwind v4 编译器输入。它声明直接主题值，并与上方完整样式表分离；组件规则仍保留上方完整样式表。

```css
@import "tailwindcss";
@theme {
  --color-canvas: #ffffff;
  --color-ink: #0a0a0a;
  --color-body: #454545;
  --color-action: #0caa41;
  --color-action-hover: #087a30;
  --color-utility: #01193d;
  --color-utility-hover: #06306b;
  --color-soft: #f1f1f1;
  --color-control-border: #a9b4ad;
  --color-error: #b42318;
  --color-error-on-dark: #ffb4ab;
  --font-heading: 'Poppins', Arial, sans-serif;
  --font-body: 'Poppins', Arial, sans-serif;
  --radius-card: 0px;
  --spacing-section: 100px;
}
```