# 农用化学品 · Strada

**Theme:** 面向 B2B 农用化学品询盘旅程的编辑式田野工作视觉方向。

> 面向平静供应商评估与询盘路径的原创 B2B 视觉实施指导。

用于已获批农化能力讨论的原创视觉方向，包含仅本地运行的询盘准备路径。

## Tokens — Colors

视觉语言结合矿物纸色、深植物墨色和克制叶绿行动色。信号色仅用于决策与交互，深色表面用于方法和信任语境。

| 名称 | 值 | Token | 角色 |
|---|---:|---|---|
| 画布 | `#f4f2eb` | `--canvas` | 主页面底色 |
| 纸面 | `#f9faf6` | `--paper` | 卡片与表单控件 |
| 墨色 | `#1c211b` | `--ink` | 主文案与深色表面 |
| 弱文案 | `#4d564c` | `--muted` | 辅助文案 |
| 分隔线 | `#b8c1ae` | `--line` | 分隔线和输入边框 |
| 叶绿 | `#23834d` | `--leaf` | 操作与焦点 |
| 深叶绿 | `#135a32` | `--leaf-deep` | 按下操作状态 |

## Tokens — Typography

展示层级使用本地编辑感衬线字体，运营细节使用系统无衬线字体。标签应紧凑、直接且易扫描，不依赖远程字体加载。

### Type Scale

| 角色 | 字体 | 字号 | 字重 | 行高 | Token |
|---|---|---:|---:|---:|---|
| 标签 | ui-sans-serif | 12px | 800 | 1.2 | `--text-label` |
| 正文 | ui-sans-serif | 16px | 400 | 1.6 | `--text-body` |
| 导语 | ui-sans-serif | 20px | 400 | 1.5 | `--text-lead` |
| 卡片 | Georgia | 28px | 500 | 1.0 | `--text-card` |
| 区块 | Georgia | 52px | 500 | .96 | `--text-section` |
| 首屏 | Georgia | 104px | 500 | .9 | `--text-hero` |

## Tokens — Spacing & Shapes

系统采用 4px 节奏、明确的一像素分隔线和方正控件。宽松区块节奏使技术资料呈现经过思考的观感。

### Spacing Scale

| 名称 | 值 | Token |
|---|---:|---|
| 1 | 8px | `--space-1` |
| 2 | 16px | `--space-2` |
| 3 | 24px | `--space-3` |
| 4 | 40px | `--space-4` |
| 5 | 64px | `--space-5` |
| 区块 | 112px | `--space-section` |

### Border Radius

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

### Layout

- **外壳：** `--layout-max` 为 1180px；`--gutter` 为 24px。
- **首屏：** 最小 640px 的桌面构图，组合编辑式文案和原创 CSS 田野面板。
- **手机：** 760px 时网格变单列，边距降至 16px，首屏字号降至 54px。

## Components

### Compact Header and Navigation

`.site-header` 使用克制文字标识、短导航和描边 `.nav-toggle`。移动菜单按需打开；Escape 或选中链接会关闭菜单。

### Editorial Evidence Hero

`.hero` 将展示标题与 `.evidence-panel` 并置。使用原创 CSS 作物行几何和通用决策框架；不加入库存、价格、评分或来源图片。

### Rule-Led Capability Cards

`.capability-grid` 是三列证据导向卡片序列。每张卡包含编号、简短考量和范围明确的下一步链接，不添加未经支持的产品声明。

### Dark Method Panel

`.method-panel` 是用于流程语境的反白面板。它区分田野工作、处理问题与评审考量，不会变成消费者购买表面。

### Local RFQ Preparation Form

`.rfq-form` 标注联系人、工作邮箱和采购说明。空值显示关联行内错误并聚焦第一个无效字段；有效表单先显示本地忙碌，再显示未发送、未保存的完成信息。

## Do's and Don'ts

### Do

- 使用深植物表面、克制绿色操作和高对比度编辑式排版。
- 保持 B2B 顺序：证据、能力讨论、方法语境和 RFQ 准备。
- 仅使用获批项目文案和原创或已授权农业图片。
- 保留清晰键盘焦点、标签、错误反馈和减少动态效果支持。

### Don't

- 不要添加购物车、购物袋、结账、支付或消费者购买路径。
- 不要复用来源代码、文字、标识、图片、团队资料、价格、评分或作品条目。
- 不要把通用评审语言表述为规格、库存、认证、兼容性、交付或性能事实。
- 不要暗示本地表单会传输、存储或创建线索。

## Surfaces

| 层级 | 名称 | 值 | 用途 |
|---:|---|---|---|
| 0 | 矿物画布 | `#f4f2eb` | 整体页面底色 |
| 1 | 安静纸面 | `#f9faf6` | 控件和浅色卡片 |
| 2 | 植物面板 | `#e7eadf` | 证据和询盘面板 |
| 3 | 田野墨色 | `#1c211b` | 方法和页脚区块 |

## Elevation

默认不使用阴影。通过分隔线、比例和色调变化区分表面。聚焦或选中的面板可使用克制 `0 12px 26px rgba(28,33,27,.12)` 阴影，同时焦点指示必须可见。用户选择减少动态效果时，动效降为零时长。

## Imagery

使用原创或已授权的作物行、材料纹理、技术检查或抽象植物摄影。桌面首屏适合 16:10 裁切，移动端适合 4:5 裁切。有信息意义的图片必须有描述性替代文字；纯装饰纹理使用空替代文字。正式实施不得使用来源截图或模板素材。

## Layout

页面顺序为页头、分栏首屏、能力序列、深色方法面板、两个评审预览、RFQ 准备和页脚。桌面采用 12 栏外壳，首屏文案占 7 栏，证据占 5 栏。760px 时页面改为单列，菜单链接由切换按钮显示，RFQ 操作占满可用宽度。

## Agent Prompt Guide

使用记录的 token、方正形状、编辑式衬线层级、深绿色操作、分隔线卡片和仅本地 RFQ 行为，构建原创静态 B2B 农化询盘页面。在声明获批前使用通用运营文案。必须包含键盘导航、可见焦点、错误反馈、减少动态效果处理和响应式布局。不得使用远程字体、追踪器、外部表单 action、购物控件、来源截图、来源素材或复制文字。

**Quick Color Reference**

| 用途 | Token | 值 |
|---|---|---:|
| 主操作 | `--leaf` | `#23834d` |
| 操作按下 | `--leaf-deep` | `#135a32` |
| 主文字 | `--ink` | `#1c211b` |
| 字段背景 | `--paper` | `#f9faf6` |

**Example Component Prompts**

- 创建带一像素底线、编辑式标题和键盘可见文字链接的编号能力卡。
- 创建本地 RFQ 表单，具备明确标签、行内错误、首错聚焦、忙碌反馈及确认未发送或保存的完成说明。

## Similar Brands

此方向属于极简机构和专业服务参照类别：编辑式展示比例、克制留白、案例导向证据和对话优先的转化路径。它是实施分类，不表示关联、背书或来源业务身份。

## Quick Start

### CSS Custom Properties

将这份完整本地样式表作为空白项目起点。它提供 token、组件、响应式规则、焦点处理和表单状态呈现，不包含外部依赖。

```css
:root{--canvas:#f4f2eb;--paper:#f9faf6;--panel:#e7eadf;--ink:#1c211b;--muted:#4d564c;--line:#b8c1ae;--leaf:#23834d;--leaf-deep:#135a32;--on-dark:#f9faf6;--danger:#b42318;--font-display:Georgia,'Times New Roman',serif;--font-body:ui-sans-serif,system-ui,sans-serif;--text-label:12px;--text-body:16px;--text-lead:20px;--text-card:28px;--text-section:52px;--text-hero:104px;--space-1:8px;--space-2:16px;--space-3:24px;--space-4:40px;--space-5:64px;--space-section:112px;--layout-max:1180px;--gutter:24px;--radius:0px;--hero-min-height:640px}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font:400 var(--text-body)/1.6 var(--font-body);overflow-x:hidden}.shell{width:min(calc(100% - 2 * var(--gutter)),var(--layout-max));margin:auto}.site-header{min-height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.nav-list{display:flex;gap:var(--space-3)}.nav-toggle{display:none;border:1px solid var(--ink);background:var(--paper);padding:10px}.hero{min-height:var(--hero-min-height);display:grid;grid-template-columns:7fr 5fr;gap:var(--space-5);align-items:end}.hero h1,h2,h3{font-family:var(--font-display);line-height:.96}.hero h1{font-size:var(--text-hero)}.evidence-panel,.rfq-form{padding:var(--space-4);background:var(--panel);border:1px solid var(--line)}.capability-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink)}.capability-card{padding:var(--space-3);border-bottom:1px solid var(--line)}.method-panel{padding:var(--space-section) var(--gutter);background:var(--ink);color:var(--on-dark)}.button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border:0;border-radius:var(--radius);background:var(--leaf);color:var(--on-dark);font-weight:800;text-decoration:none;transition:transform .18s,background .18s}.button:hover{background:var(--leaf-deep);transform:translateY(-2px)}.field{display:grid;gap:6px}.field input,.field textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}.field [aria-invalid='true']{border:3px solid var(--danger)}.field-error{min-height:1.3em;color:var(--danger)}:where(a,button,input,textarea):focus-visible{outline:3px solid var(--leaf);outline-offset:3px}@media(max-width:760px){:root{--gutter:16px;--space-section:72px;--text-hero:54px;--text-section:38px}.nav-toggle{display:inline-flex}.nav-list{display:none}.nav-list[data-open='true']{display:flex;position:absolute;top:72px;left:var(--gutter);right:var(--gutter);flex-direction:column;padding:var(--space-2);background:var(--paper);border:1px solid var(--ink)}.hero,.capability-grid{grid-template-columns:1fr}.hero{min-height:auto;padding-block:var(--space-5)}.button{width:100%}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}}
```

### Tailwind v4

在完整独立样式表基础上，使用这份可选编译器映射。

```css
@theme{--color-canvas:#f4f2eb;--color-paper:#f9faf6;--color-ink:#1c211b;--color-signal:#23834d;--font-display:Georgia,'Times New Roman',serif;--font-body:ui-sans-serif,system-ui,sans-serif;--radius-control:0px}
```