# Verdant Supply — 风格参考
> 以原创几何构成的清爽植物感 B2B 采购方向。

**Theme:** light

Verdant Supply 将来源的清晰代理型节奏转化为原创 B2B 服务路径：帮助企业买家定向、比较服务范围、准备项目简报，再确认本地询盘草稿。这是高幅度适配，而非复刻；名称、文案、CSS 与形状均为原创。

## Tokens — Colors

| 名称 | 值 | Token | 角色 |
|---|---|---|---|
| 场地画布 | `#f6f7f1` | `--canvas` | 页面底色 |
| 纸白 | `#ffffff` | `--paper` | 卡片与字段 |
| 板岩墨色 | `#1e293b` | `--ink` | 字体与深色区块 |
| 叶绿 | `#466d1d` | `--leaf` | 主操作与标记 |
| 青柠 | `#b9d65d` | `--lime` | 首屏几何与询盘区 |
| 薄雾绿 | `#e8eed8` | `--mist` | 交替卡片表面 |

## Tokens — Typography

Arial 仅为本地回退字体；不加载远程字体。

### 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 | 24px | 1.03 | `--text-card` |
| 首屏 | Arial | 800 | 76px | 1.03 | `--text-hero` |

## Tokens — Spacing & Shapes

舒展间距、细线分隔、扁平面板和裁切菱形标记，让系统保持精确而非装饰化。

### Spacing Scale

| 名称 | 值 | Token |
|---|---:|---|
| 1 | 8px | `--space-1` |
| 3 | 16px | `--space-3` |
| 4 | 24px | `--space-4` |
| 6 | 48px | `--space-6` |
| 区块 | 104px | `--space-section` |

### Border Radius

| 元素 | 值 | Token |
|---|---:|---|
| 卡片 | 2px | `--radius` |
| 控件 | 2px | `--radius` |

### Layout

- **页面容器：** `--layout-max` / 1200px，`--gutter` / 28px。
- **首屏：** `--hero-min-height` / 620px 桌面网格。
- **手机端：** 760px 以下所有网格堆叠，页边距为 16px。

## Components

### 顶栏与移动导航
粘性导航在手机端变为可展开菜单；Escape、开关和菜单链接均可关闭它。

### 买家定向首屏
首屏仅用 CSS 制作扁平青柠圆环和编号面板。它引导服务浏览和项目询盘操作。

### 服务范围卡片
三张细线卡片组织通用服务范围。未经批准不得描述可用性、认证、交付、产能或性能。

### 应用场景网格
深色网格帮助买家说明使用条件和服务问题；它不是能力证明。

### 本地询盘草稿
询盘初始未选择范围，可加入一个项目方向，并进入带标签的本地确认表单；它聚焦第一个错误并显示仅本地完成状态，不发送、不存储任何内容。

## Do's and Don'ts

### Do
- 保持“浏览 → 服务范围 → 项目简报 → 本地询盘确认”的 B2B 路径。
- 用叶绿承载操作，用青柠承载视觉焦点。
- 保持标签、错误、键盘焦点和减少动态效果支持可见。

### Don't
- 不要把本地询盘确认接入 CRM、邮件服务、数据库或自动提交。
- 不要复用来源标识、代码、照片、人物、评分、项目或联系方式。
- 不要把通用标签变成未经核验的产品或服务声明。

## Surfaces

| 层级 | 名称 | 值 | 用途 |
|---:|---|---|---|
| 0 | 场地画布 | `#f6f7f1` | 整体底色 |
| 1 | 纸白 | `#ffffff` | 卡片与字段 |
| 2 | 板岩墨色 | `#1e293b` | 应用区与页脚 |
| 3 | 青柠 | `#b9d65d` | 询盘区 |

## Elevation

卡片保持扁平，以细线分隔。按钮悬停时移动两像素，不添加阴影。

## Imagery

不使用来源图片、标识、截图或图标。圆环、菱形和编号面板均是原创 CSS 几何；后续图片必须获得授权和批准。

## Layout

桌面顺序为顶栏 → 首屏 → 服务范围 → 应用场景网格 → 本地询盘确认 → 页脚。窄屏时全部网格变为单列，同时保留询盘路径。

## Agent Prompt Guide

**Quick Color Reference**

使用画布 `#f6f7f1`、墨色 `#1e293b`、叶绿 `#466d1d`、青柠 `#b9d65d`、薄雾绿 `#e8eed8`。内容保持可核验、以需求为导向。

**Example Component Prompts**

1. **B2B 首屏：** 创建 620px 桌面网格，含 CSS 青柠圆环、编号面板和项目询盘操作。
2. **服务范围网格：** 创建三张扁平细线卡片，使用通用标签和本地简报操作。
3. **本地询盘：** 校验三个字段，聚焦第一个错误，并明确说明未发送、未存储。

## Similar Brands

- **Gardena** — 类目清晰度可启发可扫描性，不借用其身份。
- **Fiskars** — 严谨产品分组可启发结构，不复制其视觉。
- **Hozelock** — 应用导向导航可指导信息架构。

## Quick Start

### CSS Custom Properties

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

```css
:root{--canvas:#f6f7f1;--paper:#fff;--ink:#1e293b;--muted:#52606f;--leaf:#466d1d;--leaf-hover:#365716;--lime:#b9d65d;--mist:#e8eed8;--line:#cfd8c0;--focus:#172554;--on-dark:#fff;--font-display:Arial,sans-serif;--font-body:Arial,sans-serif;--layout-max:1200px;--gutter:28px;--hero-min-height:620px;--radius:2px;--text-caption:12px;--text-label:13px;--text-body:16px;--text-lead:20px;--text-card:24px;--text-section:44px;--text-hero:76px;--space-1:8px;--space-2:12px;--space-3:16px;--space-4:24px;--space-5:32px;--space-6:48px;--space-section:104px}*{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;left:10px;top:10px;z-index:99;padding:10px 14px;background:var(--lime);transform:translateY(-150%)}.skip-link:focus{transform:translateY(0)}.header{position:sticky;top:0;z-index:20;background:rgba(246,247,241,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}.nav{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font:800 22px/1 var(--font-display);letter-spacing:-.06em;text-decoration:none}.brand i{display:inline-block;width:24px;height:24px;margin-right:7px;background:var(--leaf);vertical-align:-5px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}.links{display:flex;gap:26px;list-style:none;margin:0;padding:0}.links a{font-size:var(--text-label);font-weight:700;letter-spacing:.06em;text-decoration:none;text-transform:uppercase}.menu{display:none;border:1px solid var(--ink);background:var(--paper);padding:9px 12px}.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);background:var(--paper)}.hero:after{content:'';position:absolute;right:-14vw;bottom:-18vw;width:56vw;max-width:760px;aspect-ratio:1;border:72px solid var(--lime);border-radius:50%;opacity:.8}.hero-grid{min-height:var(--hero-min-height);display:grid;grid-template-columns:1.1fr .9fr;align-items:center}.hero-copy{position:relative;z-index:1;max-width:730px;padding:90px 0}.eyebrow{margin:0 0 var(--space-4);color:var(--leaf);font-size:var(--text-label);font-weight:800;letter-spacing:.12em;text-transform:uppercase}.eyebrow:before{content:'◆ ';color:var(--lime)}h1,h2,h3{margin:0;font-family:var(--font-display);line-height:1.03}h1{font-size:var(--text-hero);letter-spacing:-.07em;text-transform:uppercase}h1 em{font-style:normal;color:var(--leaf)}.lead{max-width:610px;margin:var(--space-5) 0;color:var(--muted);font-size:var(--text-lead)}.hero-panel{position:relative;z-index:1;justify-self:end;width:min(100%,420px);padding:26px;border:1px solid var(--ink);background:var(--mist)}.hero-panel:before{content:'01';display:block;color:var(--leaf);font:800 104px/.75 var(--font-display);letter-spacing:-.12em}.hero-panel p{margin:20px 0 0;color:var(--muted)}.button{display:inline-flex;min-height:50px;align-items:center;justify-content:center;border:1px solid var(--leaf);padding:11px 18px;background:var(--leaf);color:var(--on-dark);font-size:var(--text-label);font-weight:800;letter-spacing:.07em;text-decoration:none;text-transform:uppercase;transition:transform .15s,background .15s}.button:hover{background:var(--leaf-hover);transform:translate(-2px,-2px)}.button--quiet{margin-left:10px;background:transparent;color:var(--leaf)}.section{padding-block:var(--space-section)}.heading{max-width:720px;margin-bottom:var(--space-6)}.heading p{margin:var(--space-3) 0 0;color:var(--muted)}h2{font-size:var(--text-section);letter-spacing:-.055em}.cards{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}.card{min-height:310px;padding:var(--space-5);border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--paper)}.card:nth-child(2){background:var(--mist)}.card b{display:block;margin-bottom:62px;color:var(--leaf);font-size:var(--text-label);letter-spacing:.12em}.card h3{font-size:var(--text-card);letter-spacing:-.04em}.card p{color:var(--muted)}.card a{font-size:var(--text-label);font-weight:800;text-decoration:none;text-transform:uppercase}.dark{background:var(--ink);color:var(--on-dark);border-block:1px solid var(--ink)}.dark h2{color:var(--on-dark)}.dark .heading p{color:#d7dfca}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#617080;border:1px solid #617080}.grid article{min-height:210px;padding:var(--space-4);background:var(--ink)}.grid b{display:block;margin-bottom:54px;color:var(--lime);font-size:var(--text-label);letter-spacing:.1em}.grid h3{font-size:var(--text-card)}.grid p{color:#d7dfca}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}.step{padding-top:18px;border-top:5px solid var(--leaf)}.step span{display:block;margin-bottom:var(--space-4);color:var(--leaf);font:800 68px/.8 var(--font-display);letter-spacing:-.1em}.inquiry{background:var(--lime);padding-block:var(--space-section)}.inquiry-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--space-6)}.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%;padding:13px;border:1px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink)}.field textarea{min-height:105px}.field [aria-invalid=true]{border:3px solid #8b2500}.error{min-height:1.3em;color:#5d1b00;font-size:var(--text-caption);font-weight:700}.status{min-height:1.5em;font-weight:700}.inquiry .button{border-color:var(--ink);background:var(--ink)}.footer{padding-top:var(--space-6);background:var(--ink);color:#d7dfca}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--space-5);padding-bottom:var(--space-5)}.footer .brand{color:var(--on-dark)}.footer h3{color:var(--on-dark);font-size:var(--text-label)}.footer p{margin:8px 0}.footer-base{padding-block:var(--space-3);border-top:1px solid #617080;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,.footer a:focus-visible{outline-color:var(--on-dark)}@media(max-width:760px){:root{--gutter:16px;--space-section:72px;--text-section:34px;--text-hero:48px}.menu{display:inline-flex}.links{position:absolute;top:72px;left:var(--gutter);right:var(--gutter);display:none;flex-direction:column;gap:0;padding:14px;border:1px solid var(--ink);background:var(--paper)}.links[data-open=true]{display:flex}.links a{display:block;padding:12px 0}.hero-grid,.inquiry-grid{grid-template-columns:1fr}.hero-copy{padding:76px 0 38px}.hero-panel{justify-self:start;width:72%;margin-bottom:56px}.cards,.grid,.steps,.footer-grid{grid-template-columns:1fr}.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-leaf: #466d1d; --color-lime: #b9d65d; --color-ink: #1e293b; --radius-card: 2px; }
```