# Verdant Supply — Style Reference
> A crisp, botanical B2B sourcing direction built from original geometry.

**Theme:** light

Verdant Supply translates the source's clean agency rhythm into an original B2B service path: orient a business buyer, compare service scopes, prepare a project brief, then confirm a local inquiry draft. It is a high-effort adaptation, not a recreation. All names, copy, CSS and shapes are original.

## Tokens — Colors

| Name | Value | Token | Role |
|---|---|---|---|
| Field Canvas | `#f6f7f1` | `--canvas` | Page field |
| Paper | `#ffffff` | `--paper` | Cards and fields |
| Slate Ink | `#1e293b` | `--ink` | Type and dark bands |
| Leaf | `#466d1d` | `--leaf` | Primary action and markers |
| Lime | `#b9d65d` | `--lime` | Hero geometry and inquiry field |
| Mist | `#e8eed8` | `--mist` | Alternate card surface |

## Tokens — Typography

Arial is a local fallback only; no remote font is loaded.

### Type Scale

| Role | Family | Weight | Size | Line Height | Token |
|---|---|---:|---:|---:|---|
| caption | Arial | 800 | 12px | 1.4 | `--text-caption` |
| label | Arial | 800 | 13px | 1.35 | `--text-label` |
| body | Arial | 400 | 16px | 1.6 | `--text-body` |
| lead | Arial | 400 | 20px | 1.5 | `--text-lead` |
| card | Arial | 700 | 24px | 1.03 | `--text-card` |
| hero | Arial | 800 | 76px | 1.03 | `--text-hero` |

## Tokens — Spacing & Shapes

Comfortable spacing, hairline rules, flat panels and a clipped diamond mark make the system feel precise rather than decorative.

### Spacing Scale

| Name | Value | Token |
|---|---:|---|
| 1 | 8px | `--space-1` |
| 3 | 16px | `--space-3` |
| 4 | 24px | `--space-4` |
| 6 | 48px | `--space-6` |
| section | 104px | `--space-section` |

### Border Radius

| Element | Value | Token |
|---|---:|---|
| cards | 2px | `--radius` |
| controls | 2px | `--radius` |

### Layout

- **Page shell:** `--layout-max` / 1200px with `--gutter` / 28px.
- **Hero:** `--hero-min-height` / 620px desktop grid.
- **Phone:** at 760px all grids stack and gutters become 16px.

## Components

### Header and Mobile Navigation
Sticky navigation becomes a disclosed menu on phones. Escape, the toggle and a menu link close it.

### Buyer-Orientation Hero
The hero uses a flat lime ring and numbered panel made only with CSS. It frames service discovery and a project-inquiry action.

### Service-Scope Cards
Three ruled cards organize generic service scopes. They must not state availability, certification, delivery, capacity or performance facts before approval.

### Application Grid
Dark-grid prompts help a buyer describe use conditions and service questions; they are not proof of capability.

### Local Inquiry Draft
The inquiry starts without a selected scope, accepts one project direction, and opens a labeled local confirmation form. It focuses the first error and gives a local-only completion state; it sends and stores nothing.

## Do's and Don'ts

### Do
- Keep the B2B journey at discovery → service scope → project brief → local inquiry confirmation.
- Use Leaf for actions and Lime for focal geometry.
- Keep labels, errors, keyboard focus and reduced-motion support visible.

### Don't
- Do not connect the local inquiry confirmation to a CRM, email service, database or automatic submission.
- Do not reuse source marks, code, photos, people, ratings, projects or contact details.
- Do not turn generic labels into unverified product or service claims.

## Surfaces

| Level | Name | Value | Purpose |
|---:|---|---|---|
| 0 | Field Canvas | `#f6f7f1` | Overall field |
| 1 | Paper | `#ffffff` | Cards and fields |
| 2 | Slate Ink | `#1e293b` | Application and footer |
| 3 | Lime | `#b9d65d` | Inquiry block |

## Elevation

Cards are flat, separated by rules. Buttons move two pixels on hover; they do not gain shadows.

## Imagery

Use no source imagery, logos, screenshots or icons. The ring, diamond and numbered panel are original CSS geometry. Later imagery must be licensed and approved.

## Layout

Desktop order is header → hero → service scopes → application grid → local inquiry confirmation → footer. On narrow screens every grid becomes one column while preserving the inquiry path.

## Agent Prompt Guide

**Quick Color Reference**

Use canvas `#f6f7f1`, ink `#1e293b`, leaf `#466d1d`, lime `#b9d65d` and mist `#e8eed8`. Keep content factual and request-led.

**Example Component Prompts**

1. **B2B hero:** Create a 620px desktop grid with a CSS lime ring, numbered panel and project-inquiry action.
2. **Service-scope grid:** Create three flat ruled cards with generic labels and local brief actions.
3. **Local inquiry:** Validate three fields, focus the first error and state clearly that nothing was sent or saved.

## Similar Brands

- **Gardena** — category clarity can inspire scanability without borrowing identity.
- **Fiskars** — disciplined product grouping can inform structure without copying visuals.
- **Hozelock** — application-led navigation can guide information architecture.

## Quick Start

### CSS Custom Properties

Use this complete local stylesheet as the blank-project starting point. It supplies tokens, responsive layouts, named components, focus states, validation states, local-only feedback, and reduced-motion support.

```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; }
```