# Agrochemicals · Strada
**Theme:** Editorial fieldwork for a B2B agrochemical inquiry journey.
> Original B2B visual implementation guidance for a calm supplier-evaluation and inquiry path.
An original visual direction for approved agrochemical capability discussions, with a local-only inquiry preparation route.
## Tokens — Colors
The visual language pairs mineral paper with dense botanical ink and a controlled leaf-green action color. Reserve the signal color for decisions and interaction; use the dark surface for methods and trust context.
| Name | Value | Token | Role |
|---|---:|---|---|
| Canvas | `#f4f2eb` | `--canvas` | primary page field |
| Paper | `#f9faf6` | `--paper` | cards and form controls |
| Ink | `#1c211b` | `--ink` | primary copy and dark surface |
| Muted | `#4d564c` | `--muted` | supporting copy |
| Line | `#b8c1ae` | `--line` | rules and input borders |
| Leaf | `#23834d` | `--leaf` | actions and focus |
| Leaf deep | `#135a32` | `--leaf-deep` | pressed action state |
## Tokens — Typography
Use a local editorial serif for display hierarchy and a system sans serif for operational detail. Keep labels compact, direct, and easy to scan; do not depend on remote font delivery.
### Type Scale
| Role | Family | Size | Weight | Line height | Token |
|---|---|---:|---:|---:|---|
| Label | ui-sans-serif | 12px | 800 | 1.2 | `--text-label` |
| Body | ui-sans-serif | 16px | 400 | 1.6 | `--text-body` |
| Lead | ui-sans-serif | 20px | 400 | 1.5 | `--text-lead` |
| Card | Georgia | 28px | 500 | 1.0 | `--text-card` |
| Section | Georgia | 52px | 500 | .96 | `--text-section` |
| Hero | Georgia | 104px | 500 | .9 | `--text-hero` |
## Tokens — Spacing & Shapes
The system uses a 4px rhythm, uncompromising one-pixel rules, and square controls. Spacious section cadence lets technical material read as considered rather than crowded.
### Spacing Scale
| Name | Value | Token |
|---|---:|---|
| 1 | 8px | `--space-1` |
| 2 | 16px | `--space-2` |
| 3 | 24px | `--space-3` |
| 4 | 40px | `--space-4` |
| 5 | 64px | `--space-5` |
| Section | 112px | `--space-section` |
### Border Radius
| Element | Value | Token |
|---|---:|---|
| Cards | 0px | `--radius` |
| Controls | 0px | `--radius` |
| Panels | 0px | `--radius` |
### Layout
- **Shell:** `--layout-max` is 1180px; `--gutter` is 24px.
- **Hero:** a 640px minimum desktop composition combines editorial copy and an original CSS field panel.
- **Phone:** at 760px, grids become one column, gutters reduce to 16px, and the hero type reduces to 54px.
## Components
### Compact Header and Navigation
`.site-header` uses a restrained wordmark, a short navigation list, and a bordered `.nav-toggle`. The mobile menu opens deliberately; Escape or a selected link closes it and restores a clear reading path.
### Editorial Evidence Hero
`.hero` places a decisive display heading beside `.evidence-panel`. Use original CSS crop-row geometry and generic decision framing; do not introduce product stock, prices, rating claims, or source imagery.
### Rule-Led Capability Cards
`.capability-grid` is a three-column sequence of evidence-oriented cards. Each card holds a number, a concise consideration, and a scoped next-step link rather than unsupported product claims.
### Dark Method Panel
`.method-panel` is an inversion for process context. It separates fieldwork, handling questions, and review considerations from conversion controls without becoming a consumer purchase surface.
### Local RFQ Preparation Form
`.rfq-form` labels contact, work email, and a sourcing note. Empty values expose linked inline errors and focus the first invalid field. A valid form has a brief local busy state followed by a no-send/no-save completion message.
## Do's and Don'ts
### Do
- Use dark botanical surfaces, disciplined green actions, and high-contrast editorial typography.
- Keep the B2B sequence at evidence, capability discussion, method context, and RFQ preparation.
- Use approved project copy and original or licensed agricultural imagery only.
- Preserve visible keyboard focus, labels, errors, and reduced-motion behavior.
### Don't
- Do not add a cart, bag, checkout, payment, or consumer purchase path.
- Do not reuse source code, source text, logos, images, team profiles, prices, ratings, or portfolio entries.
- Do not present generic review language as specifications, stock, certification, compatibility, delivery, or performance facts.
- Do not imply that the local form transmits, stores, or creates a lead.
## Surfaces
| Level | Name | Value | Purpose |
|---:|---|---|---|
| 0 | Mineral Canvas | `#f4f2eb` | overall page field |
| 1 | Quiet Paper | `#f9faf6` | controls and light cards |
| 2 | Botanical Panel | `#e7eadf` | evidence and inquiry panels |
| 3 | Field Ink | `#1c211b` | method and footer blocks |
## Elevation
Use no default shadows. Separate surfaces with rules, scale, and tonal changes. A focused or selected panel may use one restrained `0 12px 26px rgba(28,33,27,.12)` shadow while its focus indicator remains visible. Motion reduces to zero-duration treatment when the user requests reduced motion.
## Imagery
Use original or licensed crop rows, material texture, technical inspection, or abstract botanical photography. Desktop hero crops favor 16:10 and mobile crops favor 4:5. Meaningful images need descriptive alternative text; purely decorative texture uses empty alternative text. Never use the source screenshot or template assets in production.
## Layout
The page order is header, split hero, capability sequence, dark method panel, two review previews, RFQ preparation, then footer. Desktop uses a 12-column shell with 7 columns for hero copy and 5 for evidence. At 760px the page becomes one column, menu links are disclosed by the toggle, and RFQ action spans the available width.
## Agent Prompt Guide
Build an original static B2B agrochemical inquiry page using the documented tokens, square shapes, editorial serif hierarchy, dark-green actions, rule-led cards, and local-only RFQ behavior. Use generic operational copy until claims are approved. Include keyboard navigation, visible focus, error feedback, reduced-motion handling, and responsive layouts. Do not use remote fonts, trackers, external form actions, shopping controls, source screenshots, source assets, or copied text.
**Quick Color Reference**
| Use | Token | Value |
|---|---|---:|
| Main action | `--leaf` | `#23834d` |
| Action pressed | `--leaf-deep` | `#135a32` |
| Main type | `--ink` | `#1c211b` |
| Field background | `--paper` | `#f9faf6` |
**Example Component Prompts**
- Create a numbered capability card with a one-pixel bottom rule, an editorial heading, and a keyboard-visible text link.
- Create a local RFQ form with explicit labels, inline errors, first-error focus, busy feedback, and a completion statement that confirms nothing was sent or saved.
## Similar Brands
This direction belongs to the minimalist agency and professional-services reference class: editorial display scale, deliberate whitespace, case-oriented evidence, and a conversation-first conversion path. It is an implementation category, not a claim of affiliation, endorsement, or source-business identity.
## Quick Start
### CSS Custom Properties
Use this complete local stylesheet as the blank-project starting point. It supplies tokens, components, responsive rules, focus treatment, and form state presentation without external dependencies.
```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
Use this optional compiler mapping alongside the complete standalone stylesheet above.
```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}
```
